步驟：
/* 用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>