zoukankan      html  css  js  c++  java

  • ajax相关体会

    参考原文：

    例子：http://blog.csdn.net/beijiguangyong/article/details/7725596

    原理讲解：http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html

    本科学习ajax，老师一直给讲解各种控件的使用方法，导致学完ajax，根本什么都不理解。后来有幸进入了校实验室，跟着实验室项目学习，也一直是让用$.ajax(),只知道这个东西就是ajax，可以异步刷新，甚至不知道什么叫做异步刷新，只是一直谨记老师的话，可以提升用户体验，怎么怎么好。如今开始学习php，才第一次正式的认识ajax，才第一次明白当初怎么也记不住名字的XMLHttpRequest究竟是个什么东西。不能说非常理解，至少使用起来不再是那么的迷茫。至今尚未弄懂微软及谷歌的底层是如何实现对ajax的支持的，xmlhttprequest类的具体的实现也不懂，但至少知道如何不使用$.ajax()来写创建自己的XMLHttpRequest对象了。

    1. <script type="text/javascript">  
    2.     //创建XMLHttpReques对象  
    3.     function createXMLHttpRequest(){  
    4.           
    5.         if(window.XMLHttpRequest){  
    6.             //Mozilla浏览器  
    7.               
    8.             XMLHttpReq=new XMLHttpRequest();  
    9.         }else{  
    10.               
    11.             //IE浏览器  
    12.             if(window.ActiveXObject){  
    13.                 try{  
    14.                     XMLHttpReq=new ActionXObject("Msxm12.XMLHTTP");  
    15.                 }catch(e){  
    16.                     try{  
    17.                         XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");  
    18.                     }catch(e){}  
    19.                 }  
    20.             }  
    21.         }  
    22.     }  
    23.     //处理服务器响应结果  
    24.      function handleResponse() {  
    25.         // 判断对象状态  
    26.         if (XMLHttpReq.readyState == 4) {   
    27.             // 信息已经成功返回，开始处理信息  
    28.            if (XMLHttpReq.status == 200) {   
    29.                 var out = "";  
    30.                 var res = XMLHttpReq.responseXML;  
    31.                 var response= res.getElementsByTagName("response")[0].firstChild.nodeValue;  
    32.                 //5. 解析服务器返回的信息,更新用户界面  
    33.                 document.getElementById("Hello").innerHTML = response;  
    34.                }  
    35.          }  
    36.        }  
    37.     //发送客户端的请求  
    38.     function sendRequest(url){  
    39.         //1.创建XMLHttpRequest  
    40.         createXMLHttpRequest();  
    41.         //2.设置回调函数  
    42.         XMLHttpReq.onreadystatechange=handleResponse;  
    43.         //3.初始化XMLHttpRequest组建并发送请求  
    44.         XMLHttpReq.open("GET",url,true);  
    45.         //发送请求  
    46.         XMLHttpReq.send(null);  
    47.     }  
    48.     //开始调用Ajax的功能  
    49.     function sayHello()  
    50.     {  
    51.         var name=document.getElementById("name").value;  
    52.         //发送请求  
    53.         sendRequest("SayHell?name="+name);  
    54.     }  
    55. </script>  
    56. </head>  
    57. <body>  
    58.     <font size="1">  
    59.         name:<input type="text" id="name"/>  
    60.         <input type="button" value="提交" onclick="sayHello()"/>  
    61.         <div id="Hello"></div>  
    62.     </font>  
    63. </body>  
    64. </html> 
    65. 至于后台接收了数据该如何处理，以及如何封装成json数据格式，如何传输更多格式等，请期待后期更新。
  • 相关阅读:
    换教室
    [国家集训队]礼物
    【模板】扩展卢卡斯(学习笔记)
    Desert King
    绿豆蛙的归宿
    Dropping tests
    [SDOI2013]随机数生成器
    佳佳的fib
    [USACO10OPEN]水滑梯Water Slides
    强大的XML
  • 原文地址：https://www.cnblogs.com/fengting/p/4199983.html
Copyright © 2011-2022 走看看