AJAX的概述
什么是AJAX
AJAX的英文全称是Asynchronous JavaScript And XML,即异步的JavaScript And XML。虽然其使用的是老的技术,但用的是新的思想。接下来,就应该了解一下同步和异步的区别。
我们先来看同步,一图以蔽之。
当用户点击链接或者提交按钮,页面才会跳转,这时整个页面都会刷新。
接着我们再来看异步:
当用户点击链接或者提交按钮,只会让页面的局部进行刷新。这样说来,那么AJAX的功能就是用来完成页面的局部刷新,而不中断用户的体验。
XMLHttpRequest
我们学习AJAX,实际上就是学习XmlHttpRequest这个对象。下面我们将学习一下该对象的属性和方法。
XMLHttpRequest对象的属性如下图所示:
对于以上属性,我还是稍微做一下解释:
- readyState:XMLHttpRequest对象的状态。共有以下几种状态,如下图所示。
- onreadystatechange:当XMLHttpRequest对象的状态改变时会触发的一个函数。
- status:获得响应的状态码,例如200、404等等。
- responseText:获得(异步加载后)响应的文本数据。
- responseXML:获得(异步加载后)响应的XML数据。
XMLHttpRequest对象的方法如下图所示:
对于以上方法,我也稍微做一下解释:
- open(请求方式, 请求路径, 是否异步):异步去向服务器发送请求。
- send(请求参数):发送请求到http服务器并接收回应。
- setRequestHeader(头信息, 头的值):单独指定请求的某个http头,可用来处理POST请求方式的中文乱码问题。
如何创建XMLHttpRequest对象呢?
对于IE浏览器来说,它将XMLHttpRequest对象封装在一个ActiveXObject组件中;而对于Firefox、Opera 8.0+、Safari等浏览器来说,直接就可以创建XMLHttpRequest对象。
这儿直接给出创建XMLHttpRequest对象的代码,如下所示:
function createXMLHttp(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{ // Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // 低级版本的IE
} catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); // 较高级版本的IE
} catch (e) {
}
}
}
return xmlHttp;
}
AJAX编写的步骤
- 获得XmlHttpRequest对象
- 设置XmlHttpRequest对象状态改变时来触发一个函数
- 设置向后台提交的请求路径和请求方式
- 发送请求
get方式提交和post方式提交
注意:以POST方式提交请求的时候,千万不要忘记设置一个请求头。