有些页面的response中,包含了 Access-Control-Allow-Origin
这个header,说明可以进行跨域请求,如果没有包含这个header的页面可以利用JSONP进行跨域
script标签中的src属性可以也实现跨域,,下面我们来简单封装利用script标签实现跨域的函数。
步骤:
- 创建script标签
- script标签的src属性等于url
a) url中有回调函数和参数
b) 回调函数需要写入window中
i. 调用的函数名不能为同一个,否则会被覆盖
ii. 所以利用随机数(转换为字符串,然后去掉前两位0和小数点)让函数名不同
c) 参数以对象形式传入,需要遍历,与url进行连接
3. 将标签插入body中
4. 移除script
代码:
function getJsonp(url,params,callback){ //创建script标签 var script=document.createElement("script");
//生成随机的回调函数名 var name="JSONP"+Math.random().toString().substring(2); window[name]=function(data){ callback(data); } var strUrl=url+"?callback="+name; for(key in params){ strUrl+="&"+key+"="+params[key] } script.src=strUrl; document.body.appendChild(script); document.body.removeChild(script); }
了解原理即可,现在有很多插件可以解决这个问题