大家好，我是IT修真院郑州分院王姣妍，一枚正直、纯洁、善良的web程序员。
今天给大家分享一下，修真院官网 js任务中可能会使用到的知识点：
什么是AJAX？
一、背景介绍
AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
二、知识剖析
传统的请求方式
传统的web应用程序中，用户向服务器发送一个请求，然后等待，服务器接受到用户的请求然后响应。在这段时间内，用户会傻乎乎
的盯着一个空白页面看。这是因为以往的传输方式为同步处理方式。长久以来我们对这种web交互模式已经习惯了，并且以使用者的角度来讲已经觉得是理所当然的事情了。
传统的请求方式
和传统的web应用不同，Ajax采取了异步交互避免了用户请求-等待-应答交互方式的缺点。
Ajax在应用程序和服务器中引入了一个中间层---Ajax引擎，它是用Javascript编写的，在一个隐藏的框架中运行。Ajax引擎负责呈现用户界面，
以及代表用户和服务器进行交互。Ajax引擎允许用户和服务器进行异步的交互。用户无需傻乎乎的盯着空白页面。
三、常见问题
1、IE浏览器下面的缓存问题
2、跨域问题
3、Ajax乱码问题
4、使用post提交的时候需要设置content-type为"application/x-www-form-urlencoded"
5、Ajax对象属性的大小写问题
四、解决方案
第一个问题，缓存问题：
在IE浏览器下面使用get请求时，如果第一次请求了数据之后IE会自动缓存数据，如果下一次再发送同样的
请求的时候浏览器会自动先去找缓存显示出来，所以如果请求的数据有变化的时候，这里是看不到变化的。
解决办法： xhr.open("get","xxxx.aspx?_dc="+new Date().getTime(),true);
就是在请求的后面 加上时间戳_dc=...让url变成唯一，或者是，改成post请求。
第二个问题，跨域问题：我们先回顾一下域名地址的组成：
http:// www . google : 8080 / script/jquery.js
http:// （协议号）
www （子域名）
google （主域名）
8080 （端口号）
script/jquery.js （请求的地址）
* 当协议、子域名、主域名、端口号中任意一各不相同时，都算不同的“域”。
* 不同的域之间相互请求资源，就叫“跨域”。
本地上直接采用Nginx跨域实现，还有jsonp跨域。在服务器上的话，交给后端吧。。。
注意Nginx跨域可以同时配置多个接口的，就是多写几个location就好了，然后location后面带的参数不一样就可以了。
第三个问题：Ajax乱码问题
乱码问题虽然我们目前遇到的不多，但是也属于比较常见的一个问题了。出现的主要原因就是编码不一致导致的。
如果出现乱码问题了，首先检查一下meta声明的charset要和请求的页面返回的charset一致。response.charset="gb2312 or utf-8"
写法：header('Content-Type:text/html;charset=GB2312')
第四个问题：
使用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")
第五个问题：Ajax对象属性的大小写问题
有些浏览器比如火狐，对大小写是敏感的，if (xhr.readystate==4)这种写法，
在IE下是成立的，但是在火狐下就行不通了，因为IE不区分大小写，火狐是区分大小的。标准写法为
if (xhr.readyState==4)，同理还有属性responseText，responseXML。习惯采用驼峰形式的写法可以避免这个问题。
五、编码实战
Javascript原生方法
var request = new XMLHttpRequest(); //新建XMLHttpRequest对象;
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xml=new XMLHttpRequest();
}else{// IE6, IE5 浏览器执行代码
xml=new ActiveXObject("Microsoft.XMLHTTP");}
request.onreadystatechange = function () { //状态发生变化时，函数被回调;if (request.readyState === 4) { //成功完成 if (request.status === 200) { //成功，通过responseText拿到响应的文本:return success(request.responseText);
} else {return fail(request.status);//失败，根据响应码判断失败原因:
}
//发送请求:
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:服务器产生内部错误
JQuery方法
$.ajax({
url:"/carrots-admin-ajax/a/login",
type:"POST",
dataType:"json",
data: {
name:$("#name").val(),
pwd:$("#code").val()
},
success:function (data) {
console.log(data);
if (data.code ===200) {
alert( data.message);
}else {
alert(data.message);
}
},
error:function (data) {
console.log(data);
alert("添加失败");
}
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(12345);
console.log(response.total);
console.log(response);
console.log(aaa);
// if (response.message === "查询成功") {
$scope.userList = response.data;
$scope.userTotal = response.total;
$scope.page=response.page;
// console.log($scope.userList.total);
});
六、扩展思考
Ajax请求中,get和post方法的区别?
什么时候用get，什么时候用post？
最简单的区别：
1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来
2.使用Get请求发送数据量小,Post请求发送数据量大
3.get请求需注意缓存问题,post请求不需担心这个问题
4.用get方式时，xmlHTTP.send(),用post时，xmlHTTP.send(参数)
用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的header传送），也就是说，
浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是，
它会被客户端的浏览器缓存起来，那么，别人就可以从浏览器的历史记录中，读取到此客户的数据，比如帐号和密码等。
因此，在某些情况下，get方法会带来严重的安全性问题。
get请求
//添加参数,以求每次访问不同的url,以避免缓存问题
xmlHttp.open("get", "Server.aspx?username=" + encodeURIComponent(username)+ "&age=" +encodeURIComponent(age) + "&random=" + Math.random());
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("result").innerHTML = xmlHttp.responseText;
}
}
//发送请求,参数为null
xmlHttp.send();
post请求
//不用担心缓存问题
xmlHttp.open("post", "Server.aspx", true);
//必须设置,否则服务器端收不到参数
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("result").innerHTML = xmlHttp.responseText;
}
}
//发送请求,要data数据
xmlHttp.send(data);
如何选择?
1、 对于以后用到的增删改查
GET对应的是“获取数据”，比如搜索框用的是 GET
POST对应的是“新增数据”，比如发贴，回复的form用的是POST
2、在以下情况请使用 POST请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST没有数据量限制）
发送包含未知字符的用户输入时，POST比 GET更稳定也更可靠
七、参考文献
参考一：AJAX工作原理
参考二：AJAX-核心XHR对象
参考三：AJAX常见问题
八、更多讨论
1、Q：针对于ajax轮询 每隔五秒发一次请求到服务器，本来一切正常，但是遇到网络不好的情况，连发几次请求，会被卡住，一股脑返回几次重复数据 有什么解决的方法么？
A：轮询（polling）：客户端按规定时间定时向服务端发送ajax请求，服务器接到请求后马上返回响应信息并关闭连接。
加入定时器：
window.setTimeout(function(){$.ajax(getting)},1000)
加入判断，如果得到自己想要的数据就跳出
2、Q：怎样合理地使用 Ajax ？过度使用 Ajax 会有哪些弊端？
A：链接：https://www.zhihu.com/question/20410763/answer/15067342
1、页面上首次显示的内容尽量不要用 Ajax，显示更多（或换页）的时候再用，比如说知乎首页的第一页 Timeline 上的问题是直接从服务器读取的，并写入在当前的页面源代码里面的，而随后 “显示更多” 得到的内容才是用 Ajax 读取。
2、切换页面的时候不用要 Ajax
3、不要因为网页的 header 或者 side 部分没有变化而用 Ajax。因为这是不同的页面，换句话说，是有完全不同的内容或者完全不同的页面逻辑。他们的 URL 就应该不同。
4、提交、修改、删除的部分一般用 Ajax，消息提醒的部分一般用 Ajax，因为很有可能会用到 Comet 长连接来保证消息的实时推送，那么除了 WebSocket 之外最好的选择只有 Ajax。
5、编码的时候模块分工明确，比如使用了 jQuery，那么所有的 Ajax 请求都最好做一层包装，然后再转移给 $.post 或者 $.ajax 之类的方法。
弊端：对搜索引擎的支持不好；没有一个好的IDE编写JS太困难，容易出错，同时这种模式会非常的占用IE的内存；调试困难
3、Q：status=200是什么意思？
A：这是状态码，下面是以数字开头的状态码，详细的请参照http://tool.oschina.net/commons?type=5
1**：请求收到，继续处理
2**：操作成功收到，分析、接受
3**：完成此请求必须进一步处理
4**：请求包含一个错误语法或不能完成
5**：服务器执行一个完全无效效请求失败
八、
PPT链接：PPT
视频链接：
undefined_腾讯视频
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
网友评论