//Ajax获取数据
var xhr = false;
xhr = new XMLHttpRequest();
xhr.open("POST", "GetData.aspx?case=" + document.getElementById("input2").value, true);
xhr.onreadystatechange = function() {
if (xhr.status == 200) {
if (xhr.readyState == 4) {
document.getElementById("txtHint").innerHTML = xhr.responseText;
//Ajax更新数据后需要重新绑定更新部分的事件
$(".table tr").mouseover(function() {
//如果鼠标移到class为stripe的表格的tr上时,执行函数
$(this).addClass("over");
}).mouseout(function() {
//给这行添加class值为over,并且当鼠标一出该行时执行函数
$(this).removeClass("over");
}) //移除该行的class
$(".table tr:even").addClass("alt");
$("table.table tr td img").click(function() {
layer.msg('继续学习');
});
$("#page1 img").mouseover(function() {
$(this).css("cursor", "pointer");
}).mouseout(function() {
//给这行添加class值为over,并且当鼠标一出该行时执行函数
}) //移除该行的class
$("div#page2 div ul li").mouseover(function() {
$("div#page2 div ul li").css("cursor", "pointer");
//$(this).addClass("over");
//$(this).css("border-width", "2px");
}).mouseout(function() {
//$(this).removeClass("over");
//$(this).css("border-width", "1px");
}) //移除该行的class
$("div#page2 div ul li").mousedown(function() {
setliBackgroundColor(this.id);
})
}
}
}
xhr.send(null);
}
转载http://www.cnblogs.com/qfcndtt/archive/2013/02/27/2935520.html
AJAX--前后台交互
注:ajax通过async参数决定是异步还是同步,false同步,true异步;
异步执行顺序是先执行后续动作,再执行success里代码;
同步是先执行success里代码,再执行后续代码;
验证:同步时数据量大是否会卡顿?例如从后台搜索大量数据时,页面是否卡死?
1、(异步)方法调用,后续代码不需要等待它的执行结果
后台<C#>:
using System.Web.Script.Services;
[WebMethod]
public static string GetStr(string str1, string str2)
{
return str1 + str2;
}
前台<JQuery>:
function Test(strMsg1,strMsg2)
{
$.ajax({
type: "Post",
url: "Demo.aspx/GetStr",
async: true,
//方法传参的写法一定要对,与后台一致,区分大小写,不能为数组等,str1为形参的名字,str2为第二个形参的名字
data: "{'str1':'"+strMsg1+"','str2':'"+strMsg2+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容
alert(data.d);
},
error: function(err) {
alert(err);
}
});
//隐藏加载动画
$("#pageloading").hide();
}
2、(同步)方法调用,可用于需要得到返回值是执行后续代码的前提
后台<C#>:
using System.Web.Script.Services;
[WebMethod]
public static string GetStr(string str1, string str2)
{
return str1 + str2;
}
前台<JQuery>:
function Test(strMsg1,strMsg2)
{
var str = “”;
$.ajax({
type: "Post",
url: "Demo.aspx/GetStr",
async: false,
//方法传参的写法一定要对,与后台一致,区分大小写,不能为数组等,str1为形参的名字,str2为第二个形参的名字
data: "{'str1':'"+strMsg1+"','str2':'"+strMsg2+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容
str = data.d;
},
error: function(err) {
alert(err);
}
});
return str;