一、Ajax 概述
Ajax 是
Asynchronous javascript And XML
的简写- Ajax是一门技术,并不是一门语言
- 使用Xhtml+CSS来标准化呈现
- 使用XML和XSLT进行数据交换及相关操作
- 使用XMLHttpRequest对象与Web服务器进行异步数据通信
- 使用Javascript操作Document Object Model进行动态显示及交互
- 使用JavaScript绑定和处理所有数据
- 优点:
- 页面局部刷新:减少用户等待时间,提高用户体验
- 与服务器异步通信:不需要打断用户的操作,具有更迅速的相应能力
- 按需获取数据,节约带宽
- 缺点:
- 破坏了浏览器的后退机制(ajax局部刷新页面,浏览器后退按钮不可点);解决方案:HTML5 直接操作浏览历史
- 不利于搜索引擎优化;解决方案:
- 安全问题:Ajax技术就如同对企业数据建立了一个直接通道,这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑
- 核心:
- 组成:JavaScript、XMLHTTPRequest、DOM对象
- 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面
- 工作原理:
相当于在用户和服务器之间加了一个中间层(ajax引擎),异步请求数据(使用户操作 与 服务器响应异步化)
并不是所有的用户请求都提交给服务器,像—些数据验证(比如判断用户是否输入了数据)和数据处理(比如判断用户输入数据是否是数字)等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求
- 对比:
传统的JS获取数据:用户每触发一个 Http 请求,都需要空闲等待相应,服务器会返回一个完整的 HTML 页面,每一次数据交互,都是一个新的页面;即使是一次很小的交互,用户也需要等待服务器相应 及 完整的 HTML 页面;缺点:浪费带宽、应用的响应时间依赖于服务器的响应时间
Ajax 突出之处:Ajax 在 Http 协议的基础上,以异步的方式与服务器进行通信;可简单理解为:向服务器请求数据,不用刷新页面(页面局部更新),这样极大的提升了 整体执行效率 及 用户体验
二、Ajax 的核心对象
1. XMLHtttpRequest对象 是Ajax技术 的核心
Javascript通过XMLHttpRequest对象直接与服务器进行交互( 请求数据,获取数据 )
XMLHtttpRequest对象,简称XHR对象,是Ajax技术 的核心,即 Ajax技术的引擎
XMLHtttpRequest对象 作为浏览器的内置对象,来实现发送、接收 HTTP请求 与 响应信息
2. XHR对象 的属性
readyState:返回 请求的状态(数字格式)
- 值有 5种,如下:
状态 | 名称 | 描述 |
---|---|---|
0 | Uninitialized | 初始化状态:XMLHttpRequest 对象已创建 或 已被 abort() 方法重置 |
1 | Open | 请求还没有被发送:open() 方法已调用,但是 send() 方法未调用。 |
2 | Sent | 未接收到响应:Send() 方法已调用,HTTP 请求已发送到 Web 服务器 |
3 | Receiving | 所有响应头部都已经接收到 、响应体开始接收但未完成 |
4 | Loaded HTTP | 响应已经完全接收 |
responseText:返回 相应体(字符串格式)
- 此属性表示:到目前为止接收到的相应体(不含头部)
- 若没有接收到数据,则返回空字符串
- readyState 值小于3时,这个属性的值肯定是空字符串
- readyState 值为3时,这是属性的值 可能是整个相应体,也可能是部分相应体
responseXML:返回的相应体(xml格式)
- 此属性表示:到目前为止接收到的相应体(不含头部)
status:由服务器返回的 HTTP 状态码(数字格式)
当 readyState 小于 3 的时候读取这一属性会导致一个异常
- 常见状态码如下:
- 200:请求成功
- 404:没有发现文件、查询或URl
- 400~499:客户端问题
- 500 :服务端问题
statusText:由服务器返回的 HTTP 状态(详细描述)
3. XHR对象 的方法
open( ) 初始化HTTP请求,但不发送请求
- 语法:
open(method, url, async, username, password)
method
请求方式: GET、POST 、HEADurl
请求地址:同源策略async
是否异步请求:默认值为 true(可选参数);如果这个参数是 false,请求是同步的,后续对 send() 的调用将阻塞,直到响应完全接收username
、password
:为 url 所需的授权提供认证资格(可选,一般不写)
- 作用:
把
readyState
设置为 1- 保存供
send()
方法使用的请求参数,重置 XMLHttpRequest 对象,以便复用删除之前的请求头、接收到的响应头
将相应体、相应状态码设为默认值
send( ) 发送 HTTP 请求(会打开一个Web 服务器的网络连接)
- 语法:
send(body)
body
请求体:get请求时 body 为null
;post请求时 body 为 请求体(一个字符串 或 对象),参数 body 应该由 以下几部分组成:- 之前调用 open( ) 时指定的 HTTP 方法、URL 以及认证资格(如果有的话)
- 之前调用 setRequestHeader( ) 时指定的请求头部(如果有的话)
- 传递给这个方法的 body 参数
- 作用:
把 readyState 设置成2,并 打开一个 Web 服务器的网络连接
接受部分相应后,
send()
或 后台线程 把 readyState 设置为 3接受全部相应后,
send()
或 后台线程 把 readyState 设置为 4
- 特殊情况:
如果
readyState
不是1(也就是没调用open( )
方法),会抛出异常如果
open()
参数 async 为false
,send( )
方法会阻塞 并不会返回,直到 readyState 为 4 并且服务器的响应被完全接收才返回
setRequestHeader() 设置请求头
- 语法:
setRequestHeader(name, value)
name
头部的名称:这个参数不应该包括空白、冒号或换行value
头部的值:这个参数不应该包括换行
- 请求头中包含:
- Host
- Connection
- Keep-Alive
- Accept-charset
- Accept-Encoding
- If-Modified-Since
- If-None-Match
- If-Range
- Range
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>