ajax-210810-02---ajax 异步实现步骤

ajax-210810-02—ajax 异步实现步骤

---

实现步骤

1. 创建异步对象  ---->  var xmlHttp = new XMLHttpRequest();


2. 给异步对象绑定事件  ---->  onreadstatechange事件
   通过判断 XMLHttpReqeust 对象的状态，获取服务端返回的数据。
   		语法：
            xmlHttp.onreadystatechange= function() {
            	if( xmlHttp.readyState == 4 && xmlHttp.status == 200){
            		// 可以处理服务器返回数据，更新页面数据了。
            		
            		// 接收服务器返回的数据，并更新页面。
            		var data = xmlHttp.responseText;
            		document.getElementById("name").value = data;
            	}
            }
         
         
3. 初始化异步请求对象
   异步方法open(method,url,async)
   xmlHttp.open(method,url,async) ： 初始化异步请求对象
   		参数说明：
            method：请求的类型；GET 或 POST
            url：服务器的 servlet 地址
            async：true（异步）或 false（同步），默认是true。
   例如：
   	  xmlHttp.open("get" , "loginServlet?name=bgy&pwd=123" , true);
         
         
4. 异步对象发送请求  ---->  xmlHttp.send();


5. 接收服务器返回的数据
   使用 XMLHttpRequest 对象的 responseText 或responseXML 属性。
        responseText：获得字符串形式的响应数据
        responseXML：获得 XML 形式的响应数据
        
   xmlHttp.responseText;

XMLHttpRequest 对象的三个重要的属性：
	1） readyState 属性：
        存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
            0: 请求未初始化，创建异步请求对象 var xmlHttp = new XMLHttpRequest()
            1: 初始化异步请求对象， xmlHttp.open(请求方式，请求地址，true)
            2: 异步对象发送请求， xmlHttp.send()
            3: 异步对象接收应答数据 从服务端返回数据。XMLHttpRequest 内部处理。获取了原始数据。
            4: 异步请求对象已经将数据解析完毕。 此时才可以读取数据。就可以更新页面数据了。
        
    2） status 属性：
    	网络请求状态。
            200: "OK"
            404: 未找到页面
            
    3） onreadystatechange 属性：
    		一个 js 函数名 或 直接定义函数，每当 readyState 属性改变时，就会调用该函数。

当请求的状态（readyState）发生变化时，异步对象会自动调用onreadstatechange事件都对应的函数，
也就是说，步骤2，会执行很多次。