PHP基础（021）---Ajax

Ajax是异步JavaScript和XML技术。Ajax并不是一门新的语言或技术，它是JavaScript，XML, CSS,DOM等多种已有技术的组合，它可以实现客户端的异步请求操作。局部刷新页面。

Ajax开发需要注意的几个问题：

  1. 浏览器兼容性问题；
  2. XMLHttpRequest对象封装；
  3. 性能问题
  4. 中文编码问题

Ajax技术之中，最核心的技术就是XMLHttpRequest.XMLHttpRequest对象常用方法：

  1. open();
  2. send();
  3. setRequestHeader();
  4. abort();
  5. getAllResponseHeaders();

其常用属性有：

  • onreadystatechange
  • readyState
  • responseText
  • responseXML
  • status
  • statusText

 示例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script>
 5 function loadXMLDoc()
 6 {
 7 var xmlhttp;
 8 if (window.XMLHttpRequest)
 9   {// code for IE7+, Firefox, Chrome, Opera, Safari
10   xmlhttp=new XMLHttpRequest();
11   }
12 else
13   {// code for IE6, IE5
14   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
15   }
16 xmlhttp.onreadystatechange=function()
17   {
18   if (xmlhttp.readyState==4 && xmlhttp.status==200)
19     {
20     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
21     }
22 }
23 xmlhttp.open("GET","demo_get.asp",true);
24 xmlhttp.send();
25 }
26 </script>
27 </head>
28 <body>
29 
30 <h2>AJAX</h2>
31 <button type="button" onclick="loadXMLDoc()">Request data</button>
32 <div id="myDiv"></div>
33 
34 </body>
35 </html>
View Code
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script>
 5 function loadXMLDoc()
 6 {
 7 var xmlhttp;
 8 if (window.XMLHttpRequest)
 9   {// code for IE7+, Firefox, Chrome, Opera, Safari
10   xmlhttp=new XMLHttpRequest();
11   }
12 else
13   {// code for IE6, IE5
14   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
15   }
16 xmlhttp.onreadystatechange=function()
17   {
18   if (xmlhttp.readyState==4 && xmlhttp.status==200)
19     {
20     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
21     }
22   }
23 xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
24 xmlhttp.send();
25 }
26 </script>
27 </head>
28 <body>
29 
30 <h2>AJAX</h2>
31 <button type="button" onclick="loadXMLDoc()">Request data</button>
32 <p>Click the button several times to see if the time changes, or if the file is cached.</p>
33 <div id="myDiv"></div>
34 
35 </body>
36 </html>
View Code
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script>
 5 function loadXMLDoc()
 6 {
 7 var xmlhttp;
 8 if (window.XMLHttpRequest)
 9   {// code for IE7+, Firefox, Chrome, Opera, Safari
10   xmlhttp=new XMLHttpRequest();
11   }
12 else
13   {// code for IE6, IE5
14   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
15   }
16 xmlhttp.onreadystatechange=function()
17   {
18   if (xmlhttp.readyState==4 && xmlhttp.status==200)
19     {
20     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
21     }
22   }
23 xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true);
24 xmlhttp.send();
25 }
26 </script>
27 </head>
28 <body>
29 
30 <h2>AJAX</h2>
31 <button type="button" onclick="loadXMLDoc()">Request data</button>
32 <div id="myDiv"></div>
33  
34 </body>
35 </html>
View Code

POST :

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script>
 5 function loadXMLDoc()
 6 {
 7 var xmlhttp;
 8 if (window.XMLHttpRequest)
 9   {// code for IE7+, Firefox, Chrome, Opera, Safari
10   xmlhttp=new XMLHttpRequest();
11   }
12 else
13   {// code for IE6, IE5
14   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
15   }
16 xmlhttp.onreadystatechange=function()
17   {
18   if (xmlhttp.readyState==4 && xmlhttp.status==200)
19     {
20     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
21     }
22   }
23 xmlhttp.open("POST","demo_post.asp",true);
24 xmlhttp.send();
25 }
26 </script>
27 </head>
28 <body>
29 
30 <h2>AJAX</h2>
31 <button type="button" onclick="loadXMLDoc()">Request data</button>
32 <div id="myDiv"></div>
33  
34 </body>
35 </html>
View Code
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script>
 5 function loadXMLDoc()
 6 {
 7 var xmlhttp;
 8 if (window.XMLHttpRequest)
 9   {// code for IE7+, Firefox, Chrome, Opera, Safari
10   xmlhttp=new XMLHttpRequest();
11   }
12 else
13   {// code for IE6, IE5
14   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
15   }
16 xmlhttp.onreadystatechange=function()
17   {
18   if (xmlhttp.readyState==4 && xmlhttp.status==200)
19     {
20     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
21     }
22   }
23 xmlhttp.open("POST","demo_post2.asp",true);
24 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
25 xmlhttp.send("fname=Henry&lname=Ford");
26 }
27 </script>
28 </head>
29 <body>
30 
31 <h2>AJAX</h2>
32 <button type="button" onclick="loadXMLDoc()">Request data</button>
33 <div id="myDiv"></div>
34  
35 </body>
36 </html>
View Code

Async=true 异步

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script>
 5 function loadXMLDoc()
 6 {
 7 var xmlhttp;
 8 if (window.XMLHttpRequest)
 9   {// code for IE7+, Firefox, Chrome, Opera, Safari
10   xmlhttp=new XMLHttpRequest();
11   }
12 else
13   {// code for IE6, IE5
14   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
15   }
16 xmlhttp.onreadystatechange=function()
17   {
18   if (xmlhttp.readyState==4 && xmlhttp.status==200)
19     {
20     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
21     }
22   }
23 xmlhttp.open("GET","ajax_info.txt",true);
24 xmlhttp.send();
25 }
26 </script>
27 </head>
28 <body>
29 
30 <div id="myDiv"><h2>Let AJAX change this text</h2></div>
31 <button type="button" onclick="loadXMLDoc()">Change Content</button>
32 
33 </body>
34 </html>
View Code

Async=false 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script>
 5 function loadXMLDoc()
 6 {
 7 var xmlhttp;
 8 if (window.XMLHttpRequest)
 9   {// code for IE7+, Firefox, Chrome, Opera, Safari
10   xmlhttp=new XMLHttpRequest();
11   }
12 else
13   {// code for IE6, IE5
14   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
15   }
16 xmlhttp.open("GET","ajax_info.txt",false);
17 xmlhttp.send();
18 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
19 }
20 </script>
21 </head>
22 <body>
23 
24 <div id="myDiv"><h2>Let AJAX change this text</h2></div>
25 <button type="button" onclick="loadXMLDoc()">Change Content</button>
26 
27 </body>
28 </html>
View Code

 Server Response

PropertyDescription
responseText get the response data as a string
responseXML get the response data as XML data

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script>
 5 function loadXMLDoc()
 6 {
 7 var xmlhttp;
 8 if (window.XMLHttpRequest)
 9   {// code for IE7+, Firefox, Chrome, Opera, Safari
10   xmlhttp=new XMLHttpRequest();
11   }
12 else
13   {// code for IE6, IE5
14   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
15   }
16 xmlhttp.onreadystatechange=function()
17   {
18   if (xmlhttp.readyState==4 && xmlhttp.status==200)
19     {
20     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
21     }
22   }
23 xmlhttp.open("GET","ajax_info.txt",true);
24 xmlhttp.send();
25 }
26 </script>
27 </head>
28 <body>
29 
30 <div id="myDiv"><h2>Let AJAX change this text</h2></div>
31 <button type="button" onclick="loadXMLDoc()">Change Content</button>
32 
33 </body>
34 </html>
View Code
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script>
 5 function loadXMLDoc()
 6 {
 7 var xmlhttp;
 8 var txt,x,i;
 9 if (window.XMLHttpRequest)
10   {// code for IE7+, Firefox, Chrome, Opera, Safari
11   xmlhttp=new XMLHttpRequest();
12   }
13 else
14   {// code for IE6, IE5
15   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
16   }
17 xmlhttp.onreadystatechange=function()
18   {
19   if (xmlhttp.readyState==4 && xmlhttp.status==200)
20     {
21     xmlDoc=xmlhttp.responseXML;
22     txt="";
23     x=xmlDoc.getElementsByTagName("ARTIST");
24     for (i=0;i<x.length;i++)
25       {
26       txt=txt + x[i].childNodes[0].nodeValue + "<br>";
27       }
28     document.getElementById("myDiv").innerHTML=txt;
29     }
30   }
31 xmlhttp.open("GET","cd_catalog.xml",true);
32 xmlhttp.send();
33 }
34 </script>
35 </head>
36 
37 <body>
38 
39 <h2>My CD Collection:</h2>
40 <div id="myDiv"></div>
41 <button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
42  
43 </body>
44 </html>
View Code

 The onreadystatechange event

PropertyDescription
onreadystatechange Stores a function (or the name of a function) to be called automatically each time the readyState property changes
readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready
status 200: "OK" 404: Page not found

 

 

posted on 2014-05-03 17:16  lbsf  阅读(164)  评论(0)  编辑  收藏  举报

导航