用js內建物件XMLHttpRequest 來用ajax

weixin_34391854發表於2013-07-17
JS物件XMLHTTP

步驟：

/* 用XMLHTTPRequest來進行ajax非同步資料交互動*/

主要有幾個步驟：

//1.建立XMLHTTPRequest物件

//最複雜的一步

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
//針對某些特定版本的mozillar瀏覽器的bug進行修正。
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType('text/xml');
};
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2.註冊回撥函式

xmlhttp.onreadystatechange = callback;

//3.設定連線資訊。
//open第一個引數連結方式，第二是url地址
//3，true是非同步連結
//xmlhttp.open("GET","xhr.php?name=" + username,true);

//使用post方式傳送資料
xmlhttp.open("POST","xhr.php",true);

//post需要自己設定http的請求頭
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//4，傳送資料，開始和伺服器進行互動
//中如果true, send這句話會立即執行
//如果是false（同步），send會在伺服器資料回來才執行
//xmlhttp.send(null);
//因為是get所以send中不需要內容
xmlhttp.send('name=' +username);

}
//5.寫回撥函式,不同相應狀態進行處理

function callback(){
alert(xmlhttp.readyState);
//判斷物件狀態是互動完成，接收伺服器返回的資料
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//["dada","xiaoyin","liujie"]
//純文字的資料
var responseText = xmlhttp.responseText;
var divNode = document.getElementById('result');
//6.將伺服器的資料顯示在客戶端
divNode.innerHTML = responseText;
}
}

程式碼：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>XHR</title>
 6     <link rel="stylesheet" href="../templates/css/verify.css">
 7 </head>
 8 <body>
 9     
10     <input type="text" id="username"><input type="button" value="提交" onclick="dadaHttpRequest()">
11     <div class="box" id="box"></div>
12         <script type="text/javascript" src="../templates/js/jquery.js"></script>
13         <script>
14         
15         /* 用XMLHTTPRequest來進行ajax非同步資料交互動*/
16         //1.建立XMLHTTPRequest物件
17         var xmlhttp;
18         //最複雜的一步
19         function dadaHttpRequest(){
20             var username = document.getElementById('username').value;
21             if (window.XMLHttpRequest) {
22                 // code for IE7+, Firefox, Chrome, Opera, Safari
23                 xmlhttp = new XMLHttpRequest;
24 
25                 //針對某些特定版本的mozillar瀏覽器的bug進行修正。
26                 if (xmlhttp.overrideMimeType) {
27                       xmlhttp.overrideMimeType('text/xml');
28                 };
29 
30             } else if (window.ActiveXObject){
31                 // code for IE6, IE5
32                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
33             };
34 
35             //2.註冊回撥函式
36             //onreadystatechange是每次 readyState 屬性改變的時候呼叫的事件控制程式碼函式。
37             xmlhttp.onreadystatechange = callback;
38 
39             //3.設定連線資訊
40             //初始化HTTP請求引數，但是並不傳送請求。
41             //第一個引數連線方式，第二是url地址,第三個true是非同步連線，預設是非同步
42             xmlhttp.open("GET","xhr.php?name="+username,true);
43 
44             /*******************************************/
45             /*如果是xmlhttp.open("GET","xhr.php",true);*/
46             /*    xmlhttp.send('name=' +username);     */
47             /*    不行的                               */
48             /*******************************************/
49 
50             //使用post方式傳送資料
51             //xmlhttp.open("POST","xhr.php",true);
52             //post需要自己設定http的請求頭
53             //xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
54 
55             //4，傳送資料，開始和伺服器進行互動
56             //傳送 HTTP 請求，使用傳遞給 open() 方法的引數，以及傳遞給該方法的可選請求體。
57             //中如果true, send這句話會立即執行
58             //如果是false（同步），send會在伺服器資料回來才執行
59             xmlhttp.send(null);
60             //因為是get所以send中不需要內容
61             //xmlhttp.send('name=' +username);
62 
63         }
64         
65         //5回撥函式,不同相應狀態進行處理
66         function callback(){
67             //alert(xmlhttp.readyState);
68             //判斷物件狀態是互動完成，接收伺服器返回的資料
69             if (xmlhttp.readyState==4 && xmlhttp.status==200)
70                 {
71                 //["dada","xiaoyin","liujie"]
72                 //純文字的資料
73                 var responseText = xmlhttp.responseText;
74                 var divNode = document.getElementById('box');
75                 //6.將伺服器的資料顯示在客戶端
76                 divNode.innerHTML = responseText;   
77                 }    
78         }
79         </script>
80 </body>

 

相關文章