Ajax及其应用

什么是Ajax？

1. AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用javascript语言与服务器进行异步交互，传输的数据为XML(当然，传输的数据不只是XML)。
   2.Ajax不是新的编程语言，而是一种使用现有标准的新方法。其实就是js自带的功能 我们学习的是jQuery封装之后版本

Ajax的优缺点
1.Ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
(这一特点给用户的感受是在不知不觉中完成请求和响应过程) 
2.Ajax不需要任何浏览器插件，但需要用户允许javaScript在浏览器上执行。
同步交互: 客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求。
异步交互: 客户端发出一个请求后，无需要等待服务器响应结束，就可以发出第二个请求。
Ajax用于"局部刷新页面"和"异步提交"的特点 
异步提交: 提交完认为不需要原地等待，立马就做其他事
局部刷新: 不在局限于整个页面的刷新，而是在于局部的某一个页面的小块刷新
因此和使用Form表单和后端进行数据交互的方式比较，具有以下优点:
1.Ajax使用JavaScript技术向服务器发送异步请求
2.Ajax请求无须刷新整个页面
因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以Ajax性能高！

Ajax工作原理
1.Ajax相当于在用户和服务器之间加了一个中间层(Ajax引擎),使用户操作与服务器响应异步化。
2.并不是所有用户请求都是提交给服务器，像一些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取数据时再由Ajax引擎代为向服务器提交请求。
3.客户端发送请求，请求交给Ajax，Ajax把请求提交给服务器，服务器进行业务处理，服务器响应数据交给Ajax对象，Ajax对象接收数据，由JavaScript把数据写到页面上。
要完整实现一个Ajax异步调用和局部刷新，同窗需要以下几个步骤:
 
1.创建XMLHttpRequest对象，既创建一个异步调用对象
2.创建一个新的HTTP请求，并指定该HTTP请求的方法，URL及验证信息

3.设置响应HTTP请求状态变化的函数
4.发送HTTP请求
5.获取异步调用返回数据
6.使用JavaSciript和DOM实现局部刷新
注意:
Ajax传输数据为XML(当然，传输数据不只是XML，现在更多使用json数据，基本上web页面都是Ajax)

XMLHttpRequest 对象属性

1.readyState

　　数值，只读属性，表示请求的状态码，具体值如下表

值	状态	描述
0	UNSENT	表示对象被创建，但尚未调用 open() 方法
1	OPENED	表示 open() 方法已经被调用
2	HEADERS_RECEIVED	表示send()方法已被调用，并且头部和状态已经可以获得
3	LOADING	表示数据接收中，responseText 属性已经包含部分数据
4	DONE	表示数据接收已经完成

1. Onreadystatechange

　可写属性，期望得到一个函数，用作 readystatechange 事件的处理方法。当 readyState 属性的值发生变化时，该函数会被调用。

　　注 1：该方法不应用于同步的 XMLHttpRequest 请求。

　　注 2：当 XMLHttpRequest 的请求被 abort() 方法取消时，readystate 会被设置为 0，此时对应的 readystatechange 事件不会被触发。

3.responseType

字符串，只读属性，用于设置请求的响应体类型，期望值如下表

值	描述
空字符串	相当于默认的 text
text	期望请求的响应体返回一个字符串
josn	期望请求的响应体返回一个将接收到的数据内容解析为 JSON 而创建的 JavaScript 对象
arraybuffer	期望请求的响应体返回一个包含二进制数据的 JavaScript ArrayBuffer
blob	期望请求的响应体返回一个包含二进制数据的 Blob 对象
document	期望请求的响应体返回一个 HTML Document  或 XML XMLDocument，具体类型根据接收到数据的 MIME 类型而定

　注 1： responseType 需在 open() 方法调用之后且 send() 方法调用之前设置。

　　注 2：同步的 XMLHttpRequest 请求不可修改 responseType 的值。

　　注 3：服务端实际发送的响应体类型与 responseType 设置的类型不符时，请求体将为 null 。

4.response

　　只读属性，表示请求的响应体，其值的类型由 responseType 属性决定。

　　注： responseType 的值为空字符串或 'text' 情况下，当 readyState 属性的值为 3 时即可通过 response 属性读取该请求目前为止已经取得的数据。其他情况下，未完成或未成功的请求，response 都为 null。

5.responseText

　　字符串，只读属性，表示请求发送后服务端返回的文本。

　　注 1： send() 方法未调用时，responseText 为空字符串；请求失败时，responseText 为 null 。

　　注 2： 同 response 属性一样，当 readyState 属性的值为 3 时 responseText 返回目前为止服务端响应的文本内容，当readyState 为 4 且 status 属性为 200 时，responseText 返回后端响应的全部数据。

6.status

　　数值，只读属性，返回服务端响应的数字状态码。

　　注 1： 请求完成前或 XMLHttpRequest 出错时，status 的值为 0 。

　　注 2： 如果服务响应中没有明确指定 status 码，则默认为 200。

7.statusText

　　字符串，只读属性，返回服务端响应状态码对应的文本信息。

　　注 1： 如果 readyState 的值为 0 或者 1，则这个 statusText 返回空字符串。

　　注 2： 如果服务响应中没有明确指定，则默认为 OK。

8.timeout

　　可写属性，期望得到一个正整数，表示请求的最大毫秒数，超时后请求将自动终止，并触发超时事件。

　　注 1： 默认值为 0，表示无超时时间。

　　注 2： 在IE中，超时属性可能只能在调用 open() 方法之后且在调用 send() 方法之前设置。

9.ontimeout

　　可写属性，期望得到函数，用作请求超时事件的处理函数。

　　注： 只有设置了 timeout 属性才可能发生超时事件 。

10.withCredentials

可写属性，布尔值，用来指定跨域 Access-Control 请求是否应当带有授权信息，如 cookie 或授权 header 头。

XMLHttpRequest 对象方法

1.open()

说明：用于初始化一个 http 请求。已经调用过该方法的 xhr 对象再次调用该方法时，相当于调用 abort() 方法。

参数：(method, url[, async[, name[, password]]])

method

字符串，表示要使用的 HTTP 方法，如 GET、POST 等。对于非 HTTP(S) URL，该参数会被忽略。

url

字符串，表示要向其发送请求的 URL。

async

布尔值，可选，表示是否异步发送请求，默认值为 true。值为 false 时，send() 方法将阻塞，直至请求结束。

user

可选，表示用户名，用于认证，默认为null。

password

可选，表示密码，用于认证，默认为null。

2.setRequestHeader()

说明：设置 HTTP 请求头的值。必须在 open() 之后、send() 之前调用 setRequestHeader() 方法。

参数：(header, value)

header

请求头属性的名称。

value

请求头属性的值。

3.send()

说明：用于发送 HTTP 请求。请求方式为 GET 或 HEAD 时，参数应为 null.

参数：(body)

body

可选，默认为 null，类型可以是 Document、Blob、ArrayBufferView、FormData, URLSearchParams, 或者字符串。

getResponseHeader()

说明：获取包含指定响应头文本的字符串。

参数：(name)

name

表示响应头属性的字符串，不区分大小写。

返回值：响应头属性的值，采用 UTF 编码。

注 1：如果请求尚未返回响应头，或不存在该响应头属性，或者被 W3C 限制时，返回 null。

注 2： readyState 属性的值为 2 ，即状态为 HEADERS_RECEIVED 时，表示响应头已经返回。

4.getAllResponseHeaders()

说明：获取所有的响应头，以 \r\n 分割字符串。

参数：无

返回值：字符串，所有的响应头，无响应时返回 null。

注：其实并不是可以获取到所有的响应头，有些响应头需要在服务端允许才可以获取。比如下载文件时的 Content-Disposition，需要后端设置响应头 Access-Control-Expose-Headers : 'Content-Disposition' 才可以。Access-Control-Expose-Headers 可以设置允许客户端访问的响应头，其值是以逗号分隔的响应头名称。

5.abort()

说明：立即终止已经发送的请求。当一个请求被终止，它的 readyState 将被置为 0（此时并不会触发 onreadystatechange 事件），并且请求的 status 也置为 0。

注：调用 abort() 方法后，xhr 对象上会依次触发以下事件：readystatechange （此时 readyState 为 4）、abort （此时 readyState 为 0）和 loadend。

6.overrideMimeType()

说明：覆写由服务端返回的 MIME 类型，该方法较少使用到。

参数：(mimeType)

mimeType

字符串，指定具体的 MIME 类型去代替服务器指定的MIME类型，如果服务器没有指定类型，那么 XMLHttpRequest 将会默认为 "text/xml"。

场景举例：强制使流方式处理响应类型为 "text/xml" 类型的数据。