AJax

第一步/获取浏览器内置的ajax请求对象

//如果不适配IE5/IE6这种很老版本的浏览器的话
Ajax.js function createAjax() {
   var xhr = new XMLHttpRequest();
   return xhr;
}

//适配IE5/IE6
Ajax.js function createAjax() {
   var xhr ; 
   if(window.XMLHttpRequest){ 
          //所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。
        xhr = new XMLHttpRequest();
   }else { //老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
       xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
   } 
   return xhr;
}

第二步/ 使用xhr对象
1、使用这个XHR对象作同步的get请求

var xhr = new XMLHttpRequest();
xhr.open('get', 'url', false);
xhr.send(null);
if (xhr.status >= 200 && xhr.status < 300) || xhr.status(304) 
{
 alert(xhr.responseText);
} else {
 alert('Request was unsuccessful' + xhr.status);
}

首先用第一步的方法创建出一个xhr对象
然后调用xhr对象的open方法发起一个请求：xhr.open('get', 'example.php', false);第一个参数是请求类型（get/post）,第二个参数是请求的url路径，第三个参数代表是否是异步请求（true-异步，false-同步）；
在然后就是调用xhr的send方法发送数据：xhr.send(null);也可以把数据拼接在url后面，比如：usl？username=root&passwrod=123
最后通过xhr的status属性判断是否发送成功：200 表示成功， 304 表示缓存，其他表示返回失败。

2、使用这个XHR对象作异步的get请求

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() { 
if (xhr.status === 4) {
 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
 alert(xhr.responseText);
 } else {
 alert('Request was unsuccessful' + xhr.status);
 }
 }
};
xhr.open('get', 'example.txt', true);
xhr.send(null);

Ajax 请求都是异步发送的，这个时候我们需要用到另外一个 XHR 对象的属性 readtstatechange
，通常当它的值为 4 的时候，表示所有数据已经接受到了。

3、使用这个XHR对象作Post请求

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
   if (xhr.status === 4) {
       if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304)
       {
         alert(xhr.responseText);
       } else { 
        alert('Request was unsuccessful' + xhr.status); 
      } 
  }
};
xhr.open('post', 'example.php', true);
var form = document.getElementById('user-info');
xhr.send(serialize(form));

POST 请求是把数据作为请求的主体去提交的，所以我们的数据一般是在 send方法里面发出的

serialize()方法通过序列化表单值，创建标准的URL编码文本字符串，它的操作对象是代表表单元素集合的jQuery 对象。你可以选择一个或多个表单元素（比如input或文本框），或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中

第三步/ 关于send方法发送数据
1、用于发送数据的FormData类

var data = new FormData();
data.append('name', 'Steven');
xhr.send(data);

2、serialize方法序列化表单
可以选择一个或多个表单元素（比如input或文本框），或者 form 元素本身

var form = document.getElementById('user-info');
xhr.send(serialize(form));

重要的一点：
跨域请求
然而 Ajax 并不是万能的，有时候我们想要异步获取其他网站的数据的时候，就会返回失败，这是因为 XHR 对象只能访问与包含它页面位于同一个域中的资源。那我们要怎么办呢？
CORS
跨源资源共享标准通过新增一系列 HTTP 头，让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源。主要有三种：
通过使用 Origin 和 Access-Control-Allow-Origin 就可以完成最简单的跨站请求。不过 Access-Control-Allow-Origin 需要为 * 或者包含由 Origin 指明的站点。

“预请求”要求必须先发送一个 OPTIONS 请求给目的站点，来查明这个跨站请求对于目的站点是不是安全可接受的。这样做，是因为跨站请求可能会对目的站点的数据造成破坏。

一般而言，对于跨站请求，浏览器是不会发送凭证信息的。但如果将XMLHttpRequest的一个特殊标志位设置为true，浏览器就将允许该请求的发送。

图片Ping
在使用图片的时候，我们的
中的src
属性也可以使用任何网页的链接，意味加载这一类请求无需担心是否跨域。常常用于动态创建图像，或者跟踪用户点击页面，动态广告曝光次数等。
JSONP
JSONP 是 JSON with padding 的缩写，意思是填充式的 JSON，同图片 Ping 一样，