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来保证获得新数据。

posted @ 2017-12-22 17:15  BaizLi  阅读(9105)  评论(0编辑  收藏  举报