Ajax詳解

Ajax = 異步 JavaScript 和 XML。

Ajax 是一種用於創建快速動態網頁的技術。

通過在後臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 Ajax）如果需要更新內容，必需重載整個網頁面。

(註：圖片來自網絡)

如何使用Ajax技術

首先，需要獲取XMLHttpRequest對象：

var xhr;
xhr = new XMLHttpRequest();

XMLHttpRequest對象有5個核心屬性：

• onreadystatechange
  ：當準備狀態發生變化
• readyState：準備狀態，該屬性的值可能是0~4之間的數字，0表示尚未建立連接，4表示接收到響應
• status：響應碼，例如404、200
• responseText：響應的字符串
• responseXML：響應的XML

當需要發出請求時，需要XMLHttpRequest對象的open()和send()方法：

• open(請求方式, 請求路徑, 是否異步)
• send()

使用演示：

// 異步檢查用戶名是否存在
function checkUsername(username) {
    // 獲取XMLHttpRequest對象
    var xhr = new XMLHttpRequest();
    var url = "check_username.do?username="
            + username;

    // 配置onreadystatechange
    xhr.onreadystatechange = function() {
        // 當服務器已經響應(4)且響應碼是200時
        if (xhr.readyState == 4
                && xhr.status == 200) {
            // 根據服務器的響應，顯示響應的提示消息
            if (xhr.responseText == "1") {
                // 表示用戶名存在
                document.getElementById("username_hint").innerHTML= "用戶名正確";
            } else {
                // 表示用戶名不存在
                document.getElementById("username_hint").innerHTML= "用戶名不存在";
            }
        }
    };
    // 調用函數
    xhr.open("GET", url, true);
    xhr.send();
}
 

在JQuery中，Ajax有三種實現方式：

$.ajax({
    "url":"",   //訪問路徑
    "data":"",  // 需要傳輸的數據
    "type":"",  // 請求方式
    "dataType":"",  // 返回值類型
    "success":function(obj){},      // 響應成功時的回調函數
    "error":function(obj){}     // 響應失敗時的回調函數
});

$.get(URL,callback);

$.post(URL,data,callback);

(註：以下內容來自https://www.cnblogs.com/fly-xfa/p/5851746.html)

使用Ajax時的返回值類型有哪些？

xml、html、script、JSON、jsonp、text

• xml：返回XML文檔，可用 jQuery 處理。

• html：返回純文本HTML信息；

• script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了 “cache” 參數；

• json：json方式和html方式在請求和服務器中完全是一樣，請求的返回值實際上都是String對象，有兩點不同，第一：html方式的時候並沒有限制返回的字符串格式，而json方式的時候，必須符合json協議的規範。第二：html方式請求完成之後沒有做任何的操作直接回調sucuess，而json多了一步就是加了eval，執行返回的字符串，看看源碼data = eval_r("(" + data + ")");返回json對象；(方法的返回值是Javabean時，在響應體中響應成json字符串格式)

• jsonp：jsonp方式的交互方式和js是一樣的，本身xmlHttpRequest對象並不能跨域訪問，但是script標簽的src可以跨域訪問，這裏就註意兩個概念：第一Ajax是不能跨域操作的，第二jQuery的jsonp是可以跨域操作，jsonp到底是什麽東西呢？他是一個非官方的定義，目前的規範，需要服務器和客戶端進行配合使用；

• text：返回純文本字符串。

Ajax詳解及使用Ajax時的返回值類型有哪些？