Ajax基础教程读书笔记

原创 2007年09月17日 17:04:00

第一.XMLHttpRequest对象:
1.Sample:创建一个XMLHttpRequest对象的实例:

代码
  1. var xmlHttp;   //定义全局变量来保存对对象的引用   
  2. function createXMLHttpRequest(){   
  3.     if(window.ActiveXObject){  //判断浏览器是否为IE   
  4.        xmlHttp=new XMLHttpRequest("Microsoft.XMLHTTP");   
  5.     }   
  6.     else if(window.XMLHttpRequest){   //判断非IE的浏览器是否支持xmlhttprquest   
  7.        xmlHttp=new XMLHttpRequest();                                   
  8.     }   
  9. }   
  10. //IE浏览器肯定支持xmlhttprequest,因为其是存在于ActiveX中   

2.XmlHttpRequest对象的方法:
1>void open(String method,String url,boolean asynch,String username,String password):表示建立对服务器的调用.后三个参数为可选参数;mehod可以为GET,POST,PUT; url可以为绝对或相对地址; asynch默认值为True,表示异步,当为false时处理就会等待,直到从服务器响应为止;username跟password为用户指定特定的用户名跟密码.
2>void send(content):这个方法具体向服务器发出请求,如声明为异步则会立即返回此方法,否则它会等待直到接受相应为止.
3>void sendRequestHeader(String header,String value):此方法为HTTP请求中一个给定的首部设置值,header表示设置的首部,value表示要设置的值.
注意:此方法必须要在void open()方法之后才能调用.
4>void abort():停止请求.
5>String getAllResponseHeaders():返回一个串包含所有的http的首部(Content-Length,Date,URI)
6>String getResponseHeaders(String header):header表示指定首部值.
7>onreadystatechange():每个事件改变时都会触发事件处理器,通常会调用一个JS函数.
8>readyState:=0:未初始化;=1:正在加载;=2:已加载;=3:交互中;=4:完成
9>states:HTTP状态码.=200:OK.=404:未找到.

 

2.Sample:
交互实例具体步骤:
1><input type="text" id="email" name="email" onblur="validateEmail()">
2>创建XMLHttpRequest对象的一个实例:

代码
  1. var xmlHttp;   
  2. function validateEmail(){   
  3.   var email=document.getElementById("email");   
  4.   var url="validate?email="+escape(email.value);   
  5.   if(window.ActiveXObject){   
  6.      xmlHttp=new XMLHttpRequest("Microsoft.XMLHttpRequest");   
  7.   }else if(window.XMLHttpRequest){   
  8.      xmlHttp=new XMLHttpRequest();   
  9.   }         
  10.   xmlHttp.open("GET",url);   
  11.   xmlHttp.onreadystatechange()=callback;   
  12.   xmlHttp.send(null);   
  13. }   

3>调Servlet等服务器端.
4>服务器端完成业务逻辑.
5>请求返回浏览器.设置Content-Type为:text/xml.还要设置一下首部以使浏览器不会在本地缓存结果:response.setHeader("Cache-Control","no-cache");response.setHeader("progma","no-cache");
6>XMLHttpRequest对象配置为处理返回时要调用callback():这个函数会检查readystate属性,然后查看服务器返回的状态码,如果正常,callback()将会做些有意义的事情.例如:
代码
  1. function callback(){   
  2.   if(xmlHttp.readystate==4){   
  3.      if(xmlHttp.state==200){   
  4.         //do sth in here.    
  5.      }   
  6.   }    
  7. }   

 

3.GET与POST的区别:
GET:请求为幂等(多个请求返回相同的结果)时选用.会限制净荷的大小.(eg:URL的长度)
POST:当改变服务器上的状态时.不会限制净荷大小.
一般,可以用GET从服务器上取数据,但是要避免调用服务器上的状态.
如果选择的方法为POST,需要比GET多一步操作:设置XMLHttpRequest对象的首部:
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

4.DOM说明:
DOM是一个W3C规约,可以以一种独立于平台和语言的方式.DOM的设计是以对象管理组织(OMG)的规约为基础,因此可以用于任何语言.DOM实际上是以面向对象方式描述的面向对象模型.

第二,与服务器的通信:
1.XMLHttpRequest对象提供了两个处理服务器响应:1>responseText(将相应提供为一个串); 2>responseXML(将相应提供为一个XML对象)
2.利用HTML的innerHTML属性跟responseText结合使用,服务器就能"生产"出HTML内容,由浏览器利用innerHTML属性来"消费".
Sample:
innerHTML.html文件:

代码
  1. <html>  
  2. <head>  
  3. <script type="text/javascript">  
  4. //第一步:定义XMLHttpRequest对象;   
  5. var xmlHttp;   
  6. function createXMLHttpRequest(){   
  7.    if(window.ActiveXObject){   
  8.       xmlHttp=new XMLHttpRequest("Microsoft.xmlHTTP");   
  9.    }   
  10.    if(window.XMLHttpRequest){   
  11.       xmlHttp=new XMLHttpRequest();   
  12.    }   
  13. }   
  14.   
  15. function startRequest(){   
  16. //第二步:调用刚才创建的实例对象;   
  17.    createXMLHttpRequest();     
  18. //第三步:告诉XMLHttpRequest对象handleStateChange函数会处理XMLHttpRequest对象状态的改变,为此把对象的onreadyStatechange属性设置为指向JS函数的指针.   
  19.    xmlHttp.onreadystatechange=handleStateChange;   
  20. //第四步:指定请求的属性   
  21.    xmlHttp.open("GET","innerHTML.xml",true);   
  22. //第五步:将请求发送给服务器   
  23.    xmlHttp.send(null);   
  24. }   
  25.   
  26. function handleStateChange(){   
  27.    if(xmlHttp.readyState==4){   
  28.       if(xmlHttp.status==200){   
  29.          document.getElementById("results").<colorcolor=red>innerHTML</color>=xmlHttp.responseText;   
  30.       }   
  31.    }   
  32. }   
  33. </script>  
  34. </head>  
  35. <body>  
  36.     <form action="#">  
  37.         <input type="button" value="Search for Today's Activities" onclick="startRequest();"/>  
  38.     </form>  
  39.     <div id="results"></div>  
  40. </body>  
  41. </html>  

innerHTML.xml文件:
代码
  1. <table border=1>  
  2. <trbody>  
  3. <tr>  
  4. <th>Active Name</th><th>Location</th><th>Time</th>  
  5. </tr>  
  6. <tr>  
  7. <td>watersking</td><td>Dock #</td><td>9:00 AM</td>  
  8. </tr>  
  9. <tr>  
  10. <td>Volleyball</td><td>East Count</td><td>11:00 AM</td>  
  11. </tr>  
  12. <tr>  
  13. <td>hikings</td><td>Trails 3</td><td>2:00 PM</td>  
  14. </tr>  
  15. </trbody>  
  16. </table>  
 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

【读书笔记】【jQuery基础教程】【第六章--AJAX】

1.     使用.load()方法可以将一个html文档插入元素中,这个html文档不包含、、,只包含最基本的代码。如下: $(‘#SomeElement’).load(‘.a.html’); ...

AJAX基础教程读书笔记1:AJAX之XMLHttpRequest对象

AJAX不是什么新玩意: AJAX是一种客户端技术,是允许客户端和服务器通讯而无需刷新当前页面的技术,与其说是一个特定的技术,准确地说,不如算是一种技巧。它是异步的JavaScript和XML的组合...

《python基础教程-第2版》--读书笔记

前言:

objective-c 基础教程 读书笔记之第八章集合家族简介,NSArray,NSDictionary

一:数组NSArray      NSArray可以存储任何objective-c的对象。当然对于int,float这些对象无法保存,另外nil对象也不能保存。     + (id)arrayWi...
  • wxq888
  • wxq888
  • 2012-11-19 00:09
  • 2799

objective-c 基础教程 读书笔记之第八章字符串简介

objective-c 基础教程 这本书可以说是iphone ios开发入门的经典基础教程。半年前看过,现在学习iphone开发有一段时间了,如今重读这本书,感觉还是有很多收获,写笔记有两个目的,一是...
  • wxq888
  • wxq888
  • 2012-11-18 01:04
  • 1412

廖雪峰《python3 基础教程》读书笔记——第十章 错误、调试和测试

第十章 错误、调试和测试 Python内置了一套异常处理机制,来帮助我们进行错误处理。 Python的pdb可以让我们以单步方式执行代码。 最后,编写测试也很重要。   10.1 错误处理 在程序运行...

Iphone开发基础教程 (9章 导航控制器和表视图)--读书笔记

导航控制器 UINavigationController是用于构建分层应用程序的主要工具 UINavigationController是作为栈来实现的,这让它非常适合用于处理分层数据 导航控...

廖雪峰《python3 基础教程》读书笔记——第八章 面向对象编程

第八章 面向对象编程 前言: 面向对象:面向对象的程序设计把计算机程序视为一组对象的集合,而每个对象都可以接收其他对象发过来的消息,并处理这些消息,计算机程序的执行就是一系列消息在各个对象之间传递...

廖雪峰《python3 基础教程》读书笔记——第四章

第四章 函数 4.1 调用函数 1、python内置了很多有用的函数,可以直接调用 如:abs()、max() 2、数据类型转换 >>>int(‘123’) 123 >>>str(123) ‘123’...

廖雪峰《python3 基础教程》读书笔记——第十一章 IO编程

第十一章 IO编程 1、IO在计算机中指Input/Output,也就是输入和输出。由于程序和运行时数据是在内存中驻留,由CPU这个超快的计算核心来执行,涉及到数据交换的地方,通常是磁盘、网络等,就...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)