自从Ajax出现以来,就成了一个前端工程师必不可少的知识点。但是,由于IE的“异样”性,使得我们不得不对其进行兼容性检查。
其实,为了图方便,我们可以采用jQuery里面的$.ajax()
方法来使用Ajax,但是,总有那么一些时候,我们需要用原生Javascript来实现Ajax请求。毕竟,原生的速度是最快的。
原生JS实现Ajax请求
使用JS来实现Ajax请求,需要用到JS里面的XMLHttpRequest
对象。
具体实现如下:
/* 原生JS实现在非IE浏览器中的Ajax请求 */
var xhr = new XMLHttpRequest(),
url = '',
response = '',
data = '';
xhr.onreadystatechange = function () {
if ( xhr.readyState === 4 && xhr.status === 200 ) {
response = xhr.responseText;
}
}
/* open()函数必须放在send()函数之前 */
xhr.open( 'POST', url, true );
xhr.send( data );
OK,这是最基本的一个JS的XMLHttpRequest实现。主流的浏览器比如Chrome,Safari,Firefox等都能使用这段代码发送Ajax请求。但是,唯独IE是个独苗。
在IE中,如果需要新建一个Ajax对象的话,就不是用XMLHttpRequest
了,而是要使用ActiveXObject
。
所以,在IE中,上面的代码就要改写为如下:
/* 原生JS实现在IE浏览器中的Ajax请求 */
var xhr = new ActiveXObject('Microsoft.XMLHttp'),
url = '',
response = '',
data = '';
xhr.onreadystatechange = function () {
if ( xhr.readyState === 4 && xhr.status === 200 ) {
response = xhr.responseText;
}
}
所以说,IE是这么另类的一个东西。
跨浏览器实现Ajax请求
虽说IE另类吧,但是,也不能不考虑他的用户们。所以,我们需要一个跨浏览器的解决方案来实现Ajax请求。
我们可以用一个函数来封装:
/**
* 跨浏览器实现Ajax请求
* @function createXMLHttpRequest
*/
var createXMLHttpRequest = function () {
if ( window.XMLHttpRequest ) {
return new XMLHttpRequest();
}
else if ( window.ActiveXObject ) {
return new ActiveXObject('Microsoft.XMLHttp');
}
else {
return;
}
}
这样,我们创造了一个名为createXMLHttpRequest()
的能够实现跨浏览器进行Ajax请求的函数。
我们可以这样使用它:
var xhr = new createXMLHttpRequest(),
data = '',
url = '',
response = '';
xhr.onreadystatechange = function () {
if ( xhr.readyState === 4 && xhr.status === 200 ) {
response = xhr.responseText;
}
}
xhr.open( 'POST', url, true );
xhr.send( data );
这样,这段代码就能够在各个浏览器上使用了。
使用jQuery实现Ajax请求
如果还是觉得原生JS麻烦,而且,对性能的追求不是那么极致,那么,我们可以使用更简单快捷的jQuery中的$.ajax()
方法来进行Ajax请求。
jQuery中的Ajax方式使用如下:
/* 引入jQuery */
$.ajax({
method: 'POST/GET',
url: '',
data: '',
cache: ''
//其他的参数设置
});
jQuery为我们考虑的特别周全,我们只需要调用$.ajax()
方法就可以了。里面的参数都可以设置。
关于jQuery的$.ajax()
的更多详细设置和使用,可以参考jQuery官方API。