歡迎訪問: www.ptcms.cn
Ajax 採用一種沙箱安全模型。因此，Ajax 代碼（具體來說就是 XMLHttpRequest 對象）只能對所在的同一個域發送請求。以後的文章中將進一步介紹安全和 Ajax，現在只要知道在本地機器上運行的代碼只能對本地機器上的服務器端腳本發送請求。如果讓 Ajax 代碼在 www.breakneckpizza.com 上運行，則必須 www.breakneck.com 中運行的腳本發送請求。
<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
}
</script>
|
這裏沒有難懂的地方。首先，代碼創建了一個新變量 phone，並把 ID 爲 “phone” 的表單字段的值賦給它。清單 8 展示了這個表單的 XHTML，其中可以看到 phone 字段及其 id 屬性。
<body>
<p><img src="breakneck-logo_4c.gif" alt="Break Neck Pizza" /></p>
<form action="POST">
<p>Enter your phone number:
<input type="text" size="14" name="phone" id="phone"
onChange="getCustomerInfo();" />
</p>
<p>Your order will be delivered to:</p>
<div id="address"></div>
<p>Type your order in here:</p>
<p><textarea name="order" rows="6" cols="50" id="order"></textarea></p>
<p><input type="submit" value="Order Pizza" id="submit" /></p>
</form>
</body>
|
還要注意，當用戶輸入電話號碼或者改變電話號碼時，將觸發 清單 8 所示的 getCustomerInfo() 方法。該方法取得電話號碼並構造存儲在 url 變量中的 URL 字符串。記住，由於 Ajax 代碼是沙箱型的，因而只能連接到同一個域，實際上 URL 中不需要域名。該例中的腳本名爲 /cgi-local/lookupCustomer.php。最後，電話號碼作爲 GET 參數附加到該腳本中："phone=" + escape(phone)。
如果以前沒用見過 escape() 方法，它用於轉義不能用明文正確發送的任何字符。比如，電話號碼中的空格將被轉換成字符 %20，從而能夠在 URL 中傳遞這些字符。
可以根據需要添加任意多個參數。比如，如果需要增加另一個參數，只需要將其附加到 URL 中並用 “與”（&）字符分開 [第一個參數用問號（?）和腳本名分開]。
