ajax页面异步加载的使用
使用ajax非常简单,通常有两种方法:(一般见第一种使用情况最多,也比较方便)
1.JQuery下的ajax调用
function()
{
.ajax({
type:"POST", //不同元素使用逗号隔开
url:http://www.baidu.com/Home/Index
data:{userName:"Danny",password:"123"},
success:function(){
...请求成功
}
error:function(){
...请求失败
}
})
2.普通javascript实现
(1)GET
var xmlhttp;
if (window.XMLHttpRequest)
{ // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else {
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","baidu.com?name=1&pwd=123",true);
xmlhttp.send();
(2)POST
xmlhttp.open("POST","baidu.com",true);
//如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
我们使用接口调用后端数据时,可能会得到浏览器缓存的结果,而不是发出新的请求,因为服务器缓存了请求的到的数据。(在使用ajax分页时,ajax只执行一次,请求到数据后,再点击不访问接口,原来是缓存的问题)
如果我们需要为每一次请求得到新的数据,可以通过给链接加一个时间戳或随机数来解决。url:"baidu.com/Home/Index?t="+Math.random(); 或者加一个请求时间。
(这就是我们经常见到请求加随机数的原因,在使用qq登录时,请求链接就加了随机数。当初不明白为什么加随机数,原来是为了使每次请求链接不同,防止浏览器直接访问缓存数据)
除了时间戳、随机数改变链接外,ajax可以使用cache:false来保证获得新数据。