若是不用jQuery,Ajax你還能寫出多少?

    許久以前發過一篇關於Ajax的博客,通篇講的都是經過jQuery編寫Ajax,可能由於jQuery在這方面作的實在太好,以致於忽然發現不用jQuery的話本身都模糊了Ajax的寫法,這裏重溫一下.

    First - 咱們明確在使用jQuery的Ajax忽略掉的問題,那就是Ajax的操做自己是操做一個XMLHttpRequest對象,全部的請求發送和監聽都是圍繞它進行的.

    在不一樣瀏覽器中,以及IE的不一樣瀏覽器版本下都會有不同的Function建立這個對象,或者方法不一樣或者參數不一樣.

function CreateXHR() {
            var xhrobj = false;
            try {
                xhrobj = new ActiveXObject("Msxml2.XMLHTTP"); //ie msxml3.0+
            }
            catch (e) {
                try {
                    xhrobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml 2.6
                } catch (e2) {
                    xhrobj = false;
                }
            }
            if (!xhrobj && typeof XMLHttpRequest != 'undefined') { //firefox opera 8.0 safari
                xhrobj = new XMLHttpRequest();
            }
            return xhrobj;
        }

    爲了最終建立出正確的XHR對象,不斷用try-catch進行嘗試.

    Second - 有了XHR對象,接下來咱們調用XMLHttpRequest對象的各個方法就能夠了,Ajax對於所謂的異步請求發送無外乎就是經過幾個方法來進行的.

    咱們這裏是經過Javascript原生編寫異步請求,可是其實並不複雜,只須要記住幾個function就能夠了.

//open,setRequestHeader,onreadystatechange,send

var xhr = CreateXHR();

//這裏以POST方式發送,也能夠是GET,參數不一樣便可.並且GET不須要設置setRequestHeader
xhr.open("POST", "demo.jsp", true);

//設置HTTP的輸出內容類型爲：application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

//設置瀏覽器不使用緩存，服務器不從緩存中找，從新執行代碼，並且服務器返回給瀏覽器的時候，告訴瀏覽器也不要保存緩存。
xhr.setRequestHeader("If-Modified-Since", "0");
 
//設置回調函數
xhr.onreadystatechange = callback;  //callback是方法名
 
//發送請求
xhr.send(null); //GET方式
xhr.send("isAjax=1&na=123"); //POST方式

    這裏就完成了請求發送,也定義了請求的回調是callback函數,因此最後咱們的請求的結果就是在callback函數中.

    Third - 定義callback函數,Ajax的返回是有狀態的,這裏不一樣於jQuery的success,因此要本身判斷狀態碼是否正確.

//回調函數
function callback() {
  if (xhr.readyState == 4) {
    if (xhr.status == 200) {
      var res = xhr.reponseText; //得到服務器返回的字符串
      console.log(res);
    }
  }
}

    這樣就完成了經過原生Javascript發送Ajax請求.