什么是Ajax
Ajax是用JavaScript执行异步网络请求，请求是异步执行的，也就是说，要通过回调函数获得响应。在现代浏览器上写AJAX主要依靠XMLHttpRequest对象：
'use strict';
function success(text) {
var textarea = document.getElementById('test-response-text');
textarea.value = text;
}
function fail(code) {
var textarea = document.getElementById('test-response-text');
textarea.value = 'Error code: ' + code;
}
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('GET', '/api/categories');
request.send();
alert('请求已发送，请等待响应...');
当创建了XMLHttpRequest对象后，要先设置onreadystatechange的回调函数。在回调函数中，通常我们只需通过readyState === 4判断请求是否完成，如果已完成，再根据status === 200判断是否是一个成功的响应。
XMLHttpRequest对象的open()方法有3个参数，第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。注意，千万不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。
最后调用send()方法才真正发送请求。GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。
readyState属性：请求状态
0、（未初始化）还没有调用open()方法
1、（载入）已调用send()方法，正在发送请求
2、（载入完成）send()方法完成，已收到全部相应内容
3、（解析）正在解析相应内容
4、（完成）相应内容解析完成，可以在客户端调用了
优点
- Ajax 最大的优点是无刷新数据读取：能在不刷新整个页面的前提下与服务器通信维护数据。更为迅捷地响应用户交互，避免了发送没有改变的信息，减少用户等待时间，带来非常好的用户体验；
- 异步与服务器通信：AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量；
- 前端和后端负载平衡：把一些服务器负担的工作转嫁到客户端，用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。这种“按需取数据”的方式，可最大程度的减少冗余请求和对服务器造成的负担，提升站点性能；
- 界面与应用分离：Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、适用于现在的发布系统。
缺点
- AJAX干掉了Back和History功能：动态更新的页面，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。解决方案是使用URL片断标识符（通常被称为锚点，即URL中#后面的location. hash）来保持跟踪；
- AJAX的安全问题：Ajax技术对企业数据建立了一个直接通道。会暴露比以前更多的数据和服务器逻辑。并会隐藏客户端的安全扫描技术，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等；
- 对搜索引擎支持较弱：对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。
- 违背URL和资源定位的初衷：你在一个URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
Ajax在JQ和JS中的区别
jquery是将原生的JS封装了的，不同浏览器对Ajax的实现可能不一样，jQuery解决了兼容问题，让我们用同一种方式调用；接口更清晰好用，比如jquery把jsonp（其实是通过script标签绕过同源策略）封装的就像一个普通的ajax请求。
Ajax修改获取header：
利用xmlHttp.setRequestHeader来设置request请求头：例如：xmlHttp.setRequestHeader('cache-control','no-cache');
利用xmlHttp.getResponseHeader来获取response头信息;例如：xmlHttp.getResponseHeader("Date")；
另外 request.setCharacterEncoding("UTF-8")也可以设置发送到服务端数据编码格式（一般来说发送的编码格式跟服务端解析格式必须是一致的）
网友评论