不用JQuery，原生Javascript實現Ajax功能及相關知識點

   現在JQuery之普及甚至讓微軟在新建MVC項目的時候，都把JQuery庫放在項目中了，而很多初學者一上來做Ajax開發的時候第一接觸的必是JQuery，曾經聽有人說過，框架會使程序員變笨？姑且打個問號吧，我個人而言，凡學東西，必定要深入其內部原理才能得到提高、學得精通，否則，你就是一流水線上的代碼農民工，所以，本文章將演示不用JQuery，使用Javascript來實現Ajax功能。

什么是Ajax

     我們要使用某些技術來實現一些功能的時候，勢必要了解這項技術，Ajax這東西其實不是新技術，而是整個多項web開發技術而成的，Ajax（Asynchronous JavaScript and XML）即異步Javascript和XML，指一種創建交互式應用的網頁開發技術有機的使用一系列相關的技術：
（1）Web標准XHTML+CSS的表示；
（2）使用DOM進行動態顯示及交互；
（3）使用XML和XSLT進行數據交換和相關操作；
（4）使用XMLHttpRequest（異步對象）進行異步數據查詢、檢索；

普通網頁請求方式和Ajax請求方式的區別

      我們簡單了解到Ajax是怎么一回事之后，那為什么要使用Ajax呢？與普通網頁的請求方式又什么區別呢？且看下面兩張圖片：
第一張圖片是我們普通網頁請求的方式，可見，當我們點擊網頁上的按鈕、或者其他方式請求到服務器的時候，在客戶端瀏覽器這邊是處於空白不可操作的狀態，因為瀏覽器要忙着幫我們請求服務器啊，所以，這會讓用戶很不好的用戶體驗了，我們再來看看Ajax請求的效果圖，我們發現，以Ajax請求方式在客戶端瀏覽器這邊會有一個異步對象（XMLHttpRequest）幫我們做請求服務器的工作，至於用戶依然可以操作瀏覽器。
我們來一個比喻吧：當你在宿舍打Dota的時候，你肚子餓了，如果以普通網頁請求的方式是，你跑去飯堂吃飯，所以這盤游戲就中止在這里了，如果以Ajax的方式去打飯呢？你就需要一個異步對象XMLHttpRequest，你宿舍的同學就是這個異步對象了，你呼喚他去飯堂幫你打飯，但是你依然可以繼續你的Dota戰爭。PS：我不會Dota！！

普通網頁請求模式是由瀏覽器請求服務器，所以當請求過程服務器處理的時候，瀏覽器這邊無法進行其他操作，頁面是刷新一次的，而使用Ajax，則將跟服務器打交道的事情交給了Ajax引擎，瀏覽器與用戶交互不受影響！

開始Ajax之旅：XMLHttpRequest

創建XMLHttpRequest

     不同瀏覽器以及IE瀏覽器不同版本創建 XMLHttpRequest的方法都不同，我們可以使用try……catch的方式來創建適合不同瀏覽器的對象；你只需知道當我們為某一類瀏覽器創建異步對象時，如果失敗catch到異常就換另一種方法來創建，直到為當前瀏覽器創建到異步對象XMLHttpRequest

        function CreateXmlHttp() {
            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;
        }

 為XMLHttpRequest對象設置請求參數

var xhr = CreateXmlHttp();
    window.onload = function() {
       Get();
  }
function Get() {
 //1、設置請求方式、目標、是否異步
 //1.1 Get方式
 xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);
 //===============如果是Post方式，請按下面的進行設置====================
 //1.2 Post方式,如果是Post方式，還需要其他一些設置
 xhr.open("POST", "GetAreasByAjax.aspx", true);
 //1.2.1設置HTTP的輸出內容類型為：application/x-www-form-urlencoded
 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 //1.2.2設置瀏覽器不使用緩存，服務器不從緩存中找，重新執行代碼，而且服務器返回給瀏覽器的時候，告訴瀏覽器也不要保存緩存。
 xhr.setRequestHeader("If-Modified-Since", "0");

 //2、設置回調函數
 xhr.onreadystatechange = wacthing;  //wacthing是方法名

//3、發送請求
 xhr.send(null); //GET方式
 xhr.send("isAjax=1&na=123"); //POST方式
 }

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

這里附加Javascript操作DOM的技術應用點：
（1）Ajax評論的時候，腳本操作Dom增加Table節點，這樣子就省去了從服務器查詢綁定的過程了，高效、用戶體驗又好，以下代碼寫在回調函數中

 var res = xhr.responseText;  //獲得從服務器返回的字符串
  var plT = document.getElementById("plTable");
  var newRow = plT.insertRow(plT.rows.length - 1); //在表格的最后一行新增一行
  var nTd1 = newRow.insertCell();
  var nTd2 = newRow.insertCell();
  nTd1.innerHTML = "ID";
  nTd2.innerHTML = document.getElementById("txtPinglun").value;　　

 

同步更新博客dotnetgeek原文地址：http://www.dotnetgeek.cn/ajax.html