编写一个 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的更多相关文章

  1. 基于原生JS的jsonp方法的实现

    基于原生JS的jsonp方法的实现 jsonp,相信大家并不陌生,是在js异步请求中解决跨域的方法之一,原理很简单,有不清楚的同学可以google下,这里就补详细解释了.在Jquery库中,jQuer ...

  2. Node.js返回JSONP

    在使用JQuery的Ajax从服务器请求数据或者向服务器发送数据时常常会遇到跨域无法请求的错误,常用的解决办法就是在Ajax中使用JSONP.基于安全性考虑,浏览器会存在同源策略,然而<scri ...

  3. 原生的js实现jsonp的跨域封装

    一.原理 jsonp是利用浏览器请求script文件时不受同源策略的限制而实现的,伪造一个script标签,将请求数据的url赋值给script的src属性,并将该标签添加到html中,浏览器会自动发 ...

  4. js借助JSONP实现百度搜索框提示效果

    主要借助百度搜索的API,调用时会存在跨域问题,需要通过JSONP来解决这个问题,代码如下(代码中部分使用ES6语法): HTML <input type="text" id ...

  5. 2-8 js基础 jsonp封装

    'use strict'; function jsonp(json){ json = json||{} if(!json.url)return; json.data=json.data||{}; js ...

  6. js的jsonp

    window.ajaxJsonp=function(params) { params = params || {}; params.data = params.data || {}; var json ...

  7. 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】

    项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...

  8. 用原生js来处理跨域的数据（jsonp）

    说明总结: 1.ajax和jsonp其实本质上是不同的东西.ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提 ...

  9. 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

随机推荐

  1. ubuntu 查看软件包中的内容 （已经安装）

    在 使用 apt 进行安装软件的时候,我们要经常判断,软件安装了什么和安装到什么地方.这时候 我们要使用 dpkg -L 命令来进行查看: 同样 在 fedora 上可以使用 rpm -ql iper ...

  2. Tangent element-Vs虚拟调色台安装配置

    iPad安装element-Vs 从Tangent网站下载Element-Vs的Tangent Hub程序安装 确保系统防火墙允许对Tangent Hub的网络访问并且与iPad共用一个局域网连接 开 ...

  3. 天翼宽带家庭网关用户：useradmin，nE7jA%5m 这个是中国电信的超级密码

    天翼宽带家庭网关用户:useradmin,nE7jA%5m 这个是中国电信的超级密码

  4. JMeter面试题

    1.Jmeter怎么录制脚本,怎么过滤,线程组有哪些内容? jmeter可以使用第三方的录制工具(badboy)或者使用jmeter自带的HTTP代理服务器录制脚本功能 jmeter录制原理:通过ht ...

  5. C++ 模板类示例 template class

    声明和实现在一个文件中: template<class T> class book { public: book(); ~book(); private: }; template<c ...

  6. 《为什么说 Prometheus 是足以取代 Zabbix 的监控神器？》

    为什么说 Prometheus 是足以取代 Zabbix 的监控神器?   Kuberneteschina 致力于提供最权威的 Kubernetes 技术.案例与Meetup! ​关注他 12 人赞同 ...

  7. luoguP4585 [FJOI2015]火星商店问题

    题意 显然商店编号的限制能用可持久化trie解决. 特殊的商品预先判掉就好了,现在只考虑普通的商品. 发现商品的时间是单点,询问时一段时间,于是将询问区间在线段树上拆成\(log\)个区间,分别放上该 ...

  8. eclipse创建git本地仓库,并将本地仓库更新到远端git服务器

    目的:将本地代码更新到远端服务器 1.点击eclipsewindows->preference->team->git->Configuration配置git的基础环境 2.点击 ...

  9. angular跳转和传参

    使用routerLink跳转 <a routerLink=["/exampledetail",id]></a> <a routerLink=[&quo ...

  10. 从项目中理解let和const为什么如此重要

    变量声明 变量声明方式 伴随js诞生的var // 语法 var varName = value var a = 1 // 这样子你就得到了一个变量 var缺陷场景分析 var specialUser ...