AJax基础

什么是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、（完成）相应内容解析完成，可以在客户端调用了

优点

1. Ajax 最大的优点是无刷新数据读取：能在不刷新整个页面的前提下与服务器通信维护数据。更为迅捷地响应用户交互，避免了发送没有改变的信息，减少用户等待时间，带来非常好的用户体验；
2. 异步与服务器通信：AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量；
3. 前端和后端负载平衡：把一些服务器负担的工作转嫁到客户端，用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。这种“按需取数据”的方式，可最大程度的减少冗余请求和对服务器造成的负担，提升站点性能；
4. 界面与应用分离：Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、适用于现在的发布系统。

缺点

1. AJAX干掉了Back和History功能：动态更新的页面，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。解决方案是使用URL片断标识符（通常被称为锚点，即URL中#后面的location. hash）来保持跟踪；
2. AJAX的安全问题：Ajax技术对企业数据建立了一个直接通道。会暴露比以前更多的数据和服务器逻辑。并会隐藏客户端的安全扫描技术，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等；
3. 对搜索引擎支持较弱：对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。
4. 违背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")也可以设置发送到服务端数据编码格式（一般来说发送的编码格式跟服务端解析格式必须是一致的）