编写一个 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. tmux：终端复用神器

    一.简介与安装 今天无意间从同事那里知道有 tmux 这种神器,tmux(terminal multiplexer)是Linux上的终端复用神器,可从一个屏幕上管理多个终端(准确说是伪终端).使用该工 ...

  2. Python—内置三大装饰器（@staticmethod、@classmethod、@property）

    https://blog.csdn.net/weixin_42681866/article/details/83376484 https://blog.csdn.net/weixin_43265804 ...

  3. javascript 生成指定范围内的随机数

    js 生成任意2个区间内的随机整数,js 生成两个数之间的随机数 function random(m,n) { return Math.floor(Math.random() * (n - m)) + ...

  4. Eclipse修改JSP文件的默认编码

    Eclipse新建JSP文件,可以看到默认使用的是ISO-8859-1编码,如下图,而这种编码是无法保存中文的,不符合我们的需求 那么应该怎样修改呢?找到菜单Window-Preferences,找到 ...

  5. 第十二章 WEB渗透

    Web技术发展 • 静态WEB• 动态WEB • 应用程序 • 数据库 • 每个人看到的内容不同 • 根据用户输入返回不同结果 WEB攻击面• Network• OS• WEB Server• App ...

  6. postman---postman增加断言

    我们在做测试的时候都会有一个验证点,我们通常把这个验证点叫做断言,断言通过了就会说明我们的这个用例是通过的,当然这么强大的postman也是有断言的,我们一起学习下如何通过postman增加断言. 断 ...

  7. 各种windows10下的快捷键

    Windows键+ctrl+D 创建虚拟桌面 windows键+Ctrl+方向键 可以切换桌面 windows+tab ctrl+alt+TAB 切换应用 windows+[1-9] 打开任务栏固定的 ...

  8. 解构如何运用的解构--报错 throw new TypeError('Router.use() requires a middleware function but got a ' + gettype(fn))

    let aa={ error_code: 0, reason: "插入数据成功" };//如何拿到 error_code 和 reason 的值 let { error_code, ...

  9. mysql 插入表情数据报错

    mysql 插入表情数据报错 1.编码类型改成:utf8mb4 2.连接类型也要改成:utf8mb4_general_ci 3.在每个保存的前面执行一次 self.cursor.execute('SE ...

  10. 【Spring JDBC】JdbcTemplate（三）

    传统Jdbc API与Spring jdbcTemplate比较 //JDBC API Statement statement = conn.createStatement(); ResultSet ...