JavaScirpt交互式网站开发学习（一）Ajax交互流程和库封装

Ajax交互流程

1.创建一个ajax对象（XMLHttpRequest对象）

var oAjax;
if(window.XMLHttpRequest){
    oAjax = new XMLHttpRequest();
}else{
    //IE6
    Ajax = new ActiveXObject('Microsoft.XMLHTTP');
}

2.创建连接（方式get\post)

oAjax.open(“请求方式”,“地址”,是否异步，默认是);

3.发送请求

oAiax.send();

4.接收

通信状态
0 初始化 XMLHttpRequest对象初始
1 载入完成，开始发送请求
2 发送请求完成
3 开始解析、读取服务器的响应
4 完成，对象读取服务器相应结束

http响应状态(http状态码 status)
1** 消息响应（少见）
2** 200 成功
3** 重定向
304 not mitified 缓存

4** 客户端错误
404 not found 未找到文件
5** 服务器端错误
500 internal error 服务器内部错误 很大概率 后台代码写错
** 503 服务器问题**

结论：200或者304

oAjax.onreadystatechange = function () {                    //判断通信状态             
if (oAjax.readyState == 4) {                        
     if (oAjax.status == 200 || oAjax.status == 304) {       //服务器返回文本 
         alert(oAjax.responseText);                   
      }                   
   }             
}

Ajax库封装

ajax.js

function ajax(url, fnSucc, fnErr) {
   //1. 创建一个ajax对象    
   var oAjax;    
   if (window.XMLHttpRequest) {        
       oAjax = new XMLHttpRequest();    
   } else {        
       //IE6        
       oAjax = new ActiveXObject('Microsoft.XMLHTTP');    
    }    
    //2. 创建连接    
    oAjax.open("GET", url + '?t=' + Math.random(), true);    
    //3. 发送请求    
    oAjax.send();   
    //4. 接收    
    oAjax.onreadystatechange = function () {        
        //判断通信状态        
        if (oAjax.readyState == 4) {            
            if (oAjax.status == 200 || oAjax.status == 304) {                
                //服务器返回文本                
                fnSucc(oAjax.responseText);            
            } else {                
                fnErr(oAjax.status);            
            }       
        }   
    }
}