1. 绪论：
AJAX技术的核心为XHR(XMLHttpRequest)对象
AJAX功能：向服务器请求额外的数据而无需卸载页面，带来更好的用户体验。
2. XHR对象：
XHR对象功能：取得新数据，并通过DOM将新数据插入到页面中。
如何创建：
var xhr = new XMLHttpRequest();
2.1 XHR用法：
A. 首先调用open()启动一个请求准备发送，接收的三个参数为请求类型、url、是否异步；
B. send()为发送特定的请求，如果不需要请求方发送数据，则为null；
C. 收到相应后，相应的数据填充到xhr对象的属性中：
responseText : 作为响应的主体被返回的文本
responseXML: 若响应内容未XML类型，则保存响应的XML DOM 文档
status:响应的HTTP状态
status:对上述HTTP状态的说明
响应成功的标志：HTTP状态为200到300之间，或者为304（资源未修改）
同步请求：
var xhr=new XMLHttpRequest();
xhr.open("get","15.html",false);
xhr.send(null);
if((xhr.status>=200 && xhr.status<300) || xhr.status==304){
alert(xhr.responseText)
}
else {
alert("请求失败")
}
异步请求：让JS继续执行，不需要等待响应。
通过检测xhr对象的readyState属性查看请求和响应的当前活动阶段：
0：未初始化，还没有调用open
1:启动，调用open,没有调用send
2：发送，调用send,还没有收到响应
3：接收，接收到部分响应数据
4：完成，接收到全部数据
readyState值的变化会触发readystatechange事件，从而通过监听该事件来判断是否接收完成。
var xhr=new XMLHttpRequest();
xhr.open("get","15.html",true);
xhr.send(null);
xhr.onreadystatechange=function () {
if(xhr.readyState==4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText)
}
else {
alert("请求失败")
}
}
}
2.2 HTTP头部信息：
每个HTTP请求和响应都有头部信息。
头部信息包含了浏览器的一些设置，比如浏览器能够处理的内容类型、浏览器能够显示的字符集等。还包括请求页面所在的域，请求页面的URI等等。
设置头部信息：
头部信息可以通过xhr对象的setRequestHeader()设置自定义的头部信息，位置必须在open之后send之前。
xhr.open("get","15.html",false);
xhr.setRequestHeader("myii","lingyun");
xhr.send(null);
获取头部信息：
var getMYII=xhr.getResponseHeader("myii");
var getALL=xhr.getAllResponseHeaders();
2.3 GET请求
向服务器获取信息。
其中请求的URL中的?后面放置传递的参数，参数间用&连接。
向URL中添加参数的函数：
function addURLParam(url,name,value) {
if(url.indexOf("?")==-1){
url+="?"
}else {
url+="&"
}
url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
return url;
}
2.4 POST请求
向服务器发送应该保存的数据。
向服务器提交表单数据：
function submitData() {
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function () {
if(xhr.readyState==4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText)
}
else {
alert("请求失败")
}
}
};
xhr.open("post","url","true");
xhr.setRequestHeader("Content-Type","application/x-www-fowm-urlencoded");//http头部信息，内容类型
var form=document.getElementById("form");
xhr.send(serialize(form));//表单序列化
}
3. XMLHttpRequest 2级
对一级的进一步扩展。
3.1 FormData
为序列化表单以及创建与表单格式相同的数据提供了便利。
xhr.open("post","url","true");
xhr.setRequestHeader("Content-Type","application/x-www-fowm-urlencoded");//http头部信息，内容类型
var form=document.getElementById("form");
xhr.send(new FormData(form));//表单序列化
3.2 超时设定
XHR对象有timeout属性，当超过该值时，浏览器没有收到响应，则触发ontimeout事件。
xhr.open("get","url","true");
xhr.timeout=1000;
xhr.ontimeout=function () {
alert("请求超时")
};
xhr.send(null);
4. 进度事件
进度事件是客户端服务器通信相关的事件，只针对XHR操作。
总共有6个进度事件：
loadstart: 接收响应数据的第一个字节时触发；
progress：接收响应期间持续不断的触发；
error:请求发生错误触发；
abort:调用abort()方法终止连接时触发；
load:接收到完整响应数据触发；
loadend:通信完成或者触发error abort load事件后触发。
5. 跨源资源共享CORS：
通过XHR实现AJAX通信的限制：跨域安全策略。
CORS定义了在跨域请求时，浏览器与服务器应该如何沟通。
基本思想：在HTTP头部自定义源信息（协议、域名、端口），从而决定请求或响应是否应该成功。
发送请求时，在头部添加orgin头部，包含请求页面的源信息，以便服务器根据头部信息确实是否响应。
需要在服务器端设定Http头部信息，JS操作不了。
Access-Control-Allow-Origin: http://wwww.nca.net
除了IE之外，其他浏览器的XHR对象实现了对CORS的原生支持，无需编写额外代码。
6. 其他跨域技术：
6.1 图像Ping
单向通信，常用于跟踪用户点击页面或者动态广告的曝光次数。
var image=new Image();
image.onload=image.onerror=function () {
alert("加载完毕")
};
image.src="http://photocdn.sohu.com/20160720/Img460039751.jpeg";
6.2 JSONP
JSONP即被包含在函数调用中的JSON：
callback({"name" : "guo"})
JSONP由两部分组成：回调函数和数据。
JSONP通过动态script元素使用，因为script与img元素类似，有能力不受限制跨域访问。
6.3 Comet
服务器向页面推送数据。
应用场景：需要实时更新的数据，体育比赛分数、股票报价等。
实现方式：长轮询和流。
长轮询：浏览器发送请求后，服务器不会立即响应，而是等待数据更新后再响应。然后浏览器再立即请求。
Paste_Image.png
流：流与轮询不同的是它只使用一个HTTP连接，浏览器发送一次请求后，服务器会保持这个连接打开，周期性的发送数据。
6.4 服务器发送事件SSE
SSE是围绕Comet推出的API。
6.5 Web Sockets
提供了全双工（双方可以同时传递信息）、双向通信的信道。使用自定义的协议，不适用HTTP协议。
在JS中创建Web Socket后，当取得服务器响应后，连接会由HTTP协议变为Web Socket协议。
使用Web Socket协议而非HTTP协议的好处为：在客户端和服务器之间发送很少量的数据，减少HTTP字节级的开销。
var socket=new WebSocket("ws://www.example.com/server.php");
socket.send("hello");
网友评论