1.AJAX兼容IE和Firefox兩大浏覽器,出現了AJax開發框架.
2.AJax開發關鍵技術:XMLHttpRequest對象,JavaScript編程技術,DOM(文檔對象模型),CSS(層疊樣式表),和XSLT(可擴展樣式表轉換)
XMLHttpRequest對象是實現AJax應用的核心;
JavaScript是AJax應用在客戶端使用的腳本語言;
通過JavaScript和DOM的配合才能實現頁面的動態更新;
CSS主要用於控制頁面元素的顯示樣式;
XSLT可以將XML文檔轉換為任何形式的文檔,在AJax應用中使用XSLT可以實現數據和頁面顯示的完全分離;
3.XMLHttpRequest對象:
3.1 發送請求
使用XMLHttpRequest對象向服務器端發送請求的基本流程可以分為5步:
3.1.1 從Web表單中獲取需要的數據;
3.1.2 建立要連接的URL;
3.1.3 打開到服務器的連接;
3.1.4 設置服務器在完成後要運行的函數;
3.1.5 發送請求;
function callServer(){
//表單中獲取必要的數據
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
//只有在數據不為空時才發出請求
if((city == null) (city == "")) return;
if((state == null) (state == "")) return;
//請求的URL
var url = "getZipCode.PHP?city=" + escape(city) + "&state=" + escape(state);
//聯系服務器,打開連接
XMLHttp.open("GET",url,true);//"true"代表該請求是異步的
//設置請求完成時的響應函數,注意這裡是請求完成時,並不是響應完成時
XMLHttp.onreadystatechange = updatePage;
//發送請求,因為已經在請求URL中添加了要發送給服務器的數據(city和state),所以請求中 無需再發送其他數據.
XMLHttp.send(null);
}
3.2 .處理HTTP響應
200:一切正常
401:未經授權
403:禁止
404:沒找到
function updatePage(){
//readState == 4,表示請求成功完成
if(XMLHttp.readyState == 4){
if(XMLHttp.status == 200){
var response = XMLHttp.responseText;//HTTP請求返回的文本內容
document.getElementById("zipCode").value = response;
}else if(request.status == 404){
//HTTP狀態碼為404,無法找到資源
alert("404 Not Found");
}else if(request.status == 403){
//HTTP狀態碼為403,資源不可用
alert("403 Forbidden");
}else if(request.status == 401){
//HTTP狀態碼為401,未經授權
alert("401 Unauthorized");
}
}
}
3.3.HTTP就緒狀態
共有5種就緒狀態:
0:請求未初始化(還沒有調用XMLHttpRequest對象的open方法)
1:請求已經建立,但是還沒有發送(還沒有調用send方法)
2:請求已發送,正在處理中
3:請求在處理中。通常響應中已有部分數據可用了,但是服務器還沒有完成響應的生成
4:響應已完成,可以獲取並且使用服務器的響應了