AJAX

function ajaxFunction (){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest ();
    }
    catch ( e){
       try{// Internet Explorer
             xmlHttp=new ActiveXObject("Msxml2.XMLHTTP" );
          }
        catch ( e){
          try{
             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP" );
          }
          catch ( e){}
          }
    }
     return xmlHttp;
 }


window.onload=function (){
    document.getElementById ("ok"). onclick=function (){
       
          //1 创建XmlHttpRequest对象
          var xmlHttp=ajaxFunction ();
          /*
           *
           * 2 接收服务器返回的数据[注册监听]
           *   * 怎接收?
           *   * 什么时候接收呢?
           *      onreadystatechange：
                *              ?该事件处理函数由服务器触发，而不是用户
                *             ?在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest 对象的 readyState 来实现。
        *            改变 readyState 属性是服务器对客户端连接操作的一种方式。
                 *           ?每次 readyState 属性的改变都会触发 readystatechange事件
              * 在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。通信状态的改变要激发函数的执行
              *
  <img src="http://img.blog.csdn.net/20150219164750772?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />           

           */
          xmlHttp.onreadystatechange =function(){
              alert(xmlHttp.readyState );
              //alert(xmlHttp.status);
           * 处理响应处理函数都应该做什么。 首先，它要检查XMLHttpRequest对象的readyState值,
           * 判断请求目前的状态。
           * 参照前文的属性表可以知道，readyState值为4的时候，
           * 代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：
              if(xmlHttp.readyState ==4){
    <img src="http://img.blog.csdn.net/20150219164907883?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />                
                  if (xmlHttp .status ==200|| xmlHttp.status==304 ){
                                         //接收服务器端返回的数据
                                responseText
* XMLHttpRequest 的 responseText 属性包含了从服务器发送的数据。
* 它是一个HTML,XML或普通文本，这取决于服务器发送的内容。  
* 当 readyState 属性值变成 4 时, responseText 属性才可用，表明 Ajax 请求已经结束。
                       var data=xmlHttp.responseText ;
                       alert(data);
                  }
              }
          } 
         
          /*
          
          * 3 打开和服务器的连接

               <img src="http://img.blog.csdn.net/20150219164938088?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
          *  xmlHttp.open("get","../testServlet",true);
          *   * 参数1:请求方法  get post
          *   * 参数2:请求的路径
          *   * 参数3:表示请求是否要异步传输，默认值为true(异步)
          */
       1.GET方式请求： xmlHttp.open("get" ,"../testServlet?timeStamp="+new Date().getTime ()+"&c=18", true);
       2.POST方式请求：
          
        <img src="http://img.blog.csdn.net/20150219165021313?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20150219165045963?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />  
       
           
         
          /*
          * 4 发送数据到服务器端

<img src="http://img.blog.csdn.net/20150219165215832?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
               
          *   * 如果请求方法是get,此时send方法不能发送数据到服务器端
          *     即使发送了数据,服务器端也接收不到,该参数设置null
          *   * 此时传递参数可以使用url方式传递参数 
          */
          xmlHttp.send("a=9&b=8" );  //xmlHttp.send(null);
         
     }   
}
-----------------------------------------**********************response返回值类型************************************-----------------------------------------------------
1.responseText.
<img src="http://img.blog.csdn.net/20150219165255631?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />


2.responseXML.
<img src="http://img.blog.csdn.net/20150219165317375?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20150219165409276?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
-------------------关于从服务器响应过里的XML数据进行解析的实例代码：：：----------------------------------


// out.println("<china>");
//         out.println( "<province name='吉林省'>" );
//         out.println( "<city>长春</city>" );
//         out.println( "<city>吉林市</city>" );
//         out.println( "<city>四平</city>" );
//         out.println( "<city>松原</city>" );
//         out.println( "<city>通化</city>" );
//         out.println( "</province>");
// out.println( "</china>");

  xmlHttp. onreadystatechange=function (){
              if(xmlHttp.readyState ==4){
                  if(xmlHttp.status==200 ||xmlHttp .status ==304){
                       var xmlDoc=xmlHttp.responseXML ;
                       //alert(data);
                       var provinceXmlElements=xmlDoc.getElementsByTagName ("province");
                       for(var i=0 ;i <provinceXmlElements. length;i++){
                           var name=provinceXmlElements [i ].getAttribute ("name");
                          
                           var optionElement=document .createElement ("option");
                           optionElement.setAttribute ("value", name);
                           var optionTextElement=document .createTextNode (name );
                           optionElement.appendChild (optionTextElement );
                          
                           var provinceElement=document .getElementById ("province");
                           provinceElement.appendChild (optionElement );
                       }
                  }
              }
          }