原生JavaScript封装的jsonp跨域请求

时间：2023-11-19 10:07:02

原生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>

相关文章