20150304+JQuery+AJax+插件-01

The Write Less,Do More——jQuery下

目录

The Write Less,Do More——jQuery下 1

1、each方法 2

2、jQuery中的ajax操做 3

1、ajax的底层实现 4

2、ajax的高级实现 7

1）模拟发送get请求 7

2）经过时间戳解决get请求缓存问题 8

3）模拟post请求 8

4）返回值类型 9

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

1、Ajax跨域请求原理图 11

2、Ajax跨域请求不被容许的缘由 11

3、jsonp协议 12

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

4、jQuery中的跨域请求 15

1、经过jQuery的ajax底层实现$.ajax()解决跨域问题 15

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

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

5、天气预报 18

1、原理图 18

2、代码实现 18

6、那些年涛哥追过的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])

一、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格式

运行结果：

二、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数据的解析

运行效果：