AJAX
AJAX,即 Asynchronous(异步的) JavaScript and XML。
AJAX不是一门新的语言，而是对现有技术的综合运用。
其本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换，AJAX可以使网页实现异步更新。即在不重载整个网页面的情况下，对网页的某部分进行更新。
AJAX 的好处
AJAX 可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验：按需获取数据，节约宽带资源。
AJAX 的缺点
- AJAX 不支持浏览器的 back 按钮。
- 安全问题。AJAX 暴露了与服务器交互的细节。
- 对搜索引擎的支持比较弱。
- 破坏了程序的异常机制
异步
指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序，不依赖程序本身的书写顺序，相反则为同步。其优势在于不阻塞程序的执行，从而提升整体的执行效率。
实现异步加载的方式
- defer 只支持ie
<script type="text/javascript" defer="defer"></script>
- async html5的属性
<script type="text/javascript" src="" async="async"></script>
- 动态创建script
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
};
}
script.src = url;
document.body.appendChild(script);
}
- 由于javascript的动态性，还有很多异步加载的方法：XHR Injection、XHR Eval、Script In Iframe、Script defer属性等等。
- XHR Injection（XHR 注入）：通过XMLHttpRequest来获取javascript，然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。
另外：实现异步编程有哪些方式。（摘自Javascript异步编程的4种方法）
- 回调函数 callback
function f1(callback){
setTimeout(function () {
//f1的任务代码
callback();
},1000);
}
回调函数的优点是简单，易理解和部署，缺点是不利于代码阅读和维护，各部分之间高度耦合，流程会很混乱，而且每个任务只能指定一个回调函数。
- 事件监听
f1.on('done', f2);
function f1() {
setTimeout(function () {
//f1的任务代码
f1.trigger('done');
}, 1000);
}
这种方法的优点是比较容易理解，可以绑定多个事件，每个事件可以指定多个回调函数，而且可以“去耦合”，有利于实现模块化。缺点是整个程序都要变成事件驱动型，运行流程会变得很不清晰。
- 发布/订阅
采用的是Ben Alman 的 Tiny Pub/Sub
jQuery.subscribe("done", f2);
function f1() {
setTimeout(function () {
//f1的任务代码
jQuery.publish("done")
}, 1000);
}
发布/订阅模式（public-subscribe pattern），又称观察者模式（observer pattern）。
f1执行完成后向信号中心发布done信号，从而引发f2的执行。
f2执,行完成后可以取消订阅。
jQuery.unsubscribe("done", f2);
这种方法的性质和“事件监听”类似，但是明显优于后者。因为我们可以通过查看“消息中心”。了解存在多少信号、每个信号有多少订阅者，从而监控程序的运行。
- Promise对象
ES6是由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。
从语法上说，Promise是一个对象，可以获取异步操作的结果，它有三种状态。
- Pending（进行中）
- Resolved（已完成，又称Fulfilled）
- Rejected（已失败）
只有异步操作的结果，可以决定当前是哪一种状态。
一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能： - 从 Pending 变为 Resolved。
- 从 Pending 变为 Rejected。
var promise = new Promise(function(resolve, reject) {
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
promise.then(function(value) {
// success
}, function(error) {
// failure
});
扯远了...
同步异步的区别
- 同步：阻塞的
浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示页面。 - 异步：非阻塞的
浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新。
XMLhttpRequest
XMLhttpRequest可以以异步方式的处理程序。
浏览器内建对象，用于在后台与服务器通信（交换数据），由此我们便可实现对网页的部分更新，而不是刷新整个页面。
一个基本的例子：
//实例化
var xhr = new XMLHttpRequest();
//发起一个http请求
xhr.open('get', 'index.php');
xhr.send(null);
//接收服务器响应
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
var result = document.querySelector('.result');
result.innerHTML = xhr.responseText
}
}
请求
XMLHttpRequest 本质基于 HTTP 协议实现通信。HTTP 请求 3 个组成部分与 XMLHttpRequest 方法的对应关系：
- 请求行
xhr.open('get', 'index.php')
- 请求头(get 请求可以不设置)
xhr.setRequestHeader('Content-Type', 'text/html');
- 请求主体
xhr.send(null);
响应
HTTP响应 3 个组成部分与 XMLHttpRequest 方法或属性的对应关系。
由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
var result = document.querySelector('.result');
result.innerHTML = xhr.responseText;
}
}
onreadystatechange 是 Javascript 的事件的一种，其意义在于监听 XMLHttpRequest 的状态。
- 获取状态行（包括状态码和状态信息）
xhr.status
xhr.statusText
- 获取响应头
//获取指定头信息
xhr.getResponseHeader('Content-Type');
//获取所有响应头信息
hr.getAllResponseHeaders();
- 响应主体
xhr.responseText；
xhr.responseXML;
我们需要检测并判断响应头的 MIME 类型后确定使用 request.responseText 或者 request.responseXML.
创建一个 ajax
var xhr = null;//创建对象
if (window.XMLHttpRequest) {
xhr = new XHLHttpRequest();
}else {
xhr = new ActiveXObject("Microsoft.XMLHTTP")；
}
xhr.open("方式", "地址", "标志位");//初始化请求
xhr.setRequestHeader("","")//设置相应头信息
xhr.onreadystatechange = function () {}//指定回调函数
xhr.send();//发送请求
简述ajax的过程
- 创建 XMLHttpRequest 对象，也就是创建一个异步调用对象。
- 创建一个新的 HTTP 请求，并指定该 HTTP 请求的方法、URL 及验证信息。
- 设置响应 HTTP 请求状态变化的函数。
- 发送 HTTP 请求
- 获取异步调用返回的数据
- 使用 JavaScript 和 DOM 实现局部刷新
get 和 post 请求方式的差异
- get 请求没有请求主体，使用 xhr.send(null)。
- get 可以通过在请求 URL 上添加请求参数。
- post 可以通过 xhr.send('name=i&age=10')。
- post 需要设置请求头 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
- get 效率更好（应用比较多）。
- get 大小限制约 4K，post则没有限制。
get 和 post 的区别，什么时候使用 post 请求
- get：一般用于信息获取，使用 URL 传递参数，对所发信息的数量也有限制，一般在 2000 个字符，有的浏览器是 8000 个字符。
- 一般用于修改服务器上的资源，对所发送的信息没有限制。
以下情况中，使用post 请求：- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（post 没有数据量限制）
- 发送包含未知字符的用户输入时，post 比 get 更稳定也更可靠。
jquery 中的 ajax
- $.ajax({}) 可配置方式发起 Ajax 请求。
- $.get() 以 get 方式发起 Ajax 请求。
- $.post() 以 post 方式发起ajax请求。
- $('form').serialize() 序列化表单（即格式化 key=val&key=val)
- url 接口地址
- type 请求方式
- timeout 请求超时
- dataType 服务器返回格式
- data 发送请求数据
- beforeSend:function(){} 请求发起前调用
- success 成功响应后调用
- error 错误响应时调用
- complete 响应完成时调用（包括成功和失败）
最后
忽然发现已经忘了 ajax 的一些理论基础方面的知识了... 面试忽然问起，恩，懵住了... 所以学习嘛，还是要时常复习。
