码迷,mamicode.com
首页 > Web开发 > 详细

AJAX

时间:2015-02-19 17:32:09      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:ajax   异步   javascript   xml   xmlhttprequest   


lAjax的技术的产生
?Ajax被认为是(Asynchronous JavaScript and XML的缩写)。现在,允许浏览器与服务器通信而无须刷新当前页
面的技术都被叫做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 );
                       }
                  }
              }
          }


------------------------------------------*******************AJAX开发框架***********************------------------------------------------

AJAX实质上也是遵循Request/Server模式,所以这个框架基本的流程是:

l对象初始化
l发送请求
l服务器接收
l服务器返回
l客户端接收
l修改客户端页面内容。

只不过这个过程是异步的。
------------------------------------------*******************数据格式提要***********************------------------------------------------
l在服务器端 AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。
l从服务器端接收数据的时候,那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据:
?XML
?JSON
       ? HTML

------------------------------------------*******************JSON***********************------------------------------------------
lJSONJavaScript Object  Notation)一种简单的数据格式,比xml更轻巧。JSONJavaScript原生格式

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

lJSON的规则很简单:对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开 始,“}”(右括号)结束。
                    每个“名称”后跟一个“:”(冒号);“‘称/值’对”使用“,”(逗号)分隔

   规则如下:

      
1)映射用冒号(“:”)表示。名称:
    
  2)并列的数据之间用逗号(“,”)分隔。名称1:1,名称2:2
     
  3) 映射的集合(对象)用大括号(“{}”)表示。{名称1:1,名称2:2}
     
  4) 并列数据的集合(数组)用方括号(“[]”)表示。

         [

           {名称1:,名称2:2},

           {名称1:,名称2:2}

         ]

      5)  元素值可具有的类型:string, number, object, array, true, false, null
     JSON 用冒号(而不是等号)来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。
    对象描述中存储的数据可以是字符串,数字或者布尔值。对象描述也可存储函数,那就是对象的方法。

------------------------------------------*******************JSON示例***********************------------------------------------------
在javascript中:::::
技术分享
技术分享
<script language="JavaScript">
     var people={
       "username":"zhang" ,
       "sex":"male" ,
       "tel":{"phone" :"110", "cell":"13812345678" },
       "address":[
                   {"city": "tieling","postcode" :"110"},
                    {"city": "beijing","postcode" :"100"}
                  ]  
     }
    
     alert(people.username );
     alert(people.tel.cell);
     alert(people.address[1 ].city );

  </script >


------------------------------------------*******************JSON解析***********************------------------------------------------
技术分享
技术分享技术分享

技术分享

-----------------------------------------*******************解析 HTML***********************------------------------------------------
l HTML 由一些普通文本组成。如果服务器通过 XMLHttpRequest 发送 HTML, 文本将存储在 responseText 属性中。
l不必从 responseText 属性中读取数据。它已经是希望的格式,可以直接将它插入到页面中。
l插入 HTML 代码最简单的方法是更新这个元素的 innerHTML 属性。
l优点:
?从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。
?HTML 的可读性好。
?HTML 代码块与 innerHTML 属性搭配,效率高。
l缺点:
?若需要通过 AJAX 更新一篇文档的多个部分,HTML 不合适
innerHTML 并非 DOM 标准。

-----------------------------------------*******************对比小结***********************------------------------------------------

l若应用程序不需要与其他应用程序共享数据的时候, 使用 HTML 片段来返回数据时最简单的
l如果数据需要重用, JSON 文件是个不错的选择, 其在性能和文件大小方面有优势
l当远程应用程序未知时, XML 文档是首选, 因为 XML  web 服务领域的 世界语”

AJAX

标签:ajax   异步   javascript   xml   xmlhttprequest   

原文地址:http://blog.csdn.net/u011218159/article/details/43882975

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!