The Write Less,Do More——jQuery下
目录
The Write Less,Do More——jQuery下 1
一、each方法 2
二、jQuery中的ajax操作 3
1、ajax的底层实现 4
2、ajax的高级实现 7
1）模拟发送get请求 7
2）通过时间戳解决get请求缓存问题 8
3）模拟post请求 8
4）返回值类型 9
三、Ajax跨域请求——jsonp技术 11
1、Ajax跨域请求原理图 11
2、Ajax跨域请求不被允许的原因 11
3、jsonp协议 12
4、通过jsonp返回大批量数据 13
四、jQuery中的跨域请求 15
1、通过jQuery的ajax底层实现$.ajax()解决跨域问题 15
2、通过$.get()方法解决跨域请求 16
3、$.getJSON()方法解决跨域请求 17
五、天气预报 18
1、原理图 18
2、代码实现 18
六、那些年涛哥追过的jQuery插件 19
1、Lightbox 19
2、jquery.rotate.min.js插件 19
3、ValidateForm 20
4、多文件上传 20
5、jquery.lazyload.js 21
6、jQuery 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数据的解析
运行效果：
