标签:
优势:
不需要插件支持 优秀的用户体验 提高Web程序的性能 减轻服务器和宽带的负担
不足:
浏览器对XMLHttpRequest对象的支持不足
破坏浏览器“前进”和“后退”的正常功能
对搜索引擎的支持的不足
Load()方法
load()方法是jquery中最为简单和常用的ajax方法,能载入远程的HTML代码并插入到DOM中。
它的结构为: load(url[,data][,callback]])
url string类型 请求HTML页面的URL地址
data object类型 发送至服务器的KEY/VALUE数据
callback function类型 请求完成时的回调函数,无论请求成功或失败
load()方法的URL参数的语法结构为:“url selector”。注意,URL和选择器之间有一个空格
$("div").load("GetOrPost.ashx", { "id": "8" }, function (data,status,httpRequst) { alert(data); //请求返回的内容
alert(status); //请求状态:success,error
alert(httpRequst); /XMLHttpRequest对象
});
Load()方法的传递方式根据参数data来自动指定。
如果没有参数传递,则采用GET方式传送;
反之,则会自动转换为POST方式。
通用:Request["id"]
get:Request.QueryString["id"]
post:Request.Form["id"]
回调参数
对于必须在加载完成后才能继续的操作,load()方法提供了回调函数callback,该函数有三个参数,分别代表请求返回的内容、请求状态、和XMLHttpRequest对象。
在jquery中提供了GET和POST两个方法。
$.get(url[,data][,callback]);
$.post(url[,data][,callback][,type]);
url 发送的地址
Data 要发送的数据
Callback 回调函数
Type 期待服务器所返回的类型(text,xml等等)
//get传递 $("#Button1").click(function () { var val = $("#txt").val(); $.get("GetOrPost.ashx", { "txt": val }, function (data) { var dd = "<div>" + data + "</div>"; $("#result").append(dd); }) }); //指定post传递 $("#Button2").click(function () { var val = $("#txt").val(); $.post("GetOrPost.ashx", { "txt": val }, function (data) { var dd = "<div>" + data + "</div>"; $("#result").append(dd); }) });
设置ajax细节
$.ajax(option)方法设置ajax的细节部分
$.ajax({
type:"GET", //请求类型
url:"server.aspx", //请求地址
data:createQueryString(), //参数字符串
success:function(data){ //异步交互成功时使用的回调方法
$("#serverResponse").html(decodeURI(data));
}
});
//Ajax控制 $("#Button3").click(function () { var val = $("#txt").val(); $.ajax({ url: "GetOrPost.ashx", type: "get", data: {"txt":val}, success: function (data) { var dd = "<div>" + data + "</div>"; $("#result").append(dd); } }) })
全局设定ajax
$.ajaxSetup(option)方法设置ajax的全局属性
$.ajaxSetup({ //全局设置 把相同的类容进行了封装
url:"server.aspx",//请求的页面地址
success:function(data){ //异步交互成功时使用的回调方法
$("#serverResponse").html(decodeURI(data));
}
});
function doRequestUsingGET(){
$.ajax({
type:"GET",//请求类型
data:createQueryString()//参数字符串
})
};
//全局设置 $.ajaxSetup({ url: "GetOrPost.ashx", success: function (data) { var dd = "<div>" + data + "</div>"; $("#result").append(dd); } })
//全局里面有的就不用写 $("#Button4").click(function () { var val = $("#txt").val(); $.ajax({ type: "get", data: { "txt": val } }) }) $("#Button5").click(function () { var val = $("#txt").val(); $.ajax({ type: "post", data: { "txt": val } }) })
标签:
原文地址:http://www.cnblogs.com/Sea1ee/p/5931554.html