Ajax

Ajax学习（一）

Ajax全称Asynchronous JavaScript and XML，它并不是一种新的技术，而是在原有技术（ HTML 、 JavaScript 、 CSS 和 DOM ）基础上提出的新概念。它使用

1.CSS和HTML来构建页面结构；
2.JavaScript和DOM模型结合来进行动态显示和页面级交互；
3.XMLHttpRequest来进行异步请求。

Ajax 实现原理简单描述如下：

1. 向服务器发异步请求；

2.发起请求后，页面可以进行其他操作，不需等待服务端的响应；

3.服务端接受请求后，执行相应的请求，返回，若有返回结果（可以是XML格式数据、或是字符串、或是一段HTML），将这个返回结果写入对应属性中；

4.用JavaScript得到这个结果，可以通过 DOM 来更新页面或是其他操作 。

实现方式如下：

1.获取 XMLHttpRequest对象；

通常获取方式如下：

function CreateXmlHttp(){
//非IE浏览器创建XmlHttpRequest对象
     if(window.XmlHttpRequest){
         xmlhttp=new XmlHttpRequest();
     }
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject){
     try{
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");    
     }catch(e) {
         try{
             xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
         }catch(ex){}
     }
}
}  

XMLHttpRequest有如下属性：

onreadystatechange 状态改变时的事件处理函数；

responseText 从服务器进程返回数据的字符串形式；

responseXML 从服务器进程返回的 DOM 兼容的文档数据对象；

status 从服务器返回的数字代码，比如常见的 404 （未找到）和 200 （已就绪）；

statusText 伴随状态码的字符串信息；

readyState 对象状态值，其值有如下几种：

0 ( 未初始化 ) 对象已建立，但是尚未初始化（尚未调用 open 方法）

1 ( 初始化 ) 对象已建立，尚未调用 send 方法

2 ( 发送数据 ) send 方法已调用，但是当前的状态及 http 头未知

3 ( 数据传送中 ) 已接收部分数据，因为响应及 http 头不全，这时通过 responseBody 和 responseText 获取部分数据会出现错误；

4 ( 完成 ) 数据接收完毕 ， 此时可以通过 responseXml 和 responseText 获取返回的数据。

XMLHttpRequest两个重要方法：

open（请求方式post还是Get,请求url, 是否异步 ）；设置请求方式，请求url和是否异步，默认为true，异步方式；

send（params）；

若使用get请求，请求参数直接放在url之后，send中的参数设为null；若要在send中传参数，则需要使用post请求，并且 需要在open之后设置头信息。如：

var url = "login.jsp?user=XXX&pwd=XXX";    
xmlHttp.open("GET",url,true);   
xmlHttp.send(null);

xmlHttp.open("POST","login.jsp",true);  
xmlHttp.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");   
xmlHttp.send("user="+username+"&pwd="+password);  

2.设置事件处理函数，即回调函数；

xmlhttp.onreadystatechage = function() {  
    if(xmlhttp.readyState==4) {
             if(xmlhttp.status==200) {
                   document.write(xmlhttp.responseText);
             }     
     }
}

  当服务器处理完了请求， onreadystatechange 属性所指向的函数 将被触发。

3.发送异步请求；

xmlhttp.open("POST",url,true);
xmlhttp.send(null);

4.回调函数被触发，若readyState值 为 4，表示数据接收完毕，可以从responseText或responseXML中获取返回值；

5.可以通过js获取对应DOM节点更新页面，也可进行其他操作。