AJAX学习笔记

AJAX英文全称：Asynchronous JavaScript and  XML

AJAX是多种技术的综合，包括Js  XHTML  CSS DOM  XML  XSTL XMLHttpRequest

AJAX的定义：在无需重新加载整个网页的情况下，能够跟新部分网页的技术。

AJAX = 异步的Javascript 和xml

//XMLHttpRequest对象初始化
var http_request = false;
//for IE
http_request = new ActiveXObject("Msxml2.XMLHTTP");
http_request = new ActiveXObject("Microsoft.XMLHTTP");
//for Mozilla
http_request = new XMLHttpRequest();

XMLHttpRequest对象的方法

abort()   停止当前请求

getAllRequestHeaders();

getResponseHeader("headerLabel");

open("method","URL",)//设置准备发送的请求信息

setRequestHeader('label','value');    

XMLHttpRequest对象的属性：

onreqdyStatechange    //状态改变的事件触发器

readyState    //对象状态 0.未初始化，1读取中。2已读取  3，交互中  4,完成

responseText //服务器返回的文本

resonseXML  //服务器返回XML文档对象

responseText  //服务器返回的状态文本信息。、

AJAX开发框架，就是对AJAX技术中发送和接受XMLHttpRequest请求总体概览

    这个框架基本流程是：对象初始化->发送请求->服务器接受->服务器返回->客户端接受->修改客户端页面内容。

1 .对象初始化：

        以为各个浏览器对XMLHttpRequest对象的实例化过程不同，为了兼容性，要这样写：

<div style="widows: auto; font-family: 微软雅黑; font-size: 14px; line-height: 21px;"><pre name="code" class="javascript">if(window.XMLHttpRequest){ //判断浏览器是否支持XMLHttpRequest
    http_request = new XMLHttpRequest();
    http_request.overrideMimeType('text/xml');//为避免返回未包含XMl mime-type头部信息的内容
}else if(window.ActiveXObject){
    http_request = new ActiveXObject("Microsoft.XMLHTTP");

}

2.指定响应处理函数

        定义一个函数，或者直接把一个临时函数赋值给onreadystatechange属性：

http_request.onreadystatechange = processRequest;
function processRequest(){
   //函数处理
}
//另外一种方式
http_request.onreadystatechange = function(){   
    //函数处理
};

3.发出请求

调用XMLHttpRequest对象的open和send方法：

http_request.open('GET',"目的地址url",true);
//参数分别为：请求方式，url,是否异步
//注意此处如果要使用post方法提交文件，需要调用setRequestHeader方法，修改MIME类别
http_request.setRequestHeader("Content-Type","application/x_www-form-urlencoded");
http_request.send(null);

4.处理服务器返回信息

      响应处理函数要做的工作：

1. 检查XMLHttpRequest对象的readyState值，判断请求目前的状态
2. 根据请求状态做出响应处理：如果readyState ==4，
   • 判断HTTP状态码http_request.status ==200;进行处理
   • 否则说明出现错误
3. readyState！=4 信息还没有返回，继续等待

       信息处理一般会将responseText属性值作为字符串使用

综上，完成AJAX框架

<script type = "text/javascript">
var http_request = false;
function send_request(url){
    if(window.XMLHttpRequest){//for other 
            http_request  = new XMLHttpRequest();//创建XMLHttpRequest对象
            if(http_request.overrideMimeType){
                http_request.overrideMimeType("text/html");
            }
     }else if(window.ActiveXObject){//for IE
            try{
 http_request = new ActiveXObject("Msxml2.XMLHTTP");
                }catch(e){
                   try {
                       http_request = new ActiveXObject("Microsoft.XMLHTTP")
                        }catch(e){}    
                    }
           }
          if(!http_request){//创建对象失败
                return false;
            }
//处理服务器返回
    http_request.onreadystatechange =  processRequest;
    http_request.open("GET",url,true);
    http_request.send(null);
}
//AJAX处理函数：
function     processRequest(){
    if(http_request.readyState ==4){//对象请求完成
            if(http_request.status == 200){//信息成功返回
                  alert(http_request.responseText); 
            }else{
                    alert("页面异常！！");    
            }
    }
}
</script>