本节目标:
1.掌握Ajax原理与应用
2.掌握get和post请求的区别与操作
Ajax
Ajax技术核心是XMLHttpRequest对象(简称 XHR) ,提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息,这就意味着, 用户只要触发某一事件, 在不刷新网页的情况下,更新服务器最新的数据。
IE7+、 Firefox、 Opera、 Chrome和 Safari都支持原生的 XHR对象,在这些浏览器中创建XHR对象可以直接实例化 XMLHttpRequest即可。
var xhr = new XMLHttpRequest();
如果是 IE6及以下,那么我们必须还需要使用ActiveX对象通过 MSXML库来实现。在低版本 IE浏览器可能会遇到三种不同版本的XHR对象,即 MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、 MSXML2.XMLHttp.6.0。我们可以编写一个函数。
function createXHR() {
if (typeofXMLHttpRequest != 'undefined') {
}
returnnew XMLHttpRequest();
} else if (typeof ActiveXObject != 'undefined') {
var versions = [
'MSXML2.XMLHttp.6.0',
'MSXML2.XMLHttp.3.0',
'MSXML2.XMLHttp'
];
for (var i = 0; i <versions.length; i ++) {
try {
return newActiveXObject(version[i]);
} catch (e) {
//跳过
}
}
} else {
throw new Error('您的浏览器不支持 XHR对象! ');
}
}
var xhr = new createXHR();
在使用 XHR对象时,先必须调用open()方法,它接受三个参数:要发送的请求类型(get、post)、请求的 URL和表示是否异步。
xhr.open('get', 'demo.jsp, false); //对于 demo.jsp的 get请求, false同步
open()方法并不会真正发送请求,而只是启动一个请求以备发送。通过 send()方法进行发送请求, send()方法接受一个参数,作为请求主体发送的数据。如果不需要则,必须填 null。执行 send()方法之后,请求就会发送到服务器上。
xhr.send(null); //发送请求
当请求发送到服务器端, 收到响应后, 响应的数据会自动填充 XHR对象的属性。 那么一共有四个属性。
![](https://i-blog.csdnimg.cn/blog_migrate/857db3cc280ef21f067d7f28214c7b79.bmp)
接受响应之后, 第一步检查 status属性, 以确定响应已经成功返回。 一般而已 HTTP状态代码为 200作为成功的标志。
![](https://i-blog.csdnimg.cn/blog_migrate/09edd147f066eeb84f861700ebe18785.bmp)
异步调用的时候,需要触发readystatechange事件,然后检测readyState属性即可。这个属性有五个值。
![](https://i-blog.csdnimg.cn/blog_migrate/ae53cdf284ed68e345f88b49aeff8d3b.bmp)
addEvent(document, 'click', function () {
var xhr = new createXHR();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
} else {
alert('数据返回失败!状态代码: ' + xhr.status + '状态信息: '+ xhr.statusText);
}
}
};
xhr.open('get', 'demo.jsp' , true);
xhr.send(null);
});
GET与POST
在提供服务器请求的过程中,有两种方式,分别是:GET和 POST。在 Ajax使用过程中 ,GET的使用频率要比POST高。
GET请求
GET请求是最常见的请求类型,最常用于向服务器查询某些信息。必要时,可以将查询字符串参数追加到 URL的末尾,以便提交给服务器。
xhr.open('get', 'demo.php? name=devin', true);
传参产生的问题可以使用 encodeURIComponent()进行编码处理,中文字符的返回及传通过 URL后的问号给服务器传递键值对数据,服务器接收到返回响应数据。特殊字符,可以将页面保存和设置为 utf-8格式。
POST请求
POST请求可以包含非常多的数据,我们在使用表单提交的时候,很多就是使用的 POST传输方式。
xhr.open('post', 'demo.jsp', true);
发送 POST请求的数据,不会跟在 URL的尾巴上,而是通过send()方法向服务器提交数据。
xhr.send('name=devin&age=100');
一般来说, 向服务器发送 POST请求由于解析机制的原因, 需要进行特别的处理。 因为POST请求和 Web表单提交是不同的,需要使用XHR来模仿表单提交。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
从性能上来讲 POST请求比 GET请求消耗更多一些,用相同数据比较, GET最多比 POST快两倍。
JSON也可以使用 Ajax来回调访问。
var url = 'demo.json';
var box = JSON.parse(xhr.responseText);