笔记十二、jQuery AJAX

AJAX,一种使用现有标准的新方法,最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 可以帮助我们完成以下操作：

• 与服务器异步交互数据（XMLHttpRequest）
• 显示/取回信息（JavaScript/DOM）
• 设置数据的样式（CSS）
• 常用作数据传输的格式（JSON和XML）

一、XMLHttpRequest对象

1、创建XMLHttpRequest对象:var xhr = new XMLHttpRequest();

     注意：在创建 XMLHttpRequest 对象时最好检查浏览器是否支持。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject 。

2、发送请求：使用XMLHttpRequest对象的 open（ ） 以及 send（ ） 方法

• open(method,url,async) :  规定请求的类型，URL以及是否异步处理请求
• send(string) : 将请求发送到服务器，仅用于post请求

3、获取服务器响应

• responseText :获得字符串形式的响应数据
• responseXML :获得XML形式的响应数据

4、执行 onreadystatechange 事件

二、jQuery 与 AJAX

1.get()

通过 HTTP GET 请求从服务器上请求数据:$.get(URL, data, function(data, status, xhr), dataType)

2.post()

通过 HTTP POST 请求从服务器上请求数据:$.post(URL, data, function(data, status, xhr), dataType)

3.load()

可以从服务器加载数据，可以把 返回的数据直接放入被选取的元素中 :$(selector).load(url, data, function(response, status, xhr))

4.ajax()

该方法 通过键值对集合的形式来配置 Ajax 请求，常见的参数如下：

• type：String类型，设置请求方式 “POST” 或 “GET”，默认值： “GET”。

• url  ： String类型，发送请求的地址。

• async：Boolen类型，用来设置是否进行异步请求，默认为true， 即执行异步请求。

• contentType: String类型，默认值： “application/x-www-form-urlencoded”，用于设置发送的内容的编码类型。

• data : 任意类型，发送到服务器的数据，它将被自动转为字符串类型。如果是GET请求，它将被附加到URL后面。

• dataType : String类型，该属性可以设置返回的数据类型，jQuery自动根据 HTTP 包 MIME 信息来智能猜测。该属性值可以为：

  1. xml：返回XML文档，可使用jQuery进行处理。

  2. html： 返回HTML字符串，包含的 script 标签会在插入 dom 时执行。

  3. script： 返回JavaScript代码。

  4. json： 返回 JSON数据。JSON数据将使用严格的语法进行解析(属性名必须加双引号，所有字符串也必须用双引号)，如果解析失败将抛出一个错误。

  5. jsonp： JSONP格式。

  6. text： 返回纯文本字符串。

• timeout: Number类型，设置请求超时时间（毫秒），此设置将覆盖全局设置。

• cache : Boolean类型，默认为true，不过当dataType为或时，默认为false。指示是否缓存URL请求。

• success: Function类型，指定请求成功后执行的回调函数。有3个参数：请求返回的数据、响应状态字符串、jqXHR对象。

• error: Function类型，指定请求失败时执行的回调函数。该函数有3个参数：jqXHR对象、 请求状态字符串、 错误信息字符串。它是一个Ajax事件，跨域脚本和跨域JSONP请求不会调用该函数。