JavaScript：手写JSONP

手写JSONP实际上就是跨域中实现JSONP的一系列步骤的优化结合。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<script>(function (w) {/*** jsonp的实现* @param {Object}option*/function jsonp(option) {// 0. 产生不同的函数名var callBackName = 'itLike' + Math.random().toString().substr(2) +  Math.random().toString().substr(2);// console.log(callBackName);// 1. 函数挂载在全局w[callBackName] = function (data) {option.success(data);// 删除script标签document.body.removeChild(scriptEle);};// 2. 处理url链接option.url = option.url + '?callback=' + callBackName;// 3. 创建script标签插入bodyvar scriptEle = document.createElement('script');scriptEle.src = option.url;document.body.appendChild(scriptEle);}w.jsonp = jsonp;})(window);
</script>
<script>// 调用jsonp({url: 'http://localhost:3000/',success: function (data) {console.log(data);alert('111');}});jsonp({url: 'http://localhost:3000/',success: function (data) {console.log(data);alert('222');}});jsonp({url: 'http://localhost:3000/',success: function (data) {console.log(data);alert('333');}});
</script>
</body>
</html>

JavaScript：手写JSONP相关推荐

JavaScript手写（持续更新）
类型判断主要是利用 Object.prototype.toString.call() ,其中toString方法返回反映这个对象的字符串. 如果此方法在自定义对象中未被覆盖,toString() 返 ...
【bind()函数】JavaScript手写bind()及详解-超详细~~~
这两天学习了手写call.apply.bind,手写bind思考了很久才实现了MDN的示例的结果,所以记录下来~ 因为是第一篇文章,所以可能存在一些错误,希望各位大佬批评指正,不吝赐教. 也欢迎不懂的 ...
JavaScript - 手写实现ajax 以及 ajax封装
1.应用场景主要用于与后端数据交互, 请求api获取数据, 实现页面的无刷新请求数据, 保证良好的用户体验. 2.学习/操作 1. 文档阅读 TBD 2. 整理输出 2.1 实践 1). 服务端AP ...
【面试题】「中高级前端面试」JavaScript手写代码无敌秘籍
大厂面试题分享面试题库前端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库 1. 实现一个new操作符 new操作符做了这些事: 它创建了一个全新的对象. 它会被执行[[Proto ...
javascript --- 手写Promise、快排、冒泡、单例模式+观察者模式
手写promise 一种异步的解决方案, 参考 Promise代码基本结构 function Promise(executor){this.state = 'pending';this.value = ...
ajax,training my javascript!手写AJAX，用POST方法传值
普通的一个HTML--- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
第四章生命周期函数--36 结合Node手写JSONP服务器剖析JSONP原理
转载于:https://www.cnblogs.com/songsongblue/p/10993920.html
【前端面试】同学，你会手写代码吗？
如果您发现错误,请一定要告诉我,拯救一个辣鸡(但很帅)的少年就靠您了! CSS 部分两栏布局要求:垂直两栏,左边固定右边自适应. 查看代码 <!DOCTYPE html> <ht ...
一文帮你搞定90%的JS手写题
还在害怕手写题吗,本文可以帮你扩展并巩固自己的JS基础,顺便搞定90%的手写题.在工作中还可以对常用的需求进行手写实现,比如深拷贝.防抖节流等可以直接用于往后的项目中,提高项目开发效率.不说废话了,下 ...
【面试】970- 一文帮你搞定90%的JS手写题
还在害怕手写题吗,本文可以帮你扩展并巩固自己的JS基础,顺便搞定90%的手写题.在工作中还可以对常用的需求进行手写实现,比如深拷贝.防抖节流等可以直接用于往后的项目中,提高项目开发效率.不说废话了,下 ...

JavaScript：手写JSONP

JavaScript：手写JSONP相关推荐

最新文章

热门文章