ajax
Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。 不是新的編程語言,而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。
- 產(chǎn)生請求,并發(fā)送的方法
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 規(guī)定請求的類型、URL 以及是否異步處理請求。 * method:請求的類型;GET 或 POST * url:文件在服務(wù)器上的位置 * async:true(異步)或 false(同步) |
| send(string) | 將請求發(fā)送到服務(wù)器。 string:僅用于 POST 請求 |
- 設(shè)置表頭
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
- 服務(wù)器響應(yīng)
| 屬性 | 描述 |
|---|---|
| responseText | 獲得字符串形式的響應(yīng)數(shù)據(jù)。 |
| responseXML | 獲得 XML 形式的響應(yīng)數(shù)據(jù)。 |
- onreadystatechange
| 屬性 | 描述 |
|---|---|
| onreadystatechange | 存儲函數(shù)(或函數(shù)名),每當(dāng) readyState 屬性改變時(shí),就會調(diào)用該函數(shù)。 |
| readyState | 存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。 0: 請求未初始化 1: 服務(wù)器連接已建立 2: 請求已接收 3: 請求處理中 4: 請求已完成,且響應(yīng)已就緒 |
| status | 200: "OK" 404: 未找到頁面 |
- 調(diào)用代碼:
//定義請求變量
var xmlhttp;
//初始化請求
xmlhttp=new XMLHttpRequest();
//請求狀態(tài)發(fā)生變化調(diào)用的函數(shù)
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//發(fā)送請求
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
注釋:onreadystatechange 事件被觸發(fā) 5 次(0 - 4),對應(yīng)著 readyState 的每個(gè)變化。
使用 Callback 函數(shù)
連接數(shù)據(jù)庫
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}