跨域请求HTTP数据之JSONP

只须设置<script>元素src属性（假如它还没有插入到document中，需要插入进去），然后浏览器就会发送一个HTTP请求以下载src属性所指向的URL。使用<script>元素进行Ajax传输的一个主要原因是，它不受同源策略的影响，因此可以使用它们从其他的服务器请求数据，第二个原因是包含JSON编码数据的响应体会自动解码（即，执行）。
这种使用<script>元素作为Ajax传输的技术称为JSONP。
下面展示了一个完整JSONP的流程：

/* **************************************************
*
* 该JS主要是模拟实现JSONP
* JSONP是实现跨请求数据的一种方式
*
* ************************************************** */

// 存放相应结果
var responseData = '';

//具体执行
(function() {
//请求数据
getData();

//定义请求次数
var i = 5;
//判断数据是否存在
var judgeData = setInterval(function() {
if (responseData != '') {
i--;
if (responseData == 'fail') {
if (i >= 0) {
getData();
} else {
clearInterval(judgeData);
console.log("数据请求失败");
}
} else {
clearInterval(judgeData);

// 处理相应数据
parseDate();
}
}
}, 100)
})();

// 发送请求
function getData() {
var url = "请求URL";
getJSONP(url, function(response){
// 保存响应数据
responseData = response;
});
};

// 解析数据
function parseDate() {
alert(responseData);
};

// 根据指定的URL发送一个JSONP请求
// 然后把解析得到的响应数据传递给回调函数
// 在URL中添加一个名为jsonp的查询参数，用于指定该请求的回调函数的名称
function getJSONP(url,callback){
if (!url) {
return;
}
// 为本次请求创建一个唯一的回调函数名称
var name = 'LIGANG' + generateMixed(6);
var cbname = 'getJSONP.' + name; //作为getJSONP函数的属性

// 将回调函数名称以表单编码的形式添加到URL的查询部分中
// 使用jsonp作为参数名，一些支持JSONP的服务可能使用其他的参数名，比如callback
if (url.indexOf('?') === -1) {
url += '?jsonp=' + cbname + '&siteid=' + "12f5ed7d"; //作为查询部分添加参数，请求数据可以动态生成
} else {
url += '&jsonp=' + cbname + '&siteid=' + "12f5ed7d"; //作为新的参数添加它
}
// 创建script元素用于发送请求
var script = document.createElement('script');

//定义被脚本执行的回调函数
getJSONP[name] = function(e) {
try {
callback && callback(e);
} catch (e) {
//
} finally {
//最后删除该函数与script元素
delete getJSONP[name];
script.parentNode.removeChild(script);
}
};
// 立即发送HTTP请求
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}

// 生成指定位数的随机字符串
function generateMixed(n) {
var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
var res = "";
for(var i = 0; i < n ; i ++) {
var id = Math.ceil(Math.random()*35);
res += chars[id];
}
return res;
}