Ajax的工作原理

XMLHttpRequest 对象的三个常用的属性

1. onreadystatechange 属性

                onreadystatechange 属性存有处理服务器响应的函数。
下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：

2.readyState 属性

                 readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
readyState 属性可能的值：

0 请求未初始化（在调用 open() 之前）
1 请求已提出（调用 send() 之前）
2 请求已发送（这里通常可以从响应得到内容头部）
3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4 请求已完成（可以访问服务器响应并使用它）   通常我们只关心这个状态 if(xmlHttp.readyState==4)   3.responseText 属性

             可以通过 responseText 属性来取回由服务器返回的数据。

xmlhttprequst的方法

1.   open() 方法

            open() 有三个参数。第一个参数定义发送请求所使用的方法,第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理

                 xmlHttp.open("GET","test.php",true);

    2.  send() 方法

             send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录

                 xmlHttp.send(null);

Ajax编程步骤   

（1）创建XMLHttp对象。

（2）设置请求方式。

（3）调用回调函数。

（4）发送请求。

代码：

/*  
    *提交Ajax请求并处理返回数据  
    */     
    function sendAjax(id) {  
        //第一步：创建XMLHttpRequest对象    
        var xmlHttp;          
        if (window.XMLHttpRequest) {//分浏览器创建XMLHttp对象  
            xmlHttp = new XMLHttpRequest();  
        } else if (window.ActiveXObject) {  
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  
        }         
  
       //第二步：设置和服务器端交互的相应参数 ，向路徑http://localhost:8080/JsLearning3/getAjax准备发送数据  
       var url=getRootPath()+"getAjax";  
        xmlHttp.open("POST",url,true);  
            
        //第三步：注册回调方法    
        xmlHttp.onreadystatechange = function(){  
            if (xmlHttp.readyState == 4) {  
                if (xmlHttp.status == 200) {  
                    var obj=document.getElementById(id);  
                    obj.innerHTML = xmlHttp.responseText;  
                } else {  
                    alert("AJAX服务器返回错误！");  
                }  
            }  
        }  
  
        //第四步：设置发送请求的内容和发送报送。然后发送请求  
        var params ="userName="+document.getElementsByName("userName")[0].value+"&userPass="+document.getElementsByName("userPass")[0].value+"&time="+ Math.random(); // 增加time随机参数，防止读取缓存                
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");  // 向请求添加 HTTP 头，POST如果有数据一定加加！！！！  
        xmlHttp.send(params);  
    }     

 

转载于:https://my.oschina.net/xia0828/blog/919680