码迷,mamicode.com
首页 > Web开发 > 详细

20150304+JQuery+AJax+插件-01

时间:2016-05-07 23:35:28      阅读:312      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

The Write Less,Do More——jQuery下

目录

The Write Less,Do More——jQuery 1

一、each方法 2

二、jQuery中的ajax操作 3

1ajax的底层实现 4

2ajax的高级实现 7

1)模拟发送get请求 7

2)通过时间戳解决get请求缓存问题 8

3)模拟post请求 8

4)返回值类型 9

三、Ajax跨域请求——jsonp技术 11

1Ajax跨域请求原理图 11

2Ajax跨域请求不被允许的原因 11

3jsonp协议 12

4、通过jsonp返回大批量数据 13

四、jQuery中的跨域请求 15

1、通过jQueryajax底层实现$.ajax()解决跨域问题 15

2、通过$.get()方法解决跨域请求 16

3$.getJSON()方法解决跨域请求 17

五、天气预报 18

1、原理图 18

2、代码实现 18

六、那些年涛哥追过的jQuery插件 19

1Lightbox 19

2jquery.rotate.min.js插件 19

3ValidateForm 20

4、多文件上传 20

5jquery.lazyload.js 21

6jQuery Mobile 21

each方法

功能:用于遍历jQuery对象

基本语法:

jQuery对象.each(callback):该函数只有一个参数,要求是一个callback函数,函数的格式如下:

function callback(i,item){}

参数说明:

jQuery对象中拥有多少个元素,那么我们的callback函数就会自动执行多少次。

i:遍历时,系统会自动将当前元素的索引下标放入变量i中,默认从0开始

item:便利是,系统会自动将当前元素的本身放入变量item中,其就是当前的dom对象

例1:通过each实现对三个层的内容进行遍历,并更改其内容为第1个div元素…

技术分享

运行效果:

技术分享

例2:替换当前页面的img中的src属性更换为不同的三张图片

demo02_each.html

技术分享

运行效果:

技术分享

、jQuery中的ajax操作

如果是get请求,就要分5步

如果是post请求,就要分6步

//1)创建Ajax对象

var xhr = createXhr();

//2)设置回调函数

xhr.onreadystatechange = function(){

//6)判断与执行

}

//3)初始化ajax

xhr.open(‘post’,’demo01.php’);

//4)设置请求头信息

xhr.setRequestHeader(‘Content-type’,’application/x-www-form-urlencoded’);

//5)发送ajax请求

xhr.send(data);

在jQuery中的ajax实现有二种方式,三种方法

方式一:ajax的底层实现

l jQuery.ajax(options)

方式二:ajax的高级实现

l jQuery.get(url,[data],[callback])

l jQuery.post(url,[data],[callback])

1、ajax的底层实现

jQuery.ajax(options) === $.ajax

参数说明:

options:要求该参数为一个json对象

l async :是否异步 ,默认为true

l cache :缓存,bool类型,true:缓存,false:不缓存,默认为true

l complete :当ajax状态码为4时,所触发的回调函数

l contentType :设置请求头信息

l data :ajax发送时,所传递的参数,要求是一个字符串

l dataType :期待的返回值类型,text,xml,json,默认为text

l success :当ajax状态为4且http响应状态码为200所触发的回调函数

l type :ajax发送的请求类型:get,post

l url :请求的url地址

例1:

demo03_ajax.html

技术分享

效果:

技术分享

注:运行以上代码,我们发现,当在IE浏览器下运行时,系统还是会产生缓存问题,那么如何解决缓存呢?

答:可以通过cache方式解决缓存问题

例2:

技术分享

例3:通过ajax发送数据到服务器端

技术分享

返回结果:hello zhangsan

例4:通过ajax发送post请求

技术分享

返回结果:hello zhangsan

注:在ajax底层实现中可以不添加请求头信息,系统会自动追加请求头到发送数据中

例5:通过ajax底层实现返回两个数的四则

返回值类型

text文本、xml格式、json格式

技术分享

运行结果:

技术分享

2、ajax的高级实现

l jQuery.get(url,[data],[callback]) :模拟ajax的get请求

l jQuery.post(url,[data],[callback]) :模拟ajax的post请求

参数说明:

url:要请求的url地址

[data]:要发送的数据,要求该参数为json对象

[callback]:当ajax状态码为4且http响应状态码为200时,所触发的回调函数

[type]:期待的返回值类型,text,xml,json

1)模拟发送get请求

技术分享

技术分享

通过运行可知,虽然以上程序可以正常运行,但还是存在缓存问题,那么如何解决呢?

2通过时间戳解决get请求缓存问题

技术分享

运行效果:

技术分享

3)模拟post请求

技术分享

运行效果:

技术分享

4)返回值类型

1)xml数据的解析

技术分享

结果如下:

技术分享

2)通过jQuery方式进行解析

var person=$(msg).find(“person”);

person.children(“name”).text());

person.children(“jian”).text());

person.children(“cheng”).text());

技术分享

运行结果:

技术分享

2)json数据的解析

技术分享

运行效果:

技术分享

20150304+JQuery+AJax+插件-01

标签:

原文地址:http://www.cnblogs.com/lifushan/p/5469371.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!