分享人:朱士峰
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术。 Ajax的概念由杰西·詹姆士·贾瑞特所提出,该技术的出现改变了古老的用户请求——等待——响应这种web交互模式。 通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 而传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。 使用Ajax技术,可以节省网络带宽,提高页面的加载速度,从而缩短用户等待时间,改善用户体验。
传统的web应用程序中,用户向服务器发送一个请求,然后等待,服务器接受到用户的请求然后响应。 在这段时间内,页面会进行整体刷新,产生一个等待新页面加载完成的时间, 这是因为这种传输方式为同步处理方式。 长久以来我们对这种web交互模式已经习惯了,并且以使用者的角度来讲已经觉得是理所当然的事情了。
和传统的web应用不同,Ajax采取了异步交互避免了用户请求-等待-应答交互方式的缺点。 Ajax在应用程序和服务器中引入了一个中间层---Ajax引擎, 它是用Javascript编写的,在一个隐藏的框架中运行。Ajax引擎负责呈现用户界面, 以及代表用户和服务器进行交互。Ajax引擎允许用户和服务器进行异步的交互。用户无需等待页面的整体重新加载。
1、IE浏览器下面的缓存问题
2、跨域问题
3、Ajax对象属性的大小写问题
1. 缓存问题
在IE浏览器下面使用get请求时,如果第一次请求了数据之后IE会自动缓存数据,如果下一次再发送同样的 请求的时候浏览器会自动先去找缓存显示出来,所以如果请求的数据有变化的时候,这里是看不到变化的。
解决办法: 就是在请求的后面 加上时间戳或是随机数,让url变成唯一,或者是,改成post请求。 (get和post请求的区别可参见 浅谈HTTP中Get与Post的区别)
2. 跨域问题
这是我们目前见到的最多的,也是最熟悉的一个问题。本地上面直接采用Nginx跨域实现。在服务器上实现跨域, 可以通过后端达成,可参考跨域有几种处理方式?注意Nginx跨域可以同时配置多个接口的,就是多写几个location就好了, 然后location后面带的参数不一样就可以了。
3、Ajax对象属性的大小写问题
有些浏览器比如火狐,对大小写是敏感的,if (xhr.readystate==4)这种写法, 在IE下是成立的, 但是在Firefox下就行不通了,因为IE不区分大小写,Firefox是区分大小的。标准写法为if (xhr.readyState==4),同理还有属性 responseText,responseXML。 习惯采用驼峰形式的写法可以避免这个问题。
$.ajax({
url:"student-ajax/student",
type:"POST",
dataType:"json",
data:{
name:$("#names").val(),
qq:$("#QQs").val(),
},
success:function(data){
console.log(data);
if(data.code === 200){
alert($("#names").val() + "学员信息" +data.message);
}else{
alert(data.message);
}
},
error:function(data){
console.log(data);
alert("添加失败");
}
});
}) ;
$http({
method:'get',
url:('/a/a/all/document?type=1&page='+$scope.page),
headers:{'Content-Type':'application/x-www-form-urlencoded'}
})
.success(function (response) {
console.log(response.total);
console.log(response);
// if (response.message === "查询成功") {
$scope.userList = response.data;
$scope.userTotal = response.total;
$scope.page=response.page;
// console.log($scope.userList.total);
});
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象;
request.onreadystatechange = function () { // 状态发生变化时,函数被回调;
if (request.readyState === 4) { // 成功完成
// 判断响应结果:
if (request.status === 200) {
// 成功,通过responseText拿到响应的文本:
return success(request.responseText);
} else {
// 失败,根据响应码判断失败原因:
return fail(request.status);
}
} else {
// HTTP请求还在继续...
}
}
// 发送请求:
request.open("POST","/skill-ajax/a/login",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send();
alert('请求已发送,请等待响应...');
// readyState值说明
// 0,初始化,XHR对象已经创建,还未执行open
// 1,载入,已经调用open方法,但是还没发送请求
// 2,载入完成,请求已经发送完成
// 3,交互,可以接收到部分数据
// status值说明
// 200:成功
// 404:没有发现文件、查询或URl
// 500:服务器产生内部错误
要将区别先弄清$http服务,它是对原生XMLHttpRequest对象的简单封装,是只能接受一个参数的方法,这个方法会返回一个promise对象, 具有sccess和error两个方法。当然,我们也可以在响应返回时用then方法来处理,会得到一个特殊的参数,代表了对象的成功或失败信息,或者可以使用success和error回调代替。 这样就很明晰了,then方法和success方法的主要区别就是,then方法会接受到完整的响应对象,信息更为全面,而success则会对响应对象进行析构,使用起来更为方便。
参考一:什么是跨域
参考三: Ajax常见问题
感谢大家观看
BY : 朱士峰