原生ajax

AJAX 的解释是:Asynchronous JavaScript and XML(异步的JavaScript和XML技术,但其实AJAX的实现不一定和 XML 有关系,也即AJAX和数据格式无关),是一种创建交互式网页应用的网页开发技术,是多种技术的组合。目的就是让前台的数据交互变得更快捷,不用刷新页面就可以完成数据的更新。
AJAX 的优点很明显,利于用户体验,在不刷新页面的情况下利用DOM交互可以更新页面内容,不会打断用户的操作,由于其获取和发送的数据量小的特点(获取数据格式可以使XML或者JSON或者其他,不是整个页面),减小服务器压力也是它的一个优点。
而缺点,就是倍受人们关注的SEO问题(Google使用#!这种规定来支持AJAX的SEO,但是百度貌似还没有支持,所以做互联网的人,如果用百度的话,我劝你趁早转行,不要告诉我不稳定,不会那啥),前进后退问题(可以用其他方法解决HMTL5新增了相应的API),以及必须重视的安全问题等都是它现存的一些缺点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//兼容IE6
function creatXHR(){
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
   alert(‘此浏览器不支持 XHR !’);
}
}
var xhr = creatXHR();
xhr.open('get','test.txt',true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status ==200){
   alert(xhr.responseText);
  }
}

open的三个参数

  • 第一个参数是要发送的请求的类型(GET POST等),
  • 第二个参数即请求的 URL,GET请求可以将查询参数追加到URL的末尾,但是每个参数的名值对必须经过encodeURIComponent() 编码才可使用,不然容易发送错误(虽然一般情况下参数的名称都为拼音或者英文,但是还是应该养成每次编码的好习惯)。
  • 第三个参数即表示是否是异步发送请求,布尔值,true或者false。

数据发送完毕,等到服务器处理完毕并返回,浏览器收到响应的时候,相应的数据就会自动填充XHR对象的相应属性。XHR对象的相应属性主要包括以下几种

  • responseText : 作为响应主体被返回的文本。
  • responseXML : 如果响应的内容类型是text/xml 或者 application/xml 的时候,这个属性保存这响应数据的XML DOC 文档。
  • status : 响应的http状态。
  • statusText : http状态的说明

对于 XHR 状态的判断,可以检测 XHR 对象的 readyState 属性,该属性表示 XHR 对象请求/响应过程的当前活动阶段,可取值如下:

  • 0 : 未初始化,即尚未调用 open() 方法,
  • 1 : 启动,已经调用open() 方法,但尚未调用 send() 方法,
  • 2 : 发送,已经调用send() 方法,但尚未接收到响应,
  • 3 : 接收,已经接收到部分响应数据,
  • 4 : 完成,已经接收到全部响应数据,即可以在客户端使用数据了。

在接收到响应之前,还可以使用 abort() 来取消异步请求。例如当请求相应时间超长时,可以调用此方法,然后将其异步请求取消。如:

1
2
3
4
5
6
7
var iscancel = setTimeout(function(){xhr.abort();},5000);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status ==200){
alert(xhr.responseText);
   clearTimeout(iscancel);
  }
}

坚持原创技术分享,您的支持将鼓励我继续创作!