js 实现JSONP

编写一个 jsonp.html 内容如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<!--

    点击 button 后添加一个 script

    <script>

        list([11,22,33,44])

    </script>

-->

</head>

<body>

    <input type="button" onclick="jsonpRequest();" value="跨域请求" />

    <script>

        TAG = null;

        function jsonpRequest() {

            TAG = document.createElement('script');

            TAG.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';   // 对方网站协商返回 list([11,22,33,44]) 数据

            document.head.appendChild(TAG);          // 在 head 处添加<script>标签

        }

        // 定义 list() 函数

        function list(arg) {

            console.log(arg);                       // 打印 list() 函数内的参数

            document.head.removeChild(TAG);         // 在 head 处移除<script>标签

        }

    </script>

</body>

</html>

js 实现JSONP的更多相关文章

基于原生JS的jsonp方法的实现
基于原生JS的jsonp方法的实现 jsonp,相信大家并不陌生,是在js异步请求中解决跨域的方法之一,原理很简单,有不清楚的同学可以google下,这里就补详细解释了.在Jquery库中,jQuer ...
Node.js返回JSONP
在使用JQuery的Ajax从服务器请求数据或者向服务器发送数据时常常会遇到跨域无法请求的错误,常用的解决办法就是在Ajax中使用JSONP.基于安全性考虑,浏览器会存在同源策略,然而<scri ...
原生的js实现jsonp的跨域封装
一.原理 jsonp是利用浏览器请求script文件时不受同源策略的限制而实现的,伪造一个script标签,将请求数据的url赋值给script的src属性,并将该标签添加到html中,浏览器会自动发 ...
js借助JSONP实现百度搜索框提示效果
主要借助百度搜索的API,调用时会存在跨域问题,需要通过JSONP来解决这个问题,代码如下(代码中部分使用ES6语法): HTML <input type="text" id ...
2-8 js基础 jsonp封装
'use strict'; function jsonp(json){ json = json||{} if(!json.url)return; json.data=json.data||{}; js ...
js的jsonp
window.ajaxJsonp=function(params) { params = params || {}; params.data = params.data || {}; var json ...
使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...
用原生js来处理跨域的数据（jsonp）
说明总结: 1.ajax和jsonp其实本质上是不同的东西.ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提 ...
前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）
1.同源策略同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

随机推荐

vue+hammer.js完美实现长按、左滑，右滑等触控事件
移动端使用手指直接操作的方式大受用户欢迎,这其中就包括了单点.多点.长按.双击等方式. 这么多触控事件,如果开发者自己实现,会浪费大量的时间和精力,快来看看 hammer.js 让我们轻松了多少吧. ...
SpringDataJpa-多表操作
多表之间的关系和操作多表的操作步骤表关系一对多一对多 >> 一:主表多:从表多对多 >> 中间表中最少应该由两个字段组成,这两个字段作为 ...
Linux 中find命令
1.在当前目录下找以txt结尾的文件 find . -name '*.txt' 2.在当前目录下找以所有字母开头的文件 find . -name '[a-z]*' 3.在/etc 目录下找以host开 ...
201871010111-刘佳华《面向对象程序设计（java）》第七周学习总结
201871010111-刘佳华<面向对象程序设计(java)>第七周学习总结实验时间 2019-10-11 1.实验目的与要求 1) 掌握四种访问权限修饰符的使用特点: (1)进一步理 ...
LeetCode 动态规划
动态规划:适用于子问题不是独立的情况,也就是各子问题包含子子问题,若用分治算法,则会做很多不必要的工作,重复的求解子问题,动态规划对每个子子问题,只求解一次将其结果保存在一张表中,从而避免重复计算. ...
lua 2 变量
变量在使用前,必须在代码中进行声明,即创建该变量. 编译程序执行代码之前编译器需要知道如何给语句变量开辟存储区,用于存储变量的值. Lua 变量有三种类型:全局变量.局部变量.表中的域. Lua 中的 ...
HTTP 与HTTPS 简单理解
HTTP协议,即超文本传输协议(Hypertext transfer protocol).是一种详细规定了浏览器和万维网(WWW = World Wide Web)服务器之间互相通信的规则,通过因 ...
洛谷 P4316 绿豆蛙的归宿
洛谷 P4316 绿豆蛙的归宿洛谷传送门题目背景随着新版百度空间的上线,Blog宠物绿豆蛙完成了它的使命,去寻找它新的归宿. 题目描述给出一个有向无环图,起点为1终点为N,每条边都有一个长度, ...
Vue indent eslint缩进webstorm冲突解决
参考教程官方回复 ESlint设置 rules: { 'no-multiple-empty-lines': [1, {max: 3}], // 控制允许的最多的空行数量 'vue/script-in ...
hdu6514 一维化 + 二维前缀和
http://acm.hdu.edu.cn/showproblem.php?pid=6514 题意给出一个大矩形($nm\leq10^7$),有p个矩形覆盖,然后有q次询问,询问指定矩形内是否覆 ...

js 实现JSONP

js 实现JSONP的更多相关文章

随机推荐

热门专题