本文實例講述了PHP+原生態ajax實現的省市聯動功能。分享給大家供大家參考,具體如下:
Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入,它是一種支持異步請求的技術。簡而言之,XmlHttpRequest使您可以使用JavaScript向服務器提出請求并處理響應,而不阻塞用戶。
XMLHttpRequest
XMLHttpRequest對象在大部分瀏覽器上已經實現而且擁有一個簡單的接口允許數據從客戶端傳遞到服務端,但并不會打斷用戶當前的操作。使用XMLHttpRequest傳送的數據可以是任何格式,雖然從名字上建議是XML格式的數據。
開發人員應該已經熟悉了許多其他XML相關的技術。XPath可以訪問XML文檔中的數據,但理解XML DOM是必須的。類似的,XSLT是最簡單而快速的從XML數據生成HTML或XML的方式。許多開發人員已經熟悉Xpath和XSLT,因此AJAX選擇XML作為數據交換格式是有意義的。XSLT可以被用在客戶端和服務端,它能夠減少大量的用JavaScript編寫的應用邏輯。
對于Internet Explorer瀏覽器:
Internet 5.0-6.0:
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0,5.0 xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP"); xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
Internet 7.0及以上:
xmlhttp_request = new XMLHttpRequest();
自動判斷的代碼:
var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
在實際應用中,為了兼容多種不同版本的瀏覽器,一般將創建XMLHttpRequest類的方法寫成如下形式:
try { if (window.ActiveXObject) { for (var i = 5; i; i--) { try { if (i == 2) { xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP"); } else { xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP." + i + ".0"); xmlhttp_request.setRequestHeader("Content-Type", "text/xml"); xmlhttp_request.setRequestHeader("Charset", "gb2312"); } break; } catch(e) { xmlhttp_request = false; } } } else if (window.XMLHttpRequest) { xmlhttp_request = new XMLHttpRequest(); if (xmlhttp_request.overrideMimeType) { xmlhttp_request.overrideMimeType('text/xml'); } } } catch(e) { xmlhttp_request = false; }
發送請求
可以調用HTTP請求類的open()和send()方法,如下所示:
xmlhttp_request.open('GET',URL,true); xmlhttp_request.send(null);
open()
的第一個參數是HTTP請求方式—GET,POST或任何服務器所支持的您想調用的方式。按照HTTP規范,該參數要大寫;否則,某些瀏覽器(如Firefox)可能無法處理請求。
第二個參數是請求頁面的URL。
第三個參數設置請求是否為異步模式。如果是TRUE,JavaScript函數將繼續執行,而不等待服務器響應。這就是"AJAX"中的"A"。
服務器的響應
這需要告訴HTTP請求對象用哪一個JavaScript函數處理這個響應。可以將對象的onreadystatechange屬性設置為要使用的JavaScript的函數名,如下所示:
xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript創建的函數名,注意不要寫成FunctionName(),當然我們也可以直接將JavaScript代碼創建在onreadystatechange之后,例如:
xmlhttp_request.onreadystatechange = function(){ // JavaScript代碼段 };
首先要檢查請求的狀態。只有當一個完整的服務器響應已經收到了,函數才可以處理該響應。XMLHttpRequest 提供了readyState屬性來對服務器響應進行判斷。
readyState的取值如下:
0 (未初始化)
1 (正在裝載)
2 (裝載完畢)
3 (交互中)
4 (完成)
所以只有當readyState=4時,一個完整的服務器響應已經收到了,函數才可以處理該響應。具體代碼如下:
if (http_request.readyState == 4) { // 收到完整的服務器響應 }else { // 沒有收到完整的服務器響應 }