js事件:Ajax基础

Ajax（Asynchronous Javascript And XML），即异步的javascript和XML，是一种在无需重新加载页面的情况下，能够更新部分网页的技术。 

Ajax的编写分为以下四个步骤： 
1.创建XMLHttpRequest对象 

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。 

创建XMLHttpRequest对象：

var ajax = new XMLHttpRequest();

1

IE5和IE6使用ActiveXObject对象：

var ajax = new ActiveXObject("Microsoft.XMLHTTP");

1

兼容写法：

var ajax;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}

1
2
3
4
5
6
7



2.发送请求 

将请求发送到服务器，使用 XMLHttpRequest 对象的 open() 和 send() 方法：

ajax.open(method,url,async);//连接服务器
ajax.send();//发送请求

1
2

open()方法接收3个参数，第一个参数method代表请求的类型，有GET和POST两种。第二个参数url是请求文件的路径。第三个参数代表异步（true）或同步（false）处理。

GET与POST： 

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。 

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）。

向服务器发送大量数据（POST 没有数据量限制）。

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠，因为通过GET方式发送的请求在浏览器的url上会显示请求的信息。

3.服务器响应 

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText 属性 

如果来自服务器的响应并非 XML，使用 responseText 属性。responseText 属性返回字符串形式的响应。

return ajax.responseText;

1

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，需要使用 responseXML 属性。

return ajax.responseXML;

1

4.readystate 
onreadystatechange 事件 

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息，它的值从0到4发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

status属性表示请求的状态：当 readyState 等于 4 且status为 200 时，表示响应已就绪。

ajax.onreadystatechange=function(){
if(readyState == 4&&status == 200){
alert('成功：'+ajax.responseText);
}else{
alert('失败:'+ajax.status);
}
}

1
2
3
4
5
6
7

将Ajax封装成一个函数：

function ajax(url,fnSucc,fnFail){
//创建对象
var ajax;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
ajax.open('GET',url,true);//链接服务器
ajax.send();//发送请求

//接收返回
ajax.onreadystatechange=function(){
if(readyState == 4&&status == 200){
fnSucc(ajax.responseText);
}else{
if(fnFail) fnFail();
}
}

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

ajax函数的使用：

ajax('xxx.txt?t='+new Date().getTime(),function(str){
//eval(str)方法将读取到的字符串转换为数组
alert('请求成功:'+str);
},function(){
alert('请求失败');
});

1
2
3
4
5
6

其中的url地址后面加上?t=new Date().getTime()用来阻止浏览器的缓存。