记录AJAX充电点点滴滴
首先要明白什么是 ajax ?
ajax = 异步 javascript 和 xml。
ajax 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 ajax)如果需要更新内容,必需重载整个网页面。
有很多使用 ajax 的应用程序案例:新浪微博、google 地图、开心网等等。
1、ajax - 创建 xmlhttprequest 对象
xmlhttprequest 对象
所有现代浏览器都支持 xmlhttprequest 对象 (ie5 和ie6 使用acactivexobject)。
xmlhttprequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
所有现代浏览器(ie7+、firefox、chrome、safari 以及 opera)均内建 xmlhttprequest 对象。
创建 xmlhttprequest 对象的语法:
variable = new xmlhttprequest();
老版本的 internet explorer (ie5 和 ie6)使用 activex 对象:
variable=new activexobject( "microsoft.xmlhttp" );
为了应对所有的现代浏览器,包括 ie5 和 ie6,请检查浏览器是否支持 xmlhttprequest 对象。如果支持,则创建 xmlhttprequest 对象。如果不支持,则创建 activexobject :
1.1 xhr创建对象:
var xmlhttp; if ( window.xmlhttprequest ) {// code for ie7+, firefox, chrom, safari, opera xmlhttp = new xmlhttprequest(); } else {// code for ie5, ie6 xmlhttp = new activexobject( "microsoft.xmlhttp" ); }
1.2、ajax - 向服务器发送请求
xmlhttprequest 对象用于和服务器交换数据。
向服务器发送请求
如需将请求发送到服务器,我们使用 xmlhttprequest 对象的 open() 和 send() 方法:
xmlhttp.open("get","test1.txt",true); //规定请求的类型、url 以及是否异步处理请求。 xmlhttp.send(); //将请求发送到服务器。
方法 | 描述 |
---|---|
open(method,url,async) |
规定请求的类型、url 以及是否异步处理请求。
|
send(string) |
将请求发送到服务器。
|
get 还是 post?
与 post 相比,get 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 post 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(post 没有数据量限制)
- 发送包含未知字符的用户输入时,post 比 get 更稳定也更可靠
get 请求
一个简单的 get 请求:
xmlhttp.open("get","demo_get.asp",true); xmlhttp.send();
在上面的例子中,您可能得到的是缓存的结果。
------解决方案--------------------
ajax请求 如果两次请求地址一样 服务器只会处理第一次请求
第二次请求返回内容和第一次一样
加 math.random() 使每次请求地址不相同 服务器每次都去做不同的响应
------解决方案--------------------
math.random()是调用javascript语法中的数学函数,能够产生随机数。
在ajax请求中作为url参数传递,能够有效的避免“ajax缓存”
在ie 6系列的浏览器中,默认提交给一个地址例如:aa.aspx ,将自动缓存,第二次再请求aa.aspx时候,就不会再重复请求了。当然,也可以使用new date () 时间戳的形式作为参数传递。
为了避免这种情况,请向 url 添加一个唯一的 id:
xmlhttp.open("get","demo_get.asp?t=" + math.random(),true); xmlhttp.send();
如果您希望通过 get 方法发送信息,请向 url 添加信息:
xmlhttp.open("get","demo_get2.asp?fname=bill&lname=gates",true); xmlhttp.send();
post 请求
一个简单 post 请求:
xmlhttp.open("post","demo_post.asp",true); xmlhttp.send();
如果需要像 html 表单那样 post 数据,请使用 setrequestheader() 来添加 http 头。然后在 send() 方法中规定您希望发送的数据:
xmlhttp.open("post","ajax_test.asp",true); xmlhttp.setrequestheader("content-type","application/x-www-form-urlencoded"); //向请求中添加 tttp 头; xmlhttp.send("fname=bill&lname=gates");
方法 | 描述 |
---|---|
setrequestheader(header,value) |
向请求添加 http 头。
|
url - 服务器上的文件
open() 方法的 url 参数是服务器上文件的地址:
xmlhttp.open("get","ajax_test.asp",true);
该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。
异步 - true 或 false?
ajax 指的是异步 javascript 和 xml(asynchronous javascript and xml)。
xmlhttprequest 对象如果要用于 ajax 的话,其 open() 方法的 async 参数必须设置为 true:
xmlhttp.open("get","ajax_test.asp",true);
对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。ajax 出现之前,这可能会引起应用程序挂起或停止。
通过 ajax,javascript 无需等待服务器的响应,而是:
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
async = true
当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) // 请求完成并成功返回 { document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext; } } xmlhttp.open("get","test1.txt",true); xmlhttp.send();
async = false
如需使用 async=false,请将 open() 方法中的第三个参数改为 false:
xmlhttp.open("get","test1.txt",false);
我们不推荐使用 async=false,但是对于一些小型的请求,也是可以的。
请记住,javascript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。
注释:当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:
xmlhttp.open("get","test1.txt",false); xmlhttp.send(); document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext;
1.3 ajax - 服务器响应
如需获得来自服务器的响应,请使用 xmlhttprequest 对象的 responsetext 或 responsexml 属性。
属性 | 描述 |
---|---|
responsetext | 获得字符串形式的响应数据。 |
responsexml | 获得 xml 形式的响应数据。 |
responsetext 属性
如果来自服务器的响应并非 xml,请使用 responsetext 属性。
responsetext 属性返回字符串形式的响应,因此您可以这样使用:
document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext;
例:
<html> <head> <script type="text/javascript"> function loadxmldoc() { var xmlhttp; if (window.xmlhttprequest) {// code for ie7+, firefox, chrome, opera, safari xmlhttp=new xmlhttprequest(); } else {// code for ie6, ie5 xmlhttp=new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext; } } xmlhttp.open("get","/ajax/test1.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="mydiv"><h2>let ajax change this text</h2></div> <button type="button" onclick="loadxmldoc()">通过 ajax 改变内容</button> </body> </html>
responsexml 属性
如果来自服务器的响应是 xml,而且需要作为 xml 对象进行解析,请使用 responsexml 属性:
请求 文件,并解析响应:
xmldoc=xmlhttp.responsexml; txt=""; x=xmldoc.getelementsbytagname("artist"); for (i=0;i<x.length;i++) { txt=txt + x[i].childnodes[0].nodevalue + "<br />"; } document.getelementbyid("mydiv").innerhtml=txt;
例:
<html> <head> <script type="text/javascript"> function loadxmldoc() { var xmlhttp; var txt,x,i; if (window.xmlhttprequest) {// code for ie7+, firefox, chrome, opera, safari xmlhttp=new xmlhttprequest(); } else {// code for ie6, ie5 xmlhttp=new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { xmldoc=xmlhttp.responsexml; txt=""; x=xmldoc.getelementsbytagname("title"); for (i=0;i<x.length;i++) { txt=txt + x[i].childnodes[0].nodevalue + "<br />"; } document.getelementbyid("mydiv").innerhtml=txt; } } xmlhttp.open("get","/example/xmle/books.xml",true); xmlhttp.send(); } </script> </head> <body> <h2>my book collection:</h2> <div id="mydiv"></div> <button type="button" onclick="loadxmldoc()">获得我的图书收藏列表</button> </body> </html>
1.4 ajax - onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readystate 改变时,就会触发 onreadystatechange 事件。
readystate 属性存有 xmlhttprequest 的状态信息。
下面是 xmlhttprequest 对象的三个重要的属性:
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readystate 属性改变时,就会调用该函数。 |
readystate |
存有 xmlhttprequest 的状态。从 0 到 4 发生变化。
|
status |
200: "ok" 404: 未找到页面 |
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readystate 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext; } }
例:
<html> <head> <script type="text/javascript"> function loadxmldoc() { var xmlhttp; if (window.xmlhttprequest) {// code for ie7+, firefox, chrome, opera, safari xmlhttp=new xmlhttprequest(); } else {// code for ie6, ie5 xmlhttp=new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext; } } xmlhttp.open("get","/ajax/test1.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="mydiv"><h2>let ajax change this text</h2></div> <button type="button" onclick="loadxmldoc()">通过 ajax 改变内容</button> </body> </html>
注释:onreadystatechange 事件被触发 5 次(0 - 4),对应着 readystate 的每个变化。
使用 callback 函数
callback 函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 ajax 任务,那么您应该为创建 xmlhttprequest 对象编写一个标准的函数,并为每个 ajax 任务调用该函数。
该函数调用应该包含 url 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):
function myfunction() { loadxmldoc("ajax_info.txt",function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext; } }); }
例:
<html> <head> <script type="text/javascript"> var xmlhttp; function loadxmldoc(url,cfunc) { if (window.xmlhttprequest) {// code for ie7+, firefox, chrome, opera, safari xmlhttp=new xmlhttprequest(); } else {// code for ie6, ie5 xmlhttp=new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange=cfunc; xmlhttp.open("get",url,true); xmlhttp.send(); } function myfunction() { loadxmldoc("/ajax/test1.txt",function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext; } }); } </script> </head> <body> <div id="mydiv"><h2>let ajax change this text</h2></div> <button type="button" onclick="myfunction()">通过 ajax 改变内容</button> </body> </html>
// code for ie7+, firefox, chrome, opera, safari
上一篇: Redis—数据备份与恢复