引言

   之前就沒有怎麼學習過ajax的理論知識，但是在專案中用的非常的熟練。因為我一直在用jQuery封裝好的，在

使用的過程中非常的方便，只要我們按照那個格式寫就會得到我們想要的結果，包括序列化和反序列的過程都需要我

們來完成，但是在公司裡面不讓使用jQuery，因為在使用的時候需要引入一個jQuery包，這樣非常的影響效能。所以

說不得不使用原生的東西，下面給大家分享：

   1、建立非同步請求物件

 function createXmlHttp() {
        var xmlHttp;
        try { // Firefox, Opera 8.0+, Safari
            xmlHttp = new XMLHttpRequest();
        }
        catch (e) {
            try {// Internet Explorer
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) { }
            }
        }

        return xmlHttp;

    }
 

function showDetail() {

    // 1.建立非同步物件
    var xhr = createXmlHttp();
    xhr.onreadystatechange = function () {
       if (xhr.readyState === 4 && xhr.status === 200) {

            var data = new Function("return" + xhr.responseText)()//反序列化

        }
    }

    xhr.open("GET", 'http://localhost:10086/tongji/CountStatisticss/Count', true);
    function processRequest(data) {
        alert(data);
   }
    // 4.傳送
    xhr.send(null);


}
 

 其中xhr.responseText就是我們請求後返回的json物件或者是xml格式的資料{"name":

["UV","PV","Ceshi"],"pcount":[10,20,30,40,50,60,70],"ucount":[1,2,3,4,5,6,7]}。這樣我們就需要進行反序

列化以後才能使用，上面程式碼中就是我用到的一個方法，方法還有很多大家可以參考部落格《js讀取解析JSON型別數

據》;

  3、後臺controller程式碼

   public IHttpActionResult Count()
        {
            List<string> name = new List<string>();
            name.Add("UV");
            name.Add("PV");
            name.Add("Ceshi");

            List<int> Uvcount = new List<int>();
            Uvcount.Add(1);
            Uvcount.Add(2);
            Uvcount.Add(3);
            Uvcount.Add(4);
            Uvcount.Add(5);
            Uvcount.Add(6);
            Uvcount.Add(7);

            List<int> Pvcount = new List<int>();
            Pvcount.Add(10);
            Pvcount.Add(20);
            Pvcount.Add(30);
            Pvcount.Add(40);
            Pvcount.Add(50);
            Pvcount.Add(60);
            Pvcount.Add(70);

            var data = new
            {
                name = name,
                pcount = Pvcount,
                ucount = Uvcount
            };
            return Json(data);
        }
 

   小結

   在寫這個東西的時候著實花費了我一些時間，因為自己在學習這塊基礎知識的時候沒有學好，所以現在用起來

比較費勁，讓我陷入困境的是第一個URL的值，之前都是寫一個/controller名稱/方法名稱，但是在我們專案中這樣

寫就是不能跳轉到controller方法中，這是因為現在的專案中是採用APIcontroller，頁面和controller沒有在一個

專案下，所以直接用虛擬路徑是不可以的。第二個就是：不知道如何接收和處理後臺返回的資料。因為之前都是

jQuery封裝好的，而現在需要我們進行反序列的操作。

  所以說在學習的過程中基礎知識的學習是非常重要的，因為只有我們的基礎學習紮實了，在後面學習新的東西的

時候才容易上手！！