AJAX

-----------------------------------------**************************GET/POST方式提交请求**********************************-----------------------------------------------------

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 );
                       }
                  }
              }
          }

l 对象 初始化

l 发送请求

l 服务器接收

l 服务器返回

l 客户端接收

l 修改客户端页面内容。

只不过这个过程是异步的。

l 在服务器端 AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。

l 从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据：

? XML

? JSON

l JSON （ JavaScript Object Notation ）一种简单的数据格式，比 xml 更轻巧。 JSON 是 JavaScript 原生格式 ，

这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。

l JS ON 的规则很简单： 对象是一个无序的“‘名称 / 值’对”集合。一个对象以“ {” （左括号）开 始，“ }” （右括号）结束。

每个“名称”后跟一个“ :” （冒号）；“‘称 / 值’对”使 用“ ,” （逗号）分隔 。

1 ）映射用冒号（“：”）表示。名称 : 值

2 ）并列的数据之间用逗号（“，”）分隔。 名称 1: 值 1 , 名称 2: 值 2

3 ） 映射的集合（对象）用大括号（“ {}” ）表示。 { 名称 1: 值 1, 名称 2: 值 2}

4 ） 并列数据的集合（数组）用方括号 (“[]”) 表示。

5） 元素值可具有的类型： string,number,object,array,true,false,null