AJAX Asynchronous JavaScript and XML
XMLHttpRequest 对象
属性
readyState: 每当 readyState 改变时，就会触发 onreadystatechange 事件
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
responseText #服务器返回的响应文本
responseXml #服务器返回的响应xml
status #服务器的http状态码 200: "OK" 404: 未找到页面
statusText #服务器的http状态原因文本
onreadystatechange(){} #事件被触发 5 次（0 - 4），对应着 readyState 的每个变化
request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
request.onreadystatechange = function () { // 状态发生变化时，函数被回调
if (request.readyState === 4) { // 成功完成
// 判断响应结果:
if (request.status === 200) {
// 成功，通过responseText拿到响应的文本:
console.log(request.responseText);
} else {
// 失败，根据响应码判断失败原因:
console.log(request.status);
}
} else {
// HTTP请求还在继续...
}
}
function GetXmlHttpObject() {
var xmlHttp=null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
var xmlHttp=GetXmlHttpObject();
// 发送请求:
request.open('GET', '/api/categories');
request.send();
JSONP JSON with Padding
JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源
JSONP通常以函数调用的形式返回，返回JavaScript内容
先准备好函数，然后给页面动态加一个<script>节点，相当于动态读取外域的JavaScript资源，最后就等着接收回调了
1.首先在客户端注册一个callback, 然后把callback的名字传给服务器。
2.此时，服务器先生成 json 数据。
3.然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的callback参数值 .
4.最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
5.客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.
