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()用来阻止浏览器的缓存。