zoukankan      html  css  js  c++  java

  • AJAX初步学习

     AJAX（Asynchronous JavaScript and XML）即异步的JavaScript与XML技术，指的是一套综合了多项技术的浏览器端网页开发技术。其实就是为了解决传统页面同步刷新，消耗过多带宽，用户界面效果不友好等问题提出的。而综合多项技术指的是：

    运用XHTML+CSS来表达信息；

    运用JavaScript操作DOM（DocumentObject Model）来运行动态效果；

    运用XML和XSLT操作数据

    运用XMLHttpRequest为Agent与网页服务器进行异步数据交换；

    运用JavaScript技术来实现。

             这篇博客从AJAX的基础XMLHttpRequest对象，微软提供的AJAX技术框架，和开源AJAXControlToolKit开发工具来初步了解！

            一，XMLHttpRequest对象:

            而XMLHttpRequest是AJAX的基础，可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。XMLHttpRequest对象提供了对 HTTP协议的完全的访问，包括做出 POST和 HEAD请求以及普通的GET请求的能力。XMLHttpRequest可以同步或异步返回 Web服务器的响应，并且能以文本或者一个 DOM文档形式返回内容。

    XMLHttpRequest对象的出现分割了同步和异步。XMLHttpRequest出现之前是同步的，出现之后是异步的。
同步：页面请求实时传给服务器，导致必填数据没有填的时候，要回到页面上重新从头填写，耗时长、客户体验差。
异步：在页面必填项写上必填选项，不用通过传给服务器判断必填内容是否已经填写完整，耗时短、用户体验强。

            

              1,创建：所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6使用 ActiveXObject），这也是我们实现异步更新的根本，下边看一下创建XMLHttpRequest对象：

    [html] view plain copy
     
    1. var xmlhttp;  
    2. f (window.XMLHttpRequest)  
    3.  {// code for IE7+, Firefox, Chrome, Opera, Safari  
    4.  xmlhttp=new XMLHttpRequest();  
    5.  }  
    6. lse  
    7.  {// code for IE6, IE5  
    8.  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
    9.  }  


              2,请求服务器：创建了，客户端如何向服务器发送请求呢？利用XMLHttpRequest对象的open()和send()方法：


        例如：

    [html] view plain copy
     
    1. xmlhttp.open("GET","test1.txt",true);  
    2.        xmlhttp.send();  



         3,响应： 而请求了，客户端该如何响应服务器呢？利用XMLhttpRequest对象的ResponseText（获得字符串形式的响应数据）或ResponseXML（获得XML形式的响应数据）属性。例如：

    ResponseText:

     

    [html] view plain copy
     
    1. document.getElementById("myDiv").innerHTML=xmlhttp.responseText;  

     

    ResponseXML:(这个例子稍微大一些，上下都涉及到了)

     

    [html] view plain copy
     
    1. <html>  
    2. <head>  
    3. <script type="text/javascript">  
    4. function loadXMLDoc()  
    5. {  
    6. var xmlhttp;  
    7. var txt,x,i;  
    8.   
    9. <%--创建XMLHttpRequest对象--%>  
    10. if (window.XMLHttpRequest)  
    11.   {// code for IE7+, Firefox, Chrome, Opera, Safari  
    12.   xmlhttp=new XMLHttpRequest();  
    13.   }  
    14. else  
    15.   {// code for IE6, IE5  
    16.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
    17.   }  
    18.     
    19. xmlhttp.onreadystatechange=function()  
    20.   {  
    21.   if (xmlhttp.readyState==4 && xmlhttp.status==200)  
    22.     {  
    23.     xmlDoc=xmlhttp.responseXML;  
    24.     txt="";  
    25.     x=xmlDoc.getElementsByTagName("title");  
    26.     for (i=0;i<x.length;i++)  
    27.       {  
    28.       txt=txt + x[i].childNodes[0].nodeValue + "<br />";  
    29.       }  
    30.     document.getElementById("myDiv").innerHTML=txt;<%--//将获取的数据显示到指定的位置--%>  
    31.     }  
    32.   }  
    33. xmlhttp.open("GET","/example/xmle/books.xml",true);<%--//请求打开XML文件books.--%>  
    34.   
    35. xmlhttp.send();<%--//发送请求--%>  
    36. }  
    37.   
    38. </script>  
    39.   
    40. </head>  
    41.   
    42. <body>  
    43.   
    44. <h2>My Book Collection:</h2>  
    45. <div id="myDiv"></div>  
    46. <button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button>  
    47.    
    48. </body>  
    49. </html>  



             二，微软AJAX技术框架：上边是对XMLHttpRequest简单的了解，也是学习AJAX最基础的知识。在这里我还想提一下，微软为了方便用户使用，在asp.net平台中提供了AJAX扩展：


             利用这些控件我们能够很方便快捷的实现很多异步通信的，而对于这些控件具体属性，方法的会在后边学习中提到！

              三，  AJAX ControlToolKit扩展包：AJAX ControlToolKit是由开源社区向广大ASP.NET开发者奉献的一组Web控件，基本涵盖了Web页面开发最需要使用的功能，使用方便。AJAX ControlToolKit建构于微软AJAXExtension之上，充分展示了AJAX技术的强大威力。下载位置：http://www.asp.net/ajax ，安装过程：http://blog.csdn.net/seapen/article/details/8538282  对于具体使用，还需要后边的学习中实践。
  • 相关阅读:
    柱状图最大的矩形
    单词搜索
    最小覆盖子串
    颜色分类
    编辑距离
    X的平方根
    二进制求和
    最大子序和
    N皇后
    java8-14-时间API
  • 原文地址：https://www.cnblogs.com/www123----/p/8662237.html
Copyright © 2011-2022 走看看