ajax

   Ajax基础
1.1认识Ajax
        Ajax(Asynchronous  JavaScript  And  Xml),Ajax不是一种全新的技术，而是整合了几种现有的技术JavaScript、XML和CSS。是一种创建交互式网页应用的网页开发技术。

        异步：JavaScript脚本发送请求后并不是一直等着服务器响应，而是发送请求后继续做别的事，请求响应的处理是异步完成的。
        XML ：用于请求数据和响应数据的封装，CSS用于美化页面样式。
1.2Ajax的关键元素
        JavaScript语言 ：Ajax技术的主要开发语言。   
        DOM文档对象 ：通过DOM属性或方法修改局部元素，实现页面局部刷新。 
        CSS样式表：改变样式，美化页面效果，提成用户体验度。   
        XMLHttpRequest对象：以异步方式在客户端与服务器端之间传递数据。

1.3 创建XMLHttpRequest对象
        老版本（IE5和IE6）：

xmlHttpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);  

 

新版本和其他大部分浏览器：

xmlHttpRequest = new XMLHttpRequest(); 

 

 1.4. XMLHttpRequest对象的常用方法和属性
      方法：
    open() :用于创建一个新的HTTP请求，并指定此请求的方法、URL、是否异步提交及验证信息。
    send()：发送请求到服务器。
    abort()：取消当前请求。
    setRequestHeader()：单独指定请求的某个HTTP头。
    getResponseHeader() ：从响应中获取指定的HTTP头。
    getAllResponseHeader()：获取响应的所有HTTP头。
     属性;
    readyState：返回请求的当前状态。常用值：0表示未初始化  1表示初始化  2表示发送数据  3表示数据传送中  4表示数据接收完毕
    status：返回当前请求的HTTP状态码。常用值：200表示正确返回  404表示找不到访问对象
    responseText：以文本形式获取响应值。
    responseXML：以XML形式获取响应值，并且解析成DOM对象返回。
    statusText：返回当前请求的响应行状态。
    onreadystatechange：设置回调函数。

1.5使用Ajax发送请求及处理响应
       发送get请求及处理文本方式响应：
1）创建XMLHttpRequest对象，通过window.XMLHttpRequest的返回值判断创建XMLHttpRequest对象的方式。
2）设置回调函数，通过onreadystatechange属性设置回调函数，其中回调函数需要自定义。
3）初始化XMLHttpRequest组件。通过open()方法创建一个设置了发送方式和请求路径的HTTP请求。
4）发送请求。

 

<script type="text/javascript">  
    function checkUser(){  
        /* 1.创建XMLHttpRequest对象 
        注意：创建对象前先要判断浏览器的版本 */  
        if(window.XMLHttpRequest){//返回值为true时，说明是新版本IE或其他浏览器  
             xmlHttpRequest = new XMLHttpRequest();  
        }else{//返回值为false时，说明是老版本IE  
           xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");  
        }  
        /* 2.设置回调函数 
         callBack是自定义回调函数 
         注意：这里只写函数的名称不写小括号 */  
        xmlHttpRequest.onreadychange = callBack;  
        /* 3.初始化XMLHttpRequest组件 
         open方法的参数说明 
         参数1：发送数据的方式，get/post 
        参数2：发送的请求地址以及发送的数据 
         参数3：true/false.true时表示使用异步操作 */  
        var name=document.getElementById("username").valueOf();  
        //get请求方式  
         //xmlHttpRequest.open("GET", "doIndex.jsp?name="+name, true);  
    //post请求方式  
         xmlHttpRequest.open("POST", "doIndex.jsp", true);  
        xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
        /* 4.发送请求 */  
       //xmlHttpRequest.send(null);  
       //post  
       xmlHttpRequest.send("name="+name);  
    }  
  
    function callBack(){  
    if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){  
        var result = xmlHttpRequest.responseText;  
        var resp=document.getElementById("result");  
        if(result.replace(/\s+/,"")=="true"){  
            resp.innerHTML="<font color='green'>用户名可以使用</font>";  
        }else{  
            resp.innerHTML="<font color='red'>用户名已占用</font>";  
        }  
    }  
    }  
</script>