Ajax基本寫法

原創

2018-11-13 23:27

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script>
 7 var xhr=initAjax();
 8 function initAjax()
 9 {
10     if(window.XMLHttpRequest)
11     {
12         return new XMLHttpRequest();
13     }
14     else if(window.ActiveXObject)
15     {
16         try
17         {
18             return new ActiveXObject("Msxml2.XMLHttp");
19         }
20         catch(e)
21         {
22             try
23             {
24                 return new ActiveXObject("Microsoft.XMLHttp");
25             }
26             catch(e)
27             {
28                 //return undefined
29                 alert("Your browser doesn't support AJAX!");
30             }
31         }
32     }
33 }
34 function showInfo()
35 {
36     //var xhr=new ActiveXObject("Msxml2.XMLHttp");
37     if(xhr!=null)
38     {
39         xhr.onreadystatechange=xhrStateChange;
40         xhr.open("GET","info.xml",true);
41         xhr.send(null);
42     }
43     
44 }
45 function xhrStateChange()
46 {
47     if(xhr.readyState==4)
48     {
49         document.getElementById("infoDiv").innerHTML=xhr.responseText;
50     }
51     else if(xhr.readyState==3)
52     {
53         document.getElementById("infoDiv").innerHTML="Loading...";
54     }
55     
56 }
57 </script>
58 </head>
59 <body>
60 <input type="button" value="click me" onclick="showInfo()">
61 <div id="infoDiv"></div>
62 </body>
63 </html>