博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJS的JSONP服务
阅读量:5320 次
发布时间:2019-06-14

本文共 930 字,大约阅读时间需要 3 分钟。

有些页面的response中,包含了 Access-Control-Allow-Origin 这个header,说明可以进行跨域请求,如果没有包含这个header的页面可以利用JSONP进行跨域

script标签中的src属性可以也实现跨域,,下面我们来简单封装利用script标签实现跨域的函数。

步骤:

  1. 创建script标签
  2. 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);    }

了解原理即可,现在有很多插件可以解决这个问题

 

转载于:https://www.cnblogs.com/AnnieShen/p/6017548.html

你可能感兴趣的文章
面向对象的优点
查看>>
套接口和I/O通信
查看>>
阿里巴巴面试之利用两个int值实现读写锁
查看>>
@bzoj - 3750@ [POI2015] Pieczęć
查看>>
PHP定时任务
查看>>
浅谈性能测试
查看>>
Winform 菜单和工具栏控件
查看>>
jequery动态创建form
查看>>
CDH版本大数据集群下搭建的Hue详细启动步骤(图文详解)
查看>>
第六次java作业
查看>>
巧用Win+R
查看>>
浅析原生js模仿addclass和removeclass
查看>>
Python中的greenlet包实现并发编程的入门教程
查看>>
tweenlite使用说明
查看>>
java中遍历属性字段及值(常见方法)
查看>>
在AD的环境下,更改计算机名导致TFS,无法连接解决办法
查看>>
Jenkins执行批处理文件失败
查看>>
JAVA 基础坑
查看>>
深入理解jQuery框架-框架结构
查看>>
[7.14NOIP模拟4]通讯 题解 (Tarjan缩点+贪心)
查看>>