一、Ajax 概述

Ajax 是 Asynchronous Javascript And XML 的简写

Ajax是一门技术，并不是一门语言

优点：

缺点：

核心：

组成：JavaScript、XMLHTTPRequest、DOM对象

通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面

工作原理：

相当于在用户和服务器之间加了一个中间层(ajax引擎)，异步请求数据（使用户操作 与 服务器响应异步化）

并不是所有的用户请求都提交给服务器，像—些数据验证（比如判断用户是否输入了数据）和数据处理（比如判断用户输入数据是否是数字）等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求

对比：

传统的JS获取数据：用户每触发一个 Http 请求，都需要空闲等待相应，服务器会返回一个完整的 HTML 页面，每一次数据交互，都是一个新的页面；即使是一次很小的交互，用户也需要等待服务器相应 及 完整的 HTML 页面；缺点：浪费带宽、应用的响应时间依赖于服务器的响应时间

Ajax 突出之处：Ajax 在 Http 协议的基础上，以异步的方式与服务器进行通信；可简单理解为：向服务器请求数据，不用刷新页面（页面局部更新），这样极大的提升了 整体执行效率 及 用户体验

二、Ajax 的核心对象 1. XMLHtttpRequest对象 是Ajax技术 的核心 2. XHR对象 的属性 readyState：返回 请求的状态（数字格式）

值有 5种，如下：

状态 名称 描述

0 Uninitialized 初始化状态：XMLHttpRequest 对象已创建 或 已被 abort() 方法重置

1 Open 请求还没有被发送：open() 方法已调用，但是 send() 方法未调用。

2 Sent 未接收到响应：Send() 方法已调用，HTTP 请求已发送到 Web 服务器

3 Receiving 所有响应头部都已经接收到 、响应体开始接收但未完成

4 Loaded HTTP 响应已经完全接收

responseText：返回 相应体（字符串格式） responseXML：返回的相应体（xml格式）

此属性表示：到目前为止接收到的相应体（不含头部）

status：由服务器返回的 HTTP 状态码（数字格式）

当 readyState 小于 3 的时候读取这一属性会导致一个异常

常见状态码如下：

statusText：由服务器返回的 HTTP 状态（详细描述） 3. XHR对象 的方法 open( ) 初始化HTTP请求，但不发送请求

语法： open(method, url, async, username, password)

作用：

把 readyState 设置为 1

保存供send()方法使用的请求参数，重置 XMLHttpRequest 对象，以便复用

删除之前的请求头、接收到的响应头

将相应体、相应状态码设为默认值

send( ) 发送 HTTP 请求（会打开一个Web 服务器的网络连接）

语法： send(body)

body 请求体：get请求时 body 为 null；post请求时 body 为 请求体（一个字符串 或 对象），参数 body 应该由 以下几部分组成：

作用：

特殊情况：

如果 readyState 不是1（也就是没调用 open( ) 方法），会抛出异常

如果 open() 参数 async 为 false，send( ) 方法会阻塞 并不会返回，直到 readyState 为 4 并且服务器的响应被完全接收才返回

setRequestHeader() 设置请求头

语法： setRequestHeader(name, value)

name 头部的名称：这个参数不应该包括空白、冒号或换行

value 头部的值：这个参数不应该包括换行

请求头中包含：

getResponseHeader() 获取指定请求头

语法： getResponseHeader(name)

getAllResponseHeaders(); 获取所有请求头

语法： getAllResponseHeaders( )

4. XHR对象 的事件 onreadystatechange readyState 改变时 会触发 此事件 三、封装一个原生的 Ajax <script> ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: {name: "super", age: 20}, //请求参数 dataType: "json", success: function (response, xml) { // 此处放成功后执行的代码 }, fail: function (status) { // 此处放失败后执行的代码 } }); function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || "json"; var params = formatParams(options.data); //01 创建 对象 if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else { //IE6及其以下版本浏览器 var xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘); } //03 接收响应 // 监听状态改变 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { var status = xhr.status; if (status >= 200 && status < 300) { options.success && options.success(xhr.responseText, xhr.responseXML); } else { options.fail && options.fail(status); } } } //02 发送请求 if (options.type == "GET") { xhr.open("GET", options.url + "?" + params, true); xhr.send(null); } else if (options.type == "POST") { // 将请求数据 放到 请求主体中，并没有发送 xhr.open("POST", options.url, true); //设置表单提交时的内容类型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 发送请求 xhr.send(params); } } </script>