1、封装AJAX
// 1、浏览器适配
// 2、传入参数：请求方式、请求接口地址、请求参数、请求成功的回调函数、请求失败的回调函数
function ajaxFun (method, url, data, successFun, failFun) {
// 1、根据浏览器的支持情况创建XMLHttpRequest对象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
// 2、判断请求方式的类型
// 把method转换为大写:toUpperCase:先把变量中的字符串拷贝一份出来，然后针对拷贝的那一份修改为大写
// console.log( method.toUpperCase() );
var upperMethod = method.toUpperCase();
if (upperMethod == 'GET') {
// 2.1、请求为get请求时，配置请求参数，并发送请求
xhr.open(upperMethod, url+'?'+data, true);
xhr.send(null);
} else if (upperMethod == 'POST') {
// 2.2、请求为post请求，配置请求参数，并发送请求
xhr.open(upperMethod, url, true);
xhr.send(data);
} else {
// 如果传入的请求方式并不是get或post，则弹出错误提示，并关闭函数的执行
// alert('你的请求方式传错啦！');
console.error('请求参数错误，必须是get或post的一种');
return;
}
// 3、监听服务器响应，根据服务器传回来的信息调用不同的回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
successFun(xhr.responseText);
} else if (xhr.readyState == 4) {
failFun('请求失败');
console.error(xhr.status);
}
}
}
2、打破同源限制
// 同源：当两个接口的协议、域名、端口号都相等时，这俩接口是同源的，只要有一个条
件不相等，则非同源。不是同源的两个页面不能互相访问本地缓存、不能互相修改dom节点、不能使用ajax请求对方接口数据
// 跨域请求数据
// http://wthrcdn.etouch.cn/weather_mini?city=北京
// 1、创建xmlhttprequest对象
// var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new
ActiveXObject('Microsoft.XMLHTTP');
// // 2、配置请求参数
// xhr.open('GET', 'http://wthrcdn.etouch.cn/weather_mini?city=北京', true);
// //3、发送请求
// xhr.send(null);
// // 4、监听服务器返回数据
// xhr.onreadystatechange = function () {
// if (xhr.readyState == 4 && xhr.status == 200) {
// alert(xhr.responseText);
// }
// }
// JSONP:利用scritp标签请求外部服务器中的数据，从而绕开同源策略对AJAX请求数据的限制。
// var script = document.createElement('script');
// script.type = 'text/javascript';
// script.src = 'http://10.0.159.198/data.php?callback=foo';
// document.getElementsByTagName('head')[0].appendChild(script);
//
//
//
// function foo (data) {
// alert(data.great);
//
//
// }
3、 封装jsonp
jsonp的本质：利用script标签中src属性可以加载任意文件的特性，通过这个属性来访
问数据接口（添加一个回调函数作为参数），而数据接口会返回一个由回调函数名包裹的json数据，从而达到获取跨域数据的目的。
// 把创建script标签的步骤封装在一个函数中:
// function creatScriptTag (srcString) {
// var script = document.createElement('script');
// script.type = 'text/javascript';
// script.src = srcString;
// document.getElementsByTagName('head')[0].appendChild(script);
// }
//
// creatScriptTag('http://10.0.159.198/data.php?callback=abc');
//
// function abc (data) {
// alert(data);
// }
