第一步/获取浏览器内置的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
在使用图片的时候，我们的<img>
中的src
属性也可以使用任何网页的链接，意味加载这一类请求无需担心是否跨域。常常用于动态创建图像，或者跟踪用户点击页面，动态广告曝光次数等。
JSONP
JSONP 是 JSON with padding 的缩写，意思是填充式的 JSON，同图片 Ping 一样，<script>
的src
属性也是可以跨域的，因此通过动态创建一个<script>
元素获取我们所需要的资源。
不同于图像 Ping 只返回图片，JSONP 可以直接访问相应文本。只需要在添加 URL 的时候添加查询参数即可，看起来会像下面这个样子：
http://freeeoip.net/json/?callback=handleResponse
// 或者 PHP 形式的
http://test.com/bookservice.php?callback=displayBooks
其中赋值给callback
的表示指定的调用函数，完整的 JSONP 如下：
// 处理返回数据的请求
function handleResponse(data){
alert('Your city is in' + data.city + data.country);
}
// 动态生成 JSPONP 请求
var script = document.createElement('script');
script.src = 'http://freegeoip.net/json/?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);
好处： 双向通信，可以跨域
坏处：无法识别恶意代码，无法知道是否获取失败
