【整理】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, Safari
12         xmlhttp=new XMLHttpRequest();
13     }
14     else
15     {
16         // code for IE6, IE5
17         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    = opt.data         || null,
 50             success = opt.success     || fn,
 51             failure = opt.failure     || fn;
 52             method  = method.toUpperCase();
 53         if(data && typeof data == ‘object‘){//对象转换成字符串键值对
 54             data = _serialize(data);
 55         }
 56         if(method == ‘GET‘ && data){
 57             url += (url.indexOf(‘?‘) == -1 ? ‘?‘ : ‘&‘) + data;
 58             data = 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 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

  • "xml": 返回 XML 文档，可用 jQuery 处理。
  • "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
  • "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
  • "json": 返回 JSON 数据 。
  • "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
  • "text": 返回纯文本字符串
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回调技术

时间： 2024-10-08 08:15:51

【整理】Ajax异步实现的几种方式总结的相关文章

浅析C# 异步编程的两种方式

一.传统BeginInvoke方式. BeginInvoke方法用于启动c#异步调用.它返回IasyncResult,可用于监视调用进度.EndInvoke方法用于检索c#异步调用结果. 调用BeginInvoke后可随时调用EndInvoke方法;如果C#异步调用未完成,EndInvoke将一直阻塞到C#异步调用完成. 总结其使用大体分5个步骤: 1.声明委拖 2.创建异步方法 3.实例化委拖(把委拖与方法关联)  A 4.通过实例的BeginInvoke调用异步方法 5.通过实例的EndIn

总结ASP.NET MVC视图页使用jQuery传递异步数据的几种方式

在ASP.NET MVC的视图页向控制器传递异步数据,可能是数组,JavaScript对象,json,表单数据,等等. 关于数据,JavaScript对象有时候和json长得一模一样,有么有? var person = {Name: 'darren', Age: 21};以上是一个JavaScript对象.不过也可以这样表示: var person = {"Name":"darren","Age":21};以上JavaScript对象的另外一种表

ajax操作json的三种方式

一. 什么是json? 1. JSON是一种轻量级的数据交换格式 2. JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后就可以在网络或者程序之间轻松地传递这个字符串,并在需要的时候将它还原为各编程语言所支持的数据格式 JSON最常用的格式是对象的 键值对.例如下面这样: {"firstName": "Brett", "lastName": "McLaughlin"} 具体前台代码如下: <!

Android实战简易教程-第四十九枪（两种方式实现网络图片异步加载）

加载图片属于比较耗时的工作,我们需要异步进行加载,异步加载有两种方式:1.通过AsyncTask类进行:2.通过Handler来实现,下面我们就来看一下如何通过这两种方式实现网络图片的异步加载. 一.AsyncTask方式 1.main.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.co

Asp.Net Mvc异步上传文件的方式

今天试了下mvc自带的ajax,发现上传文件时后端action接收不到文件, Request.Files和HttpPostedFileBase都接收不到.....后来搜索了下才知道mvc自带的Ajax不支持文件上传,无奈之下只能用其他的方式 第一种方式:通过 jquery的ajaxSubmit --->(先引入jQuery脚本)需要引入jquery.form.min.js(可以通过NuGet下载) 直接上代码 @{ Layout = null; } <!DOCTYPE html> <

前端ajax异步传值以及后端接收参数的几种方式

原文参考 异步传值 前台往后台传值呢,有很多种方式,大家听我细细道来. 第一种呢,也是最简单的一种,通过get提交方式,将参数在链接中以问号的形式进行传递. // 前台传值方法 // 触发该方法调用ajax function testAjax(yourData) { $.ajax({ type: "get", // 以get方式发起请求 url: "/yourUrl?yourDataName=" + yourData, // 将你的请求参数以问号拼接到url中进行参

JS异步加载的几种方式

一:同步加载 我们平时使用的最多的一种方式. <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输

MVC验证10-到底用哪种方式实现客户端服务端双重异步验证

原文:MVC验证10-到底用哪种方式实现客户端服务端双重异步验证 本篇将通过一个案例来体验使用MVC的Ajax.BeginForm或jQuery来实现异步提交,并在客户端和服务端双双获得验证.希望能梳理.归纳出一个MVC异步验证的通用解决思路.本篇主要涉及: 1.通过Ajax.BeginForm()方式,返回部分视图显示验证信息.2.通过jQuery+Html.BeginForm()方式,返回部分视图显示验证信息.3.通过jquery,返回json字符串,json字符串中包含部分视图及验证信息.

通过XMLHttpRequest和jQuery实现ajax的几种方式

AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一个新的知识框架.而,XMLHttpRequest对象则是其中的重重之中,本篇文章主要给大家介绍通过XMLHttpRequest和jQuery实现ajax的几种方式 HTML代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="