標籤：瞭解 child 輸入 request對象 eve xxx 輸出 提交 row
Ajax用於概括非同步載入頁面內容的技術。以前web應用都要涉及打量頁面重新整理，即使頁面中的一小部分有變化，也要重新整理和重新載入整個頁面。使用Ajax可以做到只更新頁面中的一小部分，主要優勢在於對頁面的請求以非同步方式發送到伺服器。而伺服器不會用整個頁面來相應請求，它會在幕後處理請求，與此同時使用者還能繼續瀏覽頁面並與頁面互動。你的指令碼則可以按需載入和建立頁面內容，而不會打斷使用者的瀏覽體驗。利用Ajax，Web應用可以呈現出功能豐富，互動敏捷，類似案頭應用般的體驗。
Ajax技術的核心是XMLHttpRequest對象。這個對象充當著瀏覽器中的指令碼（用戶端）與伺服器端之間的中間人的角色。通過兩個js指令碼簡單瞭解ajaxtry-catch錯誤處理語句：try { //可能會導致錯誤的代碼 } catch (error) { //在錯誤發生時怎麼處理}首先在html目前的目錄建立一個文字文件輸入一句話用來充當伺服器端指令碼的輸出第一js指令碼用來擷取XMLHttpRequest對象不同的IE版本中使用的XMLHTTP對象不同，為了相容所有的伺服器，第一個指令碼如下
function getHTTPObject() { if (typeof XMLHttpRequest == "undefined") XMLHttpRequest = function () { try {return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {} try {return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {} try {return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {} return false;} return new XMLHttpRequest();}以上指令碼最終會返回一個新的XMLHttpRequest或XMLHTTP對象，或返回false XMLHttpRequest對象有許多方法，open方法用來指定伺服器上將要訪問的檔案，指定請求類型：GET、POST、SEND，第三個參數指定請求是否以非同步方式發送和處理。request.open("方法", "檔案", true) onreadystatechange是一個事件處理函數，會在伺服器給XMLHttpRequest對象發迴響應的時候被觸發執行。request.onreadystatechange = function () { // 處理響應} 瀏覽器會在不同階段更新readyState屬性的值：0 未初始化1 正在載入2 載入完畢3 正在互動4 完成 訪問伺服器發送回來的資料通過兩個屬性可以訪問responseText 用於儲存文本字串形式的資料responseXML 用於儲存Content-Type=text/xml的資料，其實是一個DocumentFragment對象，可以用DOM方法處理這個對象。 明確了如何處理響應，就可以用send方法發送請求了：request.send(null);Ajax中send方法參數的使用:一般情況下，使用Ajax提交的參數多是些簡單的字串，可以直接使用GET方法將要提交的參數寫到open方法的url參數中，此時send方法的參數為null。例如 ：
var url = "login.jsp?user=XXX&pwd=XXX";xmlHttpRequest.open("GET",url,true);xmlHttpRequset.send(null);
此外，也可以使用send方法傳遞參數。使用send方法傳遞參數使用的是POST方法，需要設定Content-Type頭資訊，類比HTTP POST方法發送一個表單，這樣伺服器才會知道如何處理上傳的內容。參數的提交格式和GET方法中url的寫法一樣。設定頭資訊前必須先調用open方法。
xmlHttpRequest.open("POST","login.jsp",true);xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");xmlHttpRequest.send("user="+username+"&pwd="+password);
第二個指令碼用來擷取內容
function getNewContent() { var request = getHTTPObject(); if (request) { request.open("GET", "example.txt", true); request.onreadystatechange = function () { if (request.readyState == 4) { var para = document.createElement("p"); var txt = document.createTextNode(request.responseText); para.appendChild(txt); document.getElementById(‘new‘).appendChild(para); } }； request.send(null); } else { alert("Sorry, your browser doesn‘t support XMLHttpRequest"); }}addLoadEvent(getNewContent);
其中addLoadEvent是自己編寫的載入函數
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != ‘function‘){ window.onload = func; }else { window.onload = function () { oldonload(); func(); } }}
這樣，將以上兩個js指令碼插入含有id為new的div節點的html頁面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Ajax</title></head><body> <div id="new"></div> <script src="script/addLoadEvent.js"></script> <script src="script/getNewContent.js"></script> <script src="script/getHTTPObject.js"></script></body></html>
就完成了一次簡單的Ajax請求
需要注意的是：1.在使用Ajax時，要注意同源策略，使用XMLHttpRequest對象發送的請求只能訪問於其所在的HTML處於同一個域中的資料。2.指令碼在發送XMLHttpRequest請求後，仍然會繼續執行，不會等待響應返回。也就是說指令碼不會等待send的響應，而是會繼續執行。為此，如果其他指令碼依賴於伺服器的響應，就得把響應代碼寫到onreadystatechange屬性對應的函數中，這是非同步性。JavaScript DOM 編程藝術之 Ajax
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
