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 函数里.

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000