AJAX 2

1.在JScript中创建一个XMLHTTP对象并从服务器请求一个XML文档

  //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  xmlhttp=new XMLHttpRequest();

　　// IE6, IE5 浏览器执行代码
　　xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

例：

function createXmlHttpRequest(){
　　var xmlHttpReq;
　　try{

　　　　 //Firefox, Opera ie7.0+, Safari,Chrome
　　　　xmlHttpReq = new XMLHttpRequest();
　　}catch (e){
　　try{

　　　　　//Internet Explorer
　　　　　xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
　　}catch (e){
　　try{
　　　　　xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
　　}catch (e){}
　　}
　　}
　　return xmlHttpReq;
}

readystate

open

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

setRequestHeader

　　setRequestHeader(header,value)

　　向请求添加 HTTP 头。

• header: 规定头的名称
• value: 规定头的值

send

　　将请求发送到服务器。

• string：仅用于 POST 请求

onreadystatechange

　　指定当readyState属性改变时的事件处理句柄

 status

返回当前请求的http状态码

 

responseText

 变量，此属性只读，将响应信息作为字符串返回

responseXML

 变量，此属性只读，将响应信息格式化为Xml Document对象并返回。

    <script type="text/javascript">
        window.onload=function(){
            document.getElementById("b1").onclick=function(){
                //Ajax 代码
                var xhr = createXmlHttpRequest();
                /**请求的状态码
                0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） 
                1 (初始化) 对象已建立，尚未调用send方法 
                2 (发送数据) send方法已调用，但是当前的状态及http头未知 
                3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误， 
                4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据 
                */
                alert(xhr.readyState);//返回当前请求的状态，只读.
                //创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
                xhr.open("POST","/Ajax/ServletDemo02?time="+new Date().getTime());
                //告知服务器，发送正文数据的类型
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//enctype
                //发送请求到http服务器并接收回应
                xhr.send("username=liuyang&&password=orcl");            
                //指定当readyState属性改变时的事件处理句柄。只写
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4){
                        alert(xhr.status);
                        if(xhr.status==200){
                            //服务器端返回信息
                            var data = xhr.responseText;
                            document.getElementById("d1").innerHTML = data;
                            alert(data);
                        }    
                    }
                }
                
            }
        }
        function createXmlHttpRequest(){
            var xmlHttpReq;
            try{    //Firefox, Opera 8.0+, Safari
                xmlHttpReq = new XMLHttpRequest();
            }catch (e){
                try{    //Internet Explorer
                    xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
                }catch (e){
                    try{
                        xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                    }catch (e){}  
                }
            }
            return xmlHttpReq;
        }
    
    </script>