AJAX 与 JSONP

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内容
先准备好函数，然后给页面动态加一个