大家好，我是IT修真院北京总院第21期的学员杨梦桐，今天这篇文章主要总结了ajax的内容
1. 什么是Ajax
AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。
Ajax的概念由杰西·詹姆士·贾瑞特所提出，该技术的出现改变了古老的用户请求——等待——响应这种web交互模式。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
而传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
使用Ajax技术，可以节省网络带宽，提高页面的加载速度，从而缩短用户等待时间，改善用户体验。
2. Ajax与传统工作方式的对比
a. 传统的工作方式：传统的web应用程序中，用户向服务器发送一个请求，然后等待，服务器接受到用户的请求然后响应。在这段时间内，页面会进行整体刷新，产生一个等待新页面加载完成的时间，这是因为这种传输方式为同步处理方式。长久以来我们对这种web交互模式已经习惯了，并且以使用者的角度来讲已经觉得是理所当然的事情了。
b. Ajax的工作方式：和传统的web应用不同，Ajax采取了异步交互避免了用户请求-等待-应答交互方式的缺点。
Ajax在应用程序和服务器中引入了一个中间层---Ajax引擎，它是用Javascript编写的，在一个隐藏的框架中运行。Ajax引擎负责呈现用户界面，以及代表用户和服务器进行交互。Ajax引擎允许用户和服务器进行异步的交互。用户无需等待页面的整体重新加载。
3. Ajax会涉及到的问题和解决方案
a. 缓存问题
在IE浏览器下面使用get请求时，如果第一次请求了数据之后IE会自动缓存数据，如果下一次再发送同样的请求的时候浏览器会自动先去找缓存显示出来，所以如果请求的数据有变化的时候，这里是看不到变化的。
解决办法：
//xhr.open("get","xxxx.aspx?_dc="+new Date().getTime(),true);
就是在请求的后面 加上时间戳或是随机数，让url变成唯一，或者是，改成post请求。
b. 跨域问题
这是我们目前见到的最多的，也是最熟悉的一个问题。本地上面直接采用Nginx跨域实现。在服务器上实现跨域，可以通过后端达成，可参考《跨域有几种处理方式？》：http://www.cnblogs.com/fanyx/p/5775939.html
注意 Nginx跨域可以同时配置多个接口的，就是多写几个location就好了，然后location后面带的参数不一样就可以了。
c. Ajax乱码问题
乱码问题虽然我们目前遇到的不多，但是也属于比较常见的一个问题了。出现的主要原因就是编码不一致导致的。
如果出现乱码问题了，首先检查一下meta声明的charset要和请求的页面返回的charset一致。response.charset="gb2312 or utf-8"
d.使用post提交的时候需要进行的设置
//content-Type: application/x-www-form-urlencoded;
//jQuery中，
//content-Type: application/x-www-form-urlencoded;charset=utf-8;
//AngularJS中$http
//content-Type: application/json; charset=utf-8;
//使用原生Ajax需要在open以后才能使用xhr.setRequestHeader()方法，否则出错
//xhr.open("post","xxxx.aspx",true);
//xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
//用原生写时必须在open()方法之后send()方法之前调用
e. Ajax对象属性的大小写问题
有些浏览器比如火狐，对大小写是敏感的，if (xhr.readystate==4)这种写法，在IE下是成立的，但是在Firefox下就行不通了，因为IE不区分大小写，Firefox是区分大小的。标准写法为if (xhr.readyState==4)，同理还有属性
responseText，responseXML。
习惯采用驼峰形式的写法可以避免这个问题。
f. Ajax状态0的问题
有时候在测试Ajax代码的时候加了 xhr.status==200的判断后，一直不执行xhr.status==200的代码，这个就需要注意了。xhr.status==200是要通过服务器确认后来返回的，在服务器页面没有发生错误或者转向时才返回200状态的，此状态和你通过浏览器访问页面时服务器定义的状态一致。这个我们提前就跟后端对接好了，问题也不大。
4. Ajax的实际书写方式
a. jquery方法
//$.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("添加失败");
//}
//});
//}) ;
b. angularjs方法
//$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);
//});
c. JavaScript原生
//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请求还在继续...
//}
//}
ppt链接：https://ptteng.github.io/PPT/PPT/js-05-HowusePostman.html
视频链接：https://v.qq.com/x/page/f0533viwzwe.html
拓展问题
1. 异步更新有可能的报错
实际上在异步更新上，有可能因为请求速度导致存在先后顺序的内容更新不出来，可以将异步改成同步，就解决了这个问题
2. ajax为什么会乱码
这个和字符库有关，一般来说使用的字符库是utf-8，或者是gb2312，如果用记事本打开会产生ANSI的字符库，有可能导致乱码
3. success（）和then（）的区别
要将区别先弄清$http服务，它是对原生XMLHttpRequest对象的简单封装，是只能接受一个参数的方法，这个方法会返回一个promise对象，具有sccess和error两个方法。当然，我们也可以在响应返回时用then方法来处理，会得到一个特殊的参数，代表了对象的成功或失败信息，或者可以使用success和error回调代替
这样就很明晰了，then方法和success方法的主要区别就是，then方法会接受到完整的响应对象，信息更为全面，而success则会对响应对象进行析构，使用起来更为方便
由于在angularjs 1.5以后的版本里，更提倡使用then（），所以考虑在then里面进行if else判断，就可以分析实际反馈的内容
网友评论