最簡單最實用的ajax（一）基礎通用ajax <轉> 最簡單最實用的ajax（一）基礎通用ajax

最通用的ajax實作整理，不調用jquery，asp.net ajax等架構，最原始ajax實作，相容IE，FireFox。

三種最常用的資料格式（字元串、XML、JSON）的ajax實作。

提綱：

一.AJAX 概述

二.建立xmlHTTPRequest對象

三.AJAX 異步擷取字元串

四.AJAX 處理xml格式資料

    (1)伺服器端傳回xml

    (2)用戶端接收xml并通過javascript處理xml

五.AJAX 處理json格式資料

    (1)伺服器端傳回json字元串

    (2)用戶端接收資料并通過javascript處理json字元串

AJAX全稱：AJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和XML）

Ajax的原理：簡單來說通過XmlHttpRequest對象來向伺服器發異步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。

二.建立并使用xmlHTTPRequest對象

 1

function getXMLHttpRequest()

 2

{

 3

            if(window.XMLHttpRequest)

 4

 5

                return new window.XMLHttpRequest();

 6

            }

 7

            else

 8

 9

                var progIDs = ['Msxml2.XMLHTTP','Microsoft.XMLHTTP'];

10

                for(var i = 0; i < progIDs.length; i++)

11

12

                    try

13

14

                        var xmlHttp = new ActiveXObject(progIDs[i]);

15

                        return xmlHttp;

16

                    }

17

                    catch (ex) 

{}

18

                }

19

                return null;

20

21

        }

先判斷浏覽器是否有原生的xmlHTTPRequest對象。

如果有，直接傳回window.XMLHttpRequest對象（IE7,IE8,FireFox）；

如果沒有，實用ActiveX的方式構造xmlHTTPRequest對象（IE6?）(ps：我本地試了下，好像也是直接傳回XMLHttpRequest對象)。

這樣就得到了一個XMLHttpRequest對象。

function sendRequest(action)

            var xhr = getXMLHttpRequest();

            xhr.open("POST","XMLHttpResponse.aspx?act="+action)

            if (action == "string")

                xhr.onreadystatechange = function()

                    getString.apply(xhr);

            else if (action == "xml")

                    getXml.apply(xhr);

            else if (action == "json")

22

23

                    getJson.apply(xhr);

24

25

26

            xhr.send(null);

27

通過傳參給伺服器端，來決定伺服器端傳回的資料類型。

根據參數決定在xmlHTTPRequest的onreadystatechange事件被觸發以後調用哪個回調函數。

看一下XMLHttpResponse.aspx頁面裡做了什麼事情。

protected void Page_Load(object sender, EventArgs e)

        if (this.Request.QueryString["act"] != null && this.Request.QueryString["act"].ToString().Trim().Length > 0)

            string action = this.Request.QueryString["act"].ToString().Trim();

                this.ResponseString();      //傳回文本字元串

                this.ResponseXML();         //傳回xml文本    

                this.ResponseJSON();        //傳回json字元串

    }

伺服器端傳回字元串的代碼

1

protected void ResponseString()

2

3

        Response.Write("Return a string from server.");

4

        Response.End();

5

用戶端擷取并處理字元串

function getString()

            if (this.readyState == 4)

                if(this.status == 200)

                    var strtest = this.responseText;

                    var showDIV = document.getElementById("showHTML");

                    showDIV.innerHTML = "<ul><li>"+strtest+"</li></ul>";

                   showDIV.style.background = "#EE6600";

                else

                    throw new Error();

this及上文建立的xmlHTTPRequest對象。

(1)伺服器端傳回xml

伺服器端建構xml資料的兩種方式：

第一種：通過System.IO命名空間下的StringWriter對象和System.Xml命名空間下的XmlTextWriter對象

protected void ResponseXML()

        StringWriter sw = new StringWriter();

        XmlTextWriter xtw = new XmlTextWriter(sw);

        xtw.WriteStartDocument();

        xtw.WriteStartElement("Person");

        //Name節點

        xtw.WriteStartElement("Name");

        xtw.WriteString("Candle");

        xtw.WriteEndElement();

        //Age節點

        xtw.WriteStartElement("Age");

        xtw.WriteString("254");

        //Job節點

        xtw.WriteStartElement("Job");

        xtw.WriteString("Software Engineer");

        xtw.WriteEndDocument();

        string xmlstr = sw.ToString().Replace("utf-8", "gb2312").Replace("utf-16", "gb2312");

        Response.ContentType = "text/xml";

        Response.Charset = "GB2312";

        Response.Write(xmlstr);

28

第二種：直接拼接字元串

        string xmlstr = @"<?xml version='1.0' encoding='gb2312' ?>

                        <Persons>

                            <Person>

                                <Name>

                                    <Firstname>Candle</Firstname>

                                    <Lastname>Zhu</Lastname>

                                </Name>

                                <Age>25</Age>

                                <Job>Software Engineer</Job>

                                <Salary>10000</Salary>

                            </Person>

                                    <Firstname>Kevin</Firstname>

                                <Age>30</Age>

                                <Job>UI Designer</Job>

                        </Persons>";

29

(2)用戶端接收xml并使用javascript處理xml

FireFox和IE對XML格式資料的函數有所不同，是以在對xml進行處理之前需要先判斷浏覽器類型，先定義一個判斷

浏覽器類型的函數。

function getOs()

            var OsObject = "";

            if(navigator.userAgent.indexOf("MSIE")>0) 

                return "MSIE";

            if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)

                return "Firefox";

            if(isSafari=navigator.userAgent.indexOf("Safari")>0) 

                return "Safari";

            } 

            if(isCamino=navigator.userAgent.indexOf("Camino")>0)

                return "Camino";

            if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0)

                return "Gecko";

下面就是通過用戶端獲得并處理xml的函數了。

function getXml()

            var osObject = getOs();

            var strHTML = "";

            var xmlDoc = null;  

            var Firstname = "";

            var Lastname = "";

            var Age = "";

            var Job = "";

            var Salary = "";            

           if (this.readyState == 4)

                    var xmlDoc = this.responseXML;

                    var xmlPersons = xmlDoc.getElementsByTagName("Person");

                    for(var i = 0 ; i<xmlPersons.length; i++)

                        var person = xmlPersons[i];

                        if (osObject == "MSIE")

                            Firstname = person.getElementsByTagName("Firstname")[0].text;

                            Lastname = person.getElementsByTagName("Lastname")[0].text;

                            Age = person.getElementsByTagName("Age")[0].text;

                            Job = person.getElementsByTagName("Job")[0].text;

                            Salary = person.getElementsByTagName("Salary")[0].text; 

                        }

                        else

30

                            Firstname = person.getElementsByTagName("Firstname")[0].textContent;

31

                            Lastname = person.getElementsByTagName("Lastname")[0].textContent;

32

                            Age = person.getElementsByTagName("Age")[0].textContent;

33

                            Job = person.getElementsByTagName("Job")[0].textContent;

34

                            Salary = person.getElementsByTagName("Salary")[0].textContent; 

35

36

                        strHTML += "<ul>";

37

                        strHTML += "<li>" + Firstname + Lastname + "</li>";

38

                        strHTML += "<li>" + Age + "</li>";

39

                        strHTML += "<li>" + Job + "</li>";

40

                        strHTML += "<li>" + Salary + "</li>";

41

                        strHTML += "</ul>";

42

43

44

                    showDIV.innerHTML = strHTML;

45

                    showDIV.style.background = "#CCCCCC";  

46

47

48

49

50

51

52

通過var xmlDoc = this.responseXML就可以獲得伺服器端傳回的xml資料并得到一個xml文本對象了。

值得注意FireFox和IE對xml對象處理的不同。

selectSingleNode("")、hasChild()等函數在FireFox下是無效的。（ps:這個問題卡了我N久，郁悶！）

(1)伺服器端傳回json字元串

protected void ResponseJSON()

        //StringBuilder sb = new StringBuilder();

        //sb.Append("{\"persons\":[");

        //sb.Append("{\"Firstname\":\"Candle\",\"Lastname\":\"Zhu\",\"Age\":25,\"Job\":\"Software Engineer\",\"Salary\":10000},");

        //sb.Append("{\"Firstname\":\"Kevin\",\"Lastname\":\"Zhu\",\"Age\":25,\"Job\":\"UI Designer\",\"Salary\":10000}");

        //sb.Append("]}");

        string jsonStr = @"{'persons':[

                            {'Firstname':'Candle','Lastname':'Zhu','Age':25,'Job':'Software Engineer','Salary':10000},

                            {'Firstname':'Kevin','Lastname':'Zhu','Age':25,'Job':'UI Designer','Salary':10000}

                           ]}";

        Response.Write(jsonStr);

json字元串可以在伺服器端直接拼接即可

(2)用戶端接收資料并通過javascript處理json字元串

function getJson()

            var Salary = ""; 

                    var jsonStr = this.responseText;

                    var json = eval("("+jsonStr+")");

                    for (var i=0 ; i < json.persons.length; i++)

                        Firstname = json.persons[i].Firstname;

                        Lastname = json.persons[i].Lastname;

                        Age = json.persons[i].Age;

                        Job = json.persons[i].Job;

                        Salary = json.persons[i].Salary;

                    showDIV.style.background = "#00ff00";

可以看出在用戶端處理json字元串要比處理xml友善很多，是以我覺得能用json的地方盡量用json吧！