首页 > 代码库 > 【整理】Ajax异步实现的几种方式总结
【整理】Ajax异步实现的几种方式总结
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
异步 - True 或 False？
- XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true
- 不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
- 请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
- 注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 —— 把代码放到 send() 语句后面即可
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 |
| status | 200: "OK" 404: 未找到页面 |
1.直接使用Javascript的Ajax简单示例：
1 function showCustomer(str) 2 { 3 var xmlhttp; 4 if (str=="") 5 { 6 document.getElementById("txtHint").innerHTML=""; 7 return; 8 } 9 if (window.XMLHttpRequest)10 {11 // code for IE7+, Firefox, Chrome, Opera, Safari12 xmlhttp=new XMLHttpRequest();13 }14 else15 {16 // code for IE6, IE517 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");18 }19 xmlhttp.onreadystatechange=function()20 {21 if (xmlhttp.readyState==4 && xmlhttp.status==200)22 {23 document.getElementById("txtHint").innerHTML=xmlhttp.responseText;24 }25 }26 xmlhttp.open("GET","getcustomer.asp?q="+str,true);27 xmlhttp.send();28 }
showCustomer() 函数执行以下任务：
- 检查是否已选择某个客户
- 创建 XMLHttpRequest 对象
- 当服务器响应就绪时执行所创建的函数
- 把请求发送到服务器上的文件
- 请注意我们向 URL 添加了一个参数 q （带有输入域中的内容）
2. 使用javascript对Ajax封装
此处参考了Snandy的比较成熟完整的封装，包含了超时检查、异常处理、新API解析JSON的特性，推荐
1 /******************************************************************************************************* 2 * 3 * 对创建xhr对象可能出现的异常进行了处理 4 * 5 * 出现异常后failure的第二个参数msg被赋值为create xhr failed 6 * 7 *******************************************************************************************************/ 8 9 /** 10 * 11 * 1,执行基本ajax请求,返回XMLHttpRequest 12 * Ajax.request(url,{ 13 * async 是否异步 true(默认) 14 * method 请求方式 POST or GET(默认) 15 * type 数据格式 text(默认) or xml or json 16 * encode 请求的编码 UTF-8(默认) 17 * timeout 请求超时时间 0(默认) 18 * data 请求参数 (字符串或json) 19 * success 请求成功后响应函数 参数为text,json,xml数据 20 * failure 请求失败后响应函数 参数为xmlHttp, msg, exp 21 * }); 22 * 23 * 2,执行ajax请求,返回纯文本 24 * Ajax.text(url,{ 25 * ... 26 * }); 27 * 28 * 3,执行ajax请求,返回JSON 29 * Ajax.json(url,{ 30 * ... 31 * }); 32 * 33 * 4,执行ajax请求,返回XML 34 * Ajax.xml(url,{ 35 * ... 36 * }); 37 */ 38 39 Ajax = 40 function(){ 41 function request(url,opt){ 42 function fn(){} 43 opt = opt || {}; 44 var async = opt.async !== false, 45 method = opt.method || ‘GET‘, 46 type = opt.type || ‘text‘, 47 encode = opt.encode || ‘UTF-8‘, 48 timeout = opt.timeout || 0, 49 data = http://www.mamicode.com/opt.data || null, 50 success = opt.success || fn, 51 failure = opt.failure || fn; 52 method = method.toUpperCase(); 53 if(data && typeof data =http://www.mamicode.com/= ‘object‘){//对象转换成字符串键值对 54 data =http://www.mamicode.com/ _serialize(data); 55 } 56 if(method == ‘GET‘ && data){ 57 url += (url.indexOf(‘?‘) == -1 ? ‘?‘ : ‘&‘) + data; 58 data = http://www.mamicode.com/null; 59 } 60 var xhr = function(){ 61 try{ 62 return new XMLHttpRequest(); 63 }catch(e){ 64 try{ 65 return new ActiveXObject(‘Msxml2.XMLHTTP‘); 66 }catch(e){ 67 try{ 68 return new ActiveXObject(‘Microsoft.XMLHTTP‘); 69 }catch(e){ 70 failure(null,‘create xhr failed‘,e); 71 } 72 } 73 } 74 }(); 75 if(!xhr){return;} 76 var isTimeout = false, timer; 77 if(async && timeout>0){ 78 timer = setTimeout(function(){ 79 xhr.abort(); 80 isTimeout = true; 81 },timeout); 82 } 83 xhr.onreadystatechange = function(){ 84 if (xhr.readyState == 4 && !isTimeout){ 85 _onStateChange(xhr, type, success, failure); 86 clearTimeout(timer); 87 }else{} 88 }; 89 xhr.open(method,url,async); 90 if(method == ‘POST‘){ 91 xhr.setRequestHeader(‘Content-type‘, ‘application/x-www-form-urlencoded;charset=‘ + encode); 92 } 93 xhr.send(data); 94 return xhr; 95 } 96 function _serialize(obj){ 97 var a = []; 98 for(var k in obj){ 99 var val = obj[k];100 if(val.constructor == Array){101 for(var i=0,len=val.length;i<len;i++){102 a.push(k + ‘=‘ + encodeURIComponent(val[i]));103 } 104 }else{105 a.push(k + ‘=‘ + encodeURIComponent(val));106 } 107 }108 return a.join(‘&‘);109 }110 function _onStateChange(xhr,type,success,failure){111 var s = xhr.status, result;112 if(s>= 200 && s < 300){113 switch(type){114 case ‘text‘:115 result = xhr.responseText;116 break;117 case ‘json‘:118 result = function(str){119 return (new Function(‘return ‘ + str))();120 }(xhr.responseText);121 break;122 case ‘xml‘:123 result = xhr.responseXML;124 break;125 }126 success(result);127 }else if(s===0){128 failure(xhr,‘request timeout‘); 129 }else{130 failure(xhr,xhr.status);131 }132 xhr = null;133 }134 return (function(){135 var Ajax = {request:request}, types = [‘text‘,‘json‘,‘xml‘];136 for(var i=0,len=types.length;i<len;i++){137 Ajax[types[i]] = function(i){138 return function(url,opt){139 opt = opt || {};140 opt.type = types[i];141 return request(url,opt);142 }143 }(i);144 }145 return Ajax;146 })();147 }();
3. ASP.NET中的Ajax控件：
微软很贴心地为开发者封装了一套傻瓜化的Ajax控件，拖拖控件就可以实现Ajax
1 <form id="form1" runat="server"> 2 <div> 3 <asp:ScriptManager ID="ScriptManager1" runat="server"> 4 </asp:ScriptManager> 5 <p> 6 <asp:Label ID="lblNonAjax" runat="server" Text="No Ajax"></asp:Label> 7 </p> 8 <hr /> 9 <asp:UpdatePanel ID="UpdatePanel1" runat="server">10 <ContentTemplate>11 <asp:Label ID="lblText" runat="server"></asp:Label>12 <p>13 <asp:Button ID="btnAjax" runat="server" Text="Ajax Event" 14 onclick="btnAjax_Click"/>15 <asp:Button ID="btnNonAjax" runat="server" Text="Post Black Event" 16 onclick="btnNonAjax_Click"/>17 </p>18 </ContentTemplate>19 <Triggers>20 <asp:PostBackTrigger ControlID="btnNonAjax"/>21 </Triggers>22 </asp:UpdatePanel> 23 </div>24 </form>
用法：
①一个页面只能有一个ScriptManager（脚本控制器）控件，并且放在其他Ajax控件的前面，它是ASP.NET Ajax的基础，用来处理页面上的所有Ajax组件以及页面局部更新，生成相应的客户端代理脚本
②在ScriptManager还可以设置超时处理、异常处理等属性，详见MSDN
③具体实现Ajax的部分放在UpdatePanel控件，可以在该控件里指定事件需要局部刷新还是整页刷新，默认是异步的局部刷新。如果要想实现整页刷新提交，像平时不用Ajax控件的效果，只需在<Triggers>标签里面指定<asp:PostBackTrigger ControlID="btnNonAjax" />，ControlID就是不需要异步提交的控件，如此指定后该控件的任何事件都是整页刷新提交
接下来是对应的页面后台代码：
1 public partial class _Default : System.Web.UI.Page 2 { 3 protected void Page_Load(object sender, EventArgs e) 4 { 5 if (IsPostBack) 6 { 7 //因为以下控件不在Update内，所以触发Ajax事件时无法对其进行更新 8 lblNonAjax.Text = "触发了回发事件！"; 9 }10 }11 12 protected void btnAjax_Click(object sender, EventArgs e)13 {14 this.lblText.Text = "这是一个Ajax事件的触发";15 16 //Response.Write("<script>alert(‘这是一个Ajax事件的触发‘)</script>"); 17 //触发AJAX事件，不能使用该方式或其他方式向页面输出，除非使用下面的方式18 19 //触发的是UpdatePanel里的控件的事件，输出脚本必须使用以下方式20 ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(), "ajaxScript", "alert(‘这是一个Ajax事件的触发‘);", true);21 }22 23 protected void btnNonAjax_Click(object sender, EventArgs e)24 {25 this.lblText.Text = "这是一个页面回发刷新事件的触发";26 Response.Write("<script>alert(‘这是一个页面回发刷新事件的触发‘)</script>");27 }28 }
注意：
①由于这种类似于拖控件的方式生成的HTML代码量巨大，不灵活也不好控制细节，故现在基本上较少采用了
②如果需要实现回调功能，可以使用ClientScriptManager.GetCallbackEventReference方法配合javascript实现，详见MSDN
4. JQuery 实现Ajax
4.1 jQuery.get()
语法：$(selector).get(url,data,success(response,status,xhr),dataType)
参数url是必须的，其他可选
示例：
1 $.get("test.php", function(data){2 alert("Data Loaded: " + data);3 });
4.2 jQuery.post()
语法：jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
参数url是必须的，其他可选
示例：
1 $.post("test.php", { name: "John", time: "2pm" },2 function(data){3 alert("Data Loaded: " + data);4 });
4.3 jQuery.ajax()
语法：jQuery.ajax([settings])
上面两个get()和post()方法都是ajax()方法的简化写法；参数settings是集合，可选
常用参数列表：（详见http://www.w3school.com.cn/jquery/ajax_ajax.asp）
| 参数名 | 类型 | 描述 |
| url | String | (默认值: 当前页地址)发送请求的地址。 |
| type | String | (默认值: "GET")请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。 |
| timeout | Number | 设置请求超时时间（毫秒）。此设置将覆盖全局设置。 |
| async | Boolean | (默认值: true)默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 |
| beforeSend | Function | 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。如果返回 false 可以取消本次 ajax 请求。 |
| complete | Function | 请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述请求类型的字符串。 |
| data | String | 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 ‘&foo=bar1&foo=bar2‘。 |
| dataType | String | 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
|
| success | Function | 请求成功后的回调函数。参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。 |
| error | Function | (默认值: 自动判断 (xml 或 html))请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。 |
| cache | Boolean | (默认值: true，dataType 为 script 和 jsonp 时默认为 false)设置为 false 将不缓存此页面。 jQuery 1.2 新功能。 |
| contentType | String | (默认值: "application/x-www-form-urlencoded")发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。 |
| global | Boolean | 是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。 |
| ifModified | Boolean | (默认值: false)仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 ‘etag‘ 来确定数据没有被修改过。 |
| processData | Boolean | (默认值: true)默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。 |
5. 总结：
方便实用选JQuery，性能优先选javascript封装。UpdatePanel？算了吧。。。
本文待补充
参考文档：
Ajax 基本封装
jQuery Ajax 实例 全解析
基于.NET三种Ajax技术的运用——原生js、ASP.NET Ajax和.NET回调技术
【整理】Ajax异步实现的几种方式总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。