1.封装Ajax
(1)提供创建xhr对象的兼容性函数。
(2)提供发送请求的对外接口
(3)设计并约定对外接口的参数规格
(4)实现对外接口中参数处理(5)实现对外接口中响应处理
(6)实现对外接口中发送处理
(7)设置命名空间，避免全局变量污染。
(1)提供创建xhr对象的兼容性函数
a.让我们先创建一个js文件，并命名为EncapsulationAjax.js。(这就是我们的框架文件)
b.在这个文件内部先声明一个无参函数，命名为createXhr。
function createXhr(){}
c.这个函数是为了获得xhr兼容性对象才书写的，因此在里面书写兼容性代码
function createXhr(){
return window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(‘’);
}
(2)提供发送请求的对外接口
a.声明对外发送请求的接口，命名为ajax。
function ajax(){}
b.为接口设置一个json格式的参数用于接收相关数据，命名为jsonObj
function ajax(jsonObj){}
(3)设计并约定对外接口的参数规格
自定义
(4)实现对外接口中参数处理
a.对外接口中创建xhr对象
function ajax(jsonObj){
var xhr = createXhr();
}
b.根据请求方式设置参数。
function ajax(jsonObj){
var xhr = createXhr();
}
(5)实现对外接口中响应处理
a.根据请求方式设置回调函数。
function ajax(jsonObj){
//…
if(jsonObj.async === true){
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
if(xhr.status == 200){
jsonObj.success(JSON.parse(xhr.responseText));
}else{
jsonObj.error(xhr.statusText);
}
}
}
}
}
(6)实现对外接口中发送处理
a. 调用open+send函数。
function ajax(jsonObj){
//…
xhr.open(obj.method,obj.url,obj.async);
if(obj.method === "post"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(obj.data);
}else{
xhr.send();
}
}
(7)设置命名空间，避免全局变量污染
因为我们所编写的js文件中存在大量全局变量，而这样的全局变量会对其他文件中的内容造成不可预估的影响。在js中函数可以划分作用域，因此我们采用自执行函数将整体包裹，避免了内部创建的变量对全局变量造成的影响。
但是这样一来带来的一个重要问题就是，内部创建的函数对外也变成了不可见状态，因此我们可以借助window对象来将内部创建的对外接口设置为“可见状态”.
(function(){
//…
funtion ajax(){
//…
}
window.ajax = ajax;
}());
JSONP跨域方式
描述：JSONP是服务器与客户端跨源通信的最常用方法。
最大特点就是简单适用，老式浏览器全部支持，对服务器改造非常小。
本质：实际上利用了script标签引入js文件，并解析执行的原理。
语法：
(1)在html中插入script标签，并利用script标签发起跨源请求
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = '跨源url地址?【前后端约定回调关键词】=【回调函数名】';
document.body.appendChild(script);
(2)在服务器对应php文件中通过拼接字符串，模拟函数调用。
并将要返回数据通过回调函数参数返回。
$response = $_GET['前后端约定回调关键词'];
echo $response."(".json_encode(要返回数据).")";
(3)在html页面中，显式写出回调函数。这样当跨源请求完成后对应回调函数会自动执行。
function 回调函数名(data) {
console.log(data);
};
优点：
(1)由于使用script脚本作为请求，因此实际上请求和传统的引入js脚本没有任何区别。
(2)而在返回的数据中我们也尽量模拟出了js调用函数的语法，
因此只要在页面中声明了回调函数就会自动被调用。
(3)再者作为参数的【服务器端】的JSON数据，在js中是被直接识别为对象，
因此在回调函数中也避免了使用JSON.parse的步骤。