正文
jquery常见异步处理方法，jquery异步下载文件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
.net ajax 异步调用的几种实现方法（jquery）
在这里抛砖引玉，介绍几种.NET中ajax异步调用的不同方式，希望能一起聊聊通常你都用怎样的实现方式，以及他们各自的优劣(1).aspx 普通web窗体页。删除aspx页面中 html代码，只保留第一行。在后置代码页 .aspx.cs 中写对应的方法代码。前台调用：// 异步调用页面url,参数组，返回执行事件 $.post("AjaxPage.aspx" , { type:'getData01' },function(re){
$('#re_method01').html(re);
});(2)单独.aspx 页（新建的时候不勾选 “将代码放在单独的文件中”） + 任意.cs文件（需要继承System.Web.UI.Page）.aspx文件中代码 %@ Page Inherits="命名空间.类" %(3).ashx页面这里主要知识点就是继承了IHttpHandler接口。来实现Http web相关的事件处理。
实现方法：新建后注销掉context.Response.Write("Hello World");改为你的事件处理代码即可。1,2,3的前台ajax调用方法都一样。如果需要区分不同的ajax调用。我们可以传递一个不同值的 type 参数。后台再通过switch执行各自的处理程序。(4)利用System.Web.Services.WebMethodAttribute。在（1）的基础上引用命名空间using System.Web.Services;然后在需要异步执行的方法上添加[WebMethod]属性。[WebMethod]
publicstaticstring HandleEvent01(string para,string para2){//code...return"YOUR DATA";
}前台调用代码：$.ajax({
type: "POST",
contentType: "application/json",
url: "AjaxWebService.aspx/HandleEvent01", //调用WebService的地址和方法名称组合 ---- WsURL/方法名 data: "{'para':'bill','para2':'28'}", //这里是要传递的参数，注意参数名跟后台方法参数名的对应 dataType: 'json', //WebService 返回Json类型 或者 Json/string success: function(re) {
publicstaticstring HandleEvent01(){//code...return"some words";}[WebMethod]
publicstatic Person AjaxMethodThree(string para){returnnew Person { Name = "bill", Country = "China", Favor = newstring[] { "Box", "Music", "Football" } };}[WebMethod]
publicstatic ListPerson AjaxMethodTwo(string para){ListPerson personlist = new ListPerson();
相关问答
Q1: jquery ajax 异步请求获取数据再次异步，有什么好的办法简洁一些
new Promise(function(resolve, reject) {
$.ajax({
url: "url1",
success: function(data) {
resolve(data);
}
});
}).then(function(value) {
return new Promise(function(resolve, reject) {
$.ajax({
url: "url2",
data: {
data: value//第一个请求的返回值
},
success: function(data) {
resolve(data);
}
});
})
}).then(function(value) {
return new Promise(function(resolve, reject) {
$.ajax({
url: "url3",
data: {
data: value//第二个请求的返回值
},
success: function(data) {
console.log("三个请求全部成功");
resolve(data);
}
})
})
});
console.log("第三个请求成功之前打印，证明不是同步代码");
搜索“js promise”，这是专门解决这个问题的。如果你需要大量使用回调嵌套，可以用这种办法。如果用的很少，还不如直接嵌套，毕竟低版本浏览器不能直接支持，还得引入一些额外的js文件解决兼容问题。
Q2: js异步问题怎么解决
异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。
方法一：也叫Script DOM Element
(function(){
var scriptEle = document.createElement("script");
scriptEle.type = "text/javasctipt";
scriptEle.async = true;
scriptEle.src = "";
var x = document.getElementsByTagName("head")[0];
x.insertBefore(scriptEle, x.firstChild);
})();
async属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了这种异步加载代码
(function(){;
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? '' : '') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
但是这种加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理。
方法二：onload时的异步加载
(function(){
if(window.attachEvent){
window.attachEvent("load", asyncLoad);
}else{
window.addEventListener("load", asyncLoad);
}
var asyncLoad = function(){
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? '' : '') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
}
)();
这种方法只是把插入script的方法放在一个函数里面，然后放在window的onload方法里面执行，这样就解决了阻塞onload事件触发的问题。
注:DOMContentLoaded与load的区别。前者是在document已经解析完成，页面中的dom元素可用，但是页面中的图片，视频，音频等资源未加载完，作用同jQuery中的ready事件；后者的区别在于页面所有资源全部加载完毕。
方法三：其他方法
由于JavaScript的动态性，还有很多异步加载方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer属性、 document.write(script tag)。
XHR Injection(XHR 注入)：通过XMLHttpRequest来获取javascript，然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。
//获取XMLHttpRequest对象，考虑兼容性。
var getXmlHttp = function(){
var obj;
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
else
obj = new ActiveXObject("Microsoft.XMLHTTP");
return obj;
};
//采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
var xmlHttp = getXmlHttp();
xmlHttp.open("GET", "", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 xmlHttp.status == 200){
var script = document.createElement("script");
script.text = xmlHttp.responseText;
document.getElementsByTagName("head")[0].appendChild(script);
}
}
XHR Eval：与XHR Injection对responseText的执行方式不同，直接把responseText放在eval()函数里面执行。
//获取XMLHttpRequest对象，考虑兼容性。
var getXmlHttp = function(){
var obj;
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
else
obj = new ActiveXObject("Microsoft.XMLHTTP");
return obj;
};
//采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
var xmlHttp = getXmlHttp();
xmlHttp.open("GET", "", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 xmlHttp.status == 200){
eval(xmlHttp.responseText);
//alert($);//可以弹出$,表明JS已经加载进来。click事件放在其它出会出问题，应该是还没加载进来
$("#btn1").click(function(){
alert($(this).text());
});
}
}
Script In Irame：在父窗口插入一个iframe元素，然后再iframe中执行加载JS的操作。
var insertJS = function(){alert(2)};
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;//获取iframe中的window要用contentWindow属性。
doc.open();
doc.write("scriptvar insertJS = function(){};\/scriptbody onload='insertJS()'/body");
doc.close();
GMail Mobile：业内JS内容被注释，所以不会执行，在需要的时候，获取script中的text内容去掉注释，调用eval()执行。
script type="text/javascript"
/*
var ...
*/
/script
HTML5新属性：async和defer属性
defer属性：IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注：所有的defer脚本必须保证按顺序执行的。
script type="text/javascript" defer/script
async属性：HTML5新属性。脚本将在下载后尽快执行，作用同defer，但是不能保证脚本按顺序执行。他们将在onload事件之前完成。
script type="text/javascript" defer/script
Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async属性。可以同时使用async和defer，这样IE 4之后的所有IE都支持异步加载。
没有async属性，script将立即获取（下载）并执行，期间阻塞了浏览器的后续处理。如果有async属性，那么script将被异步下载并执行，同时浏览器继续后续的处理。
总结： 对于支持HTML5的浏览器，实现JS的异步加载只需要在script元素中加上async属性，为了兼容老版本的IE还需加上defer属性；对于不支持HTML5的浏览器(IE可以用defer实现)，可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码，你可以把它放在匿名函数中执行，也可以在onload中执行，也可以通过XHR注入实现，也可以创建一个iframe元素，然后在iframe中执行插入JS代码。
Q3: 哪个 jquery 方法用于执行异步 http 请求
jquery通用异步方法：$.ajax
文档：
异步post请求方法：$.post
文档：
异步get请求方法：$.get
文档：
Q4: 如何使用jquery ajax 异步读取js文件中的数组
解决的方法如下：
1、先把得到的数组用alert(array)看是不是[object]。
2、如果不是，只是弹出这个数组的字符串的话；
3、那就 var array=eval("("+array+")"); 再array[0]["title"]就能得到了。
4、返回的如果不是json格式的数组，那么需要转换成json格式jQuery.parseJSON(data);
关于jquery常见异步处理方法和jquery异步下载文件的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
