AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

最简单最实用的ajax（一）基础通用ajax <转>

2017-10-12 1211
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

最简单最实用的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全称：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对象。
复制代码
 1 function  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页面里做了什么事情。
复制代码
 1 protected   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 异步获取字符串

服务器端返回字符串的代码
1 protected   void  ResponseString()
 2      {
3        Response.Write("Return a string from server.");
4        Response.End();
5    }

客户端获取并处理字符串
复制代码
 1 function  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 = "<ul><li>"+strtest+"</li></ul>";
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对象
复制代码
 1 protected   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    }
复制代码
第二种：直接拼接字符串
复制代码
 1 protected   void  ResponseXML()
  2      {
 3        string xmlstr = @"<?xml version='1.0' encoding='gb2312' ?>
 4                        <Persons>
 5                            <Person>
 6                                <Name>
 7                                    <Firstname>Candle</Firstname>
 8                                    <Lastname>Zhu</Lastname>
 9                                </Name>
10                                <Age>25</Age>
11                                <Job>Software Engineer</Job>
12                                <Salary>10000</Salary>
13                            </Person>
14                            <Person>
15                                <Name>
16                                    <Firstname>Kevin</Firstname>
17                                    <Lastname>Zhu</Lastname>
18                                </Name>
19                                <Age>30</Age>
20                                <Job>UI Designer</Job>
21                                <Salary>10000</Salary>
22                            </Person>
23                        </Persons>";
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进行处理之前需要先判断浏览器类型，先定义一个判断
浏览器类型的函数。
复制代码
 1 function  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的函数了。
复制代码
 1 function  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 += "<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                    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字符串
复制代码
 1 protected   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字符串
复制代码
 1 function  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 += "<ul>";
23                        strHTML += "<li>" + Firstname + Lastname + "</li>";
24                        strHTML += "<li>" + Age + "</li>";
25                        strHTML += "<li>" + Job + "</li>";
26                        strHTML += "<li>" + Salary + "</li>";
27                        strHTML += "</ul>";
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吧！
原文地址:http://www.cnblogs.com/candle/archive/2009/08/09/common_ajax.html
 
 
本文转自温景良(Jason)博客园博客，原文链接：http://www.cnblogs.com/wenjl520/archive/2009/08/10/1542727.html，如需转载请自行联系原作者
文章标签：
数据格式
前端开发
JavaScript
XML
JSON
.NET
iOS开发
Web App开发
开发框架
关键词：
ajax.js基础
科技小毛
目录
相关文章
lambda&lambda;
|
前端开发 缓存 JavaScript
ajax基础
最简单的get提交方式 首先在前端页面书写一个文本框用来获取用户输入的值,再创建一个空的div框用来接收回调函数所显示的值并且都要定义一个id的属性值,因为ajax获取值和传值的时候需要用到id而不是name也不是class 并且在jQuery中定义变量接收值时使用的是var 2018-01-08 14-18-37 的屏幕截图.
lambda&lambda;
961 0
龙神之怒
|
JSON JavaScript 前端开发
ajax基础
AJAX AJAX简介 ajax分类 ajax的语法 表示一个对象 表示一个由对象组成的数组 将java对象转换成json字符串 ajax实现过程 获取ajax对象 配置请求对象的信息 发送请求 监听Ajax引擎对象的改变是否正确做出了响应 Ajax引擎的状...
龙神之怒
1452 0
java小工匠
|
Web App开发 前端开发 JavaScript
AJAX-基础
1、ajax是什么 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
java小工匠
819 0
陈嘻嘻哈哈
|
Web App开发 JavaScript 前端开发
Ajax 基础
一：什么是 AJAX ？ AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
陈嘻嘻哈哈
915 0
风与烈酒
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
风与烈酒
98 0
热烈的马
|
9月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery，html，ajax）附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery，html，ajax）附源码 超详细
热烈的马
215 0
你挚爱的强哥
|
9月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
你挚爱的强哥
95 0
亚丁号
|
9月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
亚丁号
74 0
zrblue
|
9月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
zrblue
91 0
多加点香菜85
|
9月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
多加点香菜85
81 0