Ajax全程异步的JS和XML。主要作用就是在不加载整个页面的情况下,通过和后台数据交互实现对页面的部分更新
通过JQ可以轻松的实现Ajax。
一、JQuery.ajax();
调用形式:$.ajax();
ajax具有多种参数,其中包括:
1.async
类型:Boolean
默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。
注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
2.data
类型:String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。
3.type
类型:String
默认值: “GET”)。请求方式 (“POST” 或 “GET”), 默认为 “GET”。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
4.url
类型:String
默认值: 当前页地址。发送请求的地址。
5.success
类型:Function
请求成功后的回调函数。
参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。
这是一个 Ajax 事件。
$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}});
二、load()方法是强大的AJAX方法·。load()方法从服务器加载数据并将返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
其中callback函数中又有三个参数:
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态,只有success和error两个值。
xhr - 包含 XMLHttpRequest 对象。
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
三、JQ的get和post方法用于通过HTTP GET 或POST请求从服务器请求数据。
$.get(URL,callback);
$.post(URL,data,callback);
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
以上内容多来自W3school,部分来自本人的笔记。