是否可以使用 AJAX 和 JQuery 来使用 ASP.NET 增量加载网页。
我有一个网页，它运行 30 个查询；每个都针对不同的数据库（我的组织有大约 30 个数据库）。不幸的是，每个查询运行大约需要 7 秒（平均而言）。我已经花时间优化查询（它们最初平均需要大约 30 秒来运行每个查询）。
我希望网页：运行查询一并显示输出（网格视图），然后运行查询二并显示查询一和二的输出（网格视图），然后运行查询三并显示查询一、二的输出和三个等。最初我考虑使用 Response.Flush（见这个问题：Response.write and ASP.NET controls），但是 Guffa 说使用 Web 控件时这是不可能的。如何使用 AJAX、JQuery 等增量加载网页？
【问题讨论】：
标签： jquery asp.net ajax vb.net
是的，这是可能的。查询是否必须连续执行？如果没有，您可以并行运行所有查询。
每个 AJAX 调用都可以选择在成功完成后调用函数。当每个 AJAX 调用完成时，在该代码的底部指定返回数据格式和表示代码函数以及随后的 AJAX 调用。
以下代码示例是一个通用的 jQuery AJAX 数据库调用，可用于连续执行任意数量的数据库调用。它假定数据库有一个使用 JSON 响应的 HTTP POST API，因为您没有指定数据库使用的数据访问方法。
myfunction 参数指定数据库响应后将调用的函数。 myerrorfunction 参数指定错误处理程序。 myquery 参数指定 API 调用。 myparams 参数是要作为 URL 中的参数提供给 HTTP POST 的任意数量的逗号分隔参数的列表。它们采用 &p0=..&pn=
格式function apitofunction6(myfunction,myerrorfunction,myquery,myparams) {
var datstr = "";
var indx = 0;
var ajaxHandle;
if (myparams != null) {
for (indx = 0; indx < (arguments.length-3); indx++) {
datstr = datstr + "&p" + indx + "=" + encodeURIComponent(arguments[indx+3]);
}
}
ajaxHandle = $.ajax({
type: "POST",
url: "aqapi",
data: "howsmyapiq=" + myquery + datstr,
dataType: "json",
tryCount: 0,
retryLimit: 3,
complete: function sortdata() {},
success: function(myJSON,textStatus,jqXHR) {
myfunction(myJSON,textStatus,jqXHR);
},
error: function(jqXHR, textStatus, errorThrown) {
if (textStatus == 'timeout') {
this.tryCount++;
if (this.tryCount <= this.retryLimit) {
var retryHandle = $.ajax(this);
pendingFunction.push(retryHandle);
return retryHandle;
}
}
if (errorThrown == 'Authorization Required') {
window.location = "/login";
}
myerrorfunction(jqXHR, textStatus, errorThrown);
}
});
pendingFunction.push(ajaxHandle);
return ajaxHandle;
}
函数可以按如下顺序调用：
arResultIndex = apitofunction6(pc_myOnGet,pc_myOnFail,"ShowIncident3",SortOrder,Count,Offset);
function pc_myOnGet (myData,myTS,myJqXHR,datstr,myparams) {
//format and display data
//...
arResultIndex2 = apitofunction6(pc_myOnGet2,pc_myOnFail2,"ShowIncident4",SortOrder,Count,Offset);
}
function pc_myOnGet2 (myData,myTS,myJqXHR,datstr,myparams) {
//format and display data
//...
arResultIndex3 = apitofunction6(pc_myOnGet3,pc_myOnFail3,"ShowIncident5",SortOrder,Count,Offset);
}
【讨论】：
This example 使用 c#，但它可以很容易地适应您的目的。
基本上，您需要将页面分成几个部分。每个部分都会发出自己的请求，因此它将异步加载每个部分，而不是顺序加载每个部分然后显示它。
所以在你的主视图中，你可以有几个
<div class ="partialContents" data-url="/Controller/getData_1"></div>
<div class ="partialContents" data-url="/Controller/getData_2"></div>
<div class ="partialContents" data-url="/Controller/getData_3"></div>
<div class ="partialContents" data-url="/Controller/getData_4"></div>
客户端脚本类似于
$(document).ready(function(e){
$(".partialContents").each(function(index,item){
var url = $(item).data("url");
if(url && url.length > 0){
$(item).load(url);
}
});
});
【讨论】：