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

iDotNetSpace發表於2009-08-10

最通用的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全稱：AJAX全稱為“Asynchronous JavaScript. and XML”（非同步JavaScript和XML）
Ajax的原理：簡單來說通過XmlHttpRequest物件來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。

二.建立並使用xmlHTTPRequest物件

 1function 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物件。

 1function sendRequest(action)
 2        {
 3            var xhr = getXMLHttpRequest();
 4            xhr.open("POST","XMLHttpResponse.aspx?act="+action)
 5            if (action == "string")
 6            {
 7                xhr.onreadystatechange = function()
 8                {
 9                    getString.apply(xhr);
10                }
11            }
12            else if (action == "xml")
13            {
14                xhr.onreadystatechange = function()
15                {
16                    getXml.apply(xhr);
17                }
18            }
19            else if (action == "json")
20            {
21                xhr.onreadystatechange = function()
22                {
23                    getJson.apply(xhr);
24                }
25            }
26            xhr.send(null);
27        }

通過傳參給伺服器端，來決定伺服器端返回的資料型別。
根據引數決定在xmlHTTPRequest的onreadystatechange事件被觸發以後呼叫哪個回撥函式。

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

 1protected void Page_Load(object sender, EventArgs e)
 2    {
 3        if (this.Request.QueryString["act"] != null && this.Request.QueryString["act"].ToString().Trim().Length > 0)
 4        {
 5            string action = this.Request.QueryString["act"].ToString().Trim();
 6            if (action == "string")
 7            {
 8                this.ResponseString();      //返回文字字串
 9            }
10            else if (action == "xml")
11            {
12                this.ResponseXML();         //返回xml文字    
13            }
14            else if (action == "json")
15            {
16                this.ResponseJSON();        //返回json字串
17            }
18        }
19    }

三.AJAX 非同步獲取字串
伺服器端返回字串的程式碼

1protected void ResponseString()
2    {
3        Response.Write("Return a string from server.");
4        Response.End();
5    }

客戶端獲取並處理字串

 1function getString()
 2        {
 3            if (this.readyState == 4)
 4            {
 5                if(this.status == 200)
 6                {
 7                    var strtest = this.responseText;
 8                    var showDIV = document.getElementById("showHTML");
 9                    showDIV.innerHTML = "
"+strtest+"";
10                   showDIV.style.background = "#EE6600";
11                }
12                else
13                {
14                    throw new Error();
15                }
16            }
17        }

this及上文建立的xmlHTTPRequest物件。

四.AJAX 處理xml格式資料
(1)伺服器端返回xml
伺服器端構建xml資料的兩種方式：
第一種：通過System.IO名稱空間下的StringWriter物件和System.Xml名稱空間下的XmlTextWriter物件

 1protected void ResponseXML()
 2    {
 3        StringWriter sw = new StringWriter();
 4        XmlTextWriter xtw = new XmlTextWriter(sw);
 5        xtw.WriteStartDocument();
 6        xtw.WriteStartElement("Person");
 7
 8        //Name節點
 9        xtw.WriteStartElement("Name");
10        xtw.WriteString("Candle");
11        xtw.WriteEndElement();
12        //Age節點
13        xtw.WriteStartElement("Age");
14        xtw.WriteString("254");
15        xtw.WriteEndElement();
16        //Job節點
17        xtw.WriteStartElement("Job");
18        xtw.WriteString("Software Engineer");
19        xtw.WriteEndElement();
20
21        xtw.WriteEndElement();
22        xtw.WriteEndDocument();
23        string xmlstr = sw.ToString().Replace("utf-8", "gb2312").Replace("utf-16", "gb2312");
24        Response.ContentType = "text/xml";
25        Response.Charset = "GB2312";
26        Response.Write(xmlstr);
27        Response.End();
28    }

第二種：直接拼接字串

 1protected void ResponseXML()
 2    {
 3        string xmlstr = @"
 4                        
 5                            
 6                                
 7                                    Candle
 8                                    Zhu
 9                                
10                                25
11                                Software Engineer
12                                10000
13                            
14                            
15                                
16                                    Kevin
17                                    Zhu
18                                
19                                30
20                                UI Designer
21                                10000
22                            
23                        ";
24
25        Response.ContentType = "text/xml";
26        Response.Charset = "GB2312";
27        Response.Write(xmlstr);
28        Response.End();
29    }

(2)客戶端接收xml並使用javascript處理xml
FireFox和IE對XML格式資料的函式有所不同，所以在對xml進行處理之前需要先判斷瀏覽器型別，先定義一個判斷
瀏覽器型別的函式。

 1function getOs()
 2        {
 3            var OsObject = "";
 4            if(navigator.userAgent.indexOf("MSIE")>0) 
 5            {
 6                return "MSIE";
 7            }
 8            if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)
 9            {
10                return "Firefox";
11            }
12            if(isSafari=navigator.userAgent.indexOf("Safari")>0) 
13            {
14                return "Safari";
15            } 
16            if(isCamino=navigator.userAgent.indexOf("Camino")>0)
17            {
18                return "Camino";
19            }
20            if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0)
21            {
22                return "Gecko";
23            }
24        } 

下面就是通過客戶端獲得並處理xml的函式了。

 1function getXml()
 2        {
 3            var osObject = getOs();
 4            var strHTML = "";
 5            var xmlDoc = null;  
 6            var Firstname = "";
 7            var Lastname = "";
 8            var Age = "";
 9            var Job = "";
10            var Salary = "";            
11           if (this.readyState == 4)
12            {
13                if(this.status == 200)
14                {
15                    var xmlDoc = this.responseXML;
16                    var xmlPersons = xmlDoc.getElementsByTagName("Person");
17                    for(var i = 0 ; i<xmlPersons.length; i++)
18                    {
19                        var person = xmlPersons[i];
20                        if (osObject == "MSIE")
21                        {
22                            Firstname = person.getElementsByTagName("Firstname")[0].text;
23                            Lastname = person.getElementsByTagName("Lastname")[0].text;
24                            Age = person.getElementsByTagName("Age")[0].text;
25                            Job = person.getElementsByTagName("Job")[0].text;
26                            Salary = person.getElementsByTagName("Salary")[0].text; 
27                        }
28                        else
29                        {
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 += "";
37                        strHTML += "
" + Firstname + Lastname + "";
38                        strHTML += "
" + Age + "";
39                        strHTML += "
" + Job + "";
40                        strHTML += "
" + Salary + "";
41                        strHTML += "";
42                    }
43                    var showDIV = document.getElementById("showHTML");
44                    showDIV.innerHTML = strHTML;
45                    showDIV.style.background = "#CCCCCC";  
46                }
47                else
48                {
49                    throw new Error();
50                }
51            } 
52        }

通過var xmlDoc = this.responseXML就可以獲得伺服器端返回的xml資料並得到一個xml文字物件了。
值得注意FireFox和IE對xml物件處理的不同。
selectSingleNode("")、hasChild()等函式在FireFox下是無效的。（ps:這個問題卡了我N久，鬱悶！）

五.AJAX 處理json格式資料
(1)伺服器端返回json字串

 1protected void ResponseJSON()
 2    {
 3        //StringBuilder sb = new StringBuilder();
 4        //sb.Append("{\"persons\":[");
 5        //sb.Append("{\"Firstname\":\"Candle\",\"Lastname\":\"Zhu\",\"Age\":25,\"Job\":\"Software Engineer\",\"Salary\":10000},");
 6        //sb.Append("{\"Firstname\":\"Kevin\",\"Lastname\":\"Zhu\",\"Age\":25,\"Job\":\"UI Designer\",\"Salary\":10000}");
 7        //sb.Append("]}");
 8
 9        string jsonStr = @"{'persons':[
10                            {'Firstname':'Candle','Lastname':'Zhu','Age':25,'Job':'Software Engineer','Salary':10000},
11                            {'Firstname':'Kevin','Lastname':'Zhu','Age':25,'Job':'UI Designer','Salary':10000}
12                           ]}";
13        Response.Write(jsonStr);
14        Response.End();
15    }

json字串可以在伺服器端直接拼接即可
(2)客戶端接收資料並通過javascript處理json字串

 1function getJson()
 2        {
 3            var strHTML = "";
 4            var Firstname = "";
 5            var Lastname = "";
 6            var Age = "";
 7            var Job = "";
 8            var Salary = ""; 
 9            if (this.readyState == 4)
10            {
11                if(this.status == 200)
12                {
13                    var jsonStr = this.responseText;
14                    var json = eval("("+jsonStr+")");
15                    for (var i=0 ; i < json.persons.length; i++)
16                    {
17                        Firstname = json.persons[i].Firstname;
18                        Lastname = json.persons[i].Lastname;
19                        Age = json.persons[i].Age;
20                        Job = json.persons[i].Job;
21                        Salary = json.persons[i].Salary;
22                        strHTML += "";
23                        strHTML += "
" + Firstname + Lastname + "";
24                        strHTML += "
" + Age + "";
25                        strHTML += "
" + Job + "";
26                        strHTML += "
" + Salary + "";
27                        strHTML += "";
28                    }
29                    var showDIV = document.getElementById("showHTML");
30                    showDIV.innerHTML = strHTML;
31                    showDIV.style.background = "#00ff00";
32                }
33                else
34                {
35                    throw new Error();
36                }
37            }
38        }

可以看出在客戶端處理json字串要比處理xml方便很多，所以我覺得能用json的地方儘量用json吧！

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-611747/，如需轉載，請註明出處，否則將追究法律責任。

jQuary中ajax的簡單應用
2020-11-10
基於Promise實現對Ajax的簡單封裝
2020-07-29
Promise封裝
【前端基礎】ajax
2019-07-11
前端
ajax簡單介紹
2018-08-31
PHP + Laravel 的簡單應用教程 — ajax 的使用
2020-12-12
PHPLaravel
python urllib 基礎 get ajax
2024-07-10
Python
Django基礎五之Ajax
2022-03-19
Django
JSP(ajax)+Servlet實現簡單的登入功能
2018-09-19
JSServlet
ajax與json通過程式碼的簡單應用
2018-08-31
JSON
簡單的介紹伺服器和Ajax的應用
2020-10-27
伺服器
Ajax 實戰（一）
2022-03-07
Ajax簡介
2020-10-03
【ajax】 html js jquery ajax上傳檔案【一眼就會】【實用】
2024-08-29
HTMLJSjQuery
Ajax基礎原理及使用教程（來自動力節點ajax教程）
2021-12-22
織夢CMS最簡單實用的SQL語句
2018-03-08
SQL
用最基礎的方法講解 Redux 實現原理
2019-03-01
Redux
一個最簡單的web components
2024-08-16
Web
用Java編寫一個最簡單的桌面程式
2018-04-07
Java
基於jQuery的Ajax
2020-11-17
jQuery
jQuery AJAX 簡介
2022-08-03
jQuery
[ 造輪子 ] 手動封裝 AJAX （一） —— 基礎版
2018-12-26
封裝
[ 造輪子 ] 手動封裝 AJAX （三） —— 最終版
2018-12-30
封裝
用最簡單的方法實現原生 JS 放大鏡特效
2019-12-15
JS特效
使用rails實現最簡單的CRUD
2019-03-04
AI
實現最簡單的模板替換
2018-08-10
javaweb-ajax和json基礎知識
2020-11-07
JavaWebJSON
Ajax 什麼是Ajax? Ajax的基本語法
2024-03-25
一對一聊天ajax實現
2018-06-11
js基礎進階–從ajax到fetch的理解
2019-02-16
JS
一個最簡單的 Github workflow 例子
2021-10-11
Github
最簡單的物件建立
2019-11-04
物件
用promise封裝一個ajax
2018-08-21
Promise封裝
Express的Ajax實踐
2018-07-28
Express
Ajax及其應用
2024-03-12
從最簡單的入手學習 Docker (一)
2019-02-16
Docker
一個最簡單的WebSocket hello world demo
2019-03-10
Web
Android 最簡單的自定義MenuItem之一
2018-10-08
AndroidUI
Android 最簡單的自定義Dialog之一
2018-07-08
Android
看了就會用的ajax
2020-09-30

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

相關文章