一、什么是Ajax
Ajax:(Asynchronous Javascript And XML)
即异步Javascript和XML,即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,也可以是text ,现在更多的是json)。
AJAX还有一个最大的特点就是,当服务器响应时,不用刷新整个浏览器页面,而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。
其核心就是学习XMLHttpRequest对象的相关操作,其向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据
二、同步交互和异步交互
- 同步交互:是面向比特的传输,它的单位是帧,它传输的时候要求接收方和发送方之间的时钟是一致的。客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
- 异步交互:是面向字符的传输,它的单位是字符;异步则是【告诉】浏览器去做,【告诉】是一瞬间的事情,然后继续执行下一步,等到结果返回之后,浏览器会通知js执行相应的回调。
三、Ajax的优缺点
优点:
异步交互:增强了交互体验。
性能:因为服务器无需响应整个页面,只需要响应部分内容,服务器的压力减轻了。
缺点:
没有浏览历史,不能回退。
ajax无端的增多了对服务器的访问次数,给服务器增多了很多压力。
因为AJAX是在浏览器中使用Javascript技术完成的,所以还需要处理浏览器兼容性问题。
四、Ajax的操作(重要)
核心是学习XMLHttpRequest对象的相关操作 ,XMLHttpRequest 对象方法
使用过程:
第一步 创建XMLHttpRequest对象
大多数浏览器,可以通过:var xmlHttp = new XMLHttpRequest();
少数浏览器存在版本兼容问题,我们可以写一个函数,来专门处理不同的情况而产生XMLHttpRequest对象
function createXMLHttpRequest(){
try {
//适合大多数
return new XMLHttpRequest();
} catch(e) {
try {
//IE 6.0
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e){
try {
//IE 5.5 及更早
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e){
alert("不支持您的浏览器!");
throw e;
}
}
}
}
第二步 打开与服务器的连接
使用
xmlHttp.open()
,来打开与服务器的连接,它需要三个参数:( )
请求方式
:可以是GET或者POST;请求的URL
:指定服务器端资源,例如/xxx/AServlet;请求是否为异步
:如果为true表示发送异步请求,否则为同步请求。
方法 | 例子 |
---|---|
GET | const xhr = new XMLHttpRequest() // 直接在地址后面加一个 ?,然后以 key=value 的形式传递 // 两个数据之间以 & 分割 xhr.open('get', './data.php?a=100&b=200') xhr.send() |
POST | const xhr = new XMLHttpRequest() |
第三步 发送请求
xmlHttp.send();
一个最基本的 ajax 请求就是上面三步 但是光有上面的三个步骤,我们确实能把请求发送到服务端
如果服务端正常的话,响应也能回到客户端 但是我们拿不到响应
如果想要拿到响应,我们需要有两个前提条件
1. 本次 HTTP 请求是成功的,也就是我们下面要说的 http 状态码为 200 ~ 299
2. ajax 对象也有自己的状态码,用来表示本次 ajax 请求中各个阶段怎么得到xmlHttp对象的状态呢?我们可以使用属性var state = xmlHttp.readyState,它的值可能是0 1 2 3 4 。
5个状态分别表示:
0:表示刚创建,还没有调用open()方法
1:表示请求开始,调用了open()方法,但是没有调用send()方法
2:调用完了send()方法
3:服务器已经开始响应,但是不表示响应结束了,其也有对应的状态
4:服务器响应结束了。(通常我们只关心这个状态)得到服务器的响应状态码,使用var status = xmlHttp.status;,例如是200 404 500
只有当 readyState === 4 且服务器的响应状态码为200的时候,我们才可以正常使用服务端给我们的数据
第四步 处理请求 得到响应
得到服务器响应的内容
可以使用var content = xmlHttp.responseText;得到的是服务器的响应的文本格式的内容
也可以使用var content = xmlHttp.responseXML,这样得到的是服务器的响应的xml响应的内容,它是一个document对象
这样我们可以形成如下的代码用来处理我们需要响应的内容:
// xmlHttp的5种状态都会调用本方法,但是我们通常只关心4状态
xmlHttp.onreadystatechange = function() {
// 双重判断,判断是否为4状态,并且判断是否为200
if (xmlHttp.readystate == 4 && xmlHttp.status == 200) {
// 获取服务器的响应内容
var text = xmlHttp.responseText;
...
...
}
}