首页 > 代码库 > ajax相关体会

ajax相关体会

2024-10-22 07:43:02   211人阅读

参考原文：

例子：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=http://www.mamicode.com/"提交" onclick="sayHello()"/>  
  61.         <div id="Hello"></div>  
  62.     </font>  
  63. </body>  
  64. </html> 
  65. 至于后台接收了数据该如何处理，以及如何封装成json数据格式，如何传输更多格式等，请期待后期更新。

 

ajax相关体会


联系
我们