原生JavaScript封装的jsonp跨域请求
Posted 夜里码码
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JavaScript封装的jsonp跨域请求相关的知识，希望对你有一定的参考价值。
原生javascript封装的jsonp跨域请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域的jsonp请求</title>
</head>
<body>
<script>
(function(window,document){
//该函数接受三个参数，请求的地址，请求的数据（对象格式），回调函数
// 回调函数可接受一个参数用来返回请求到的信息
var jsonp = function(url,data,callback){
// 第一步：挂载回调函数
//cbFuncName为回调函数名
var cbFuncName = "my_jsonp_cb" + Math.random().toString().replace(".",‘‘);
window[cbFuncName] = callback;
//第二步：将请求的数据转换为字符串格式
var queryString = url.indexOf(‘?‘)===-1?‘?‘:‘&‘;
for(var key in data){
queryString += key + ‘=‘ + data[key] + ‘&‘;
}
//第三步：处理URL中的回调参数(callback为回调参数名)
queryString += ‘callback=‘ + cbFuncName;
// 第四步：创建一个script标签
var script = document.createElement("script");
//第五步：将所请求的地址赋给script标签的src属性
script.src = url + queryString;
//第六步：将script标签插入到页面当中
document.body.appendChild(script);
};
//将jsonp函数赋给window对象
window.$jsonp = jsonp;
})(window,document);
</script>
</body>
</html>
以上是关于原生JavaScript封装的jsonp跨域请求的主要内容，如果未能解决你的问题，请参考以下文章