编写一个 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. 钉钉开发第三方H5微应用入门详细教程[ISV][免登流程][授权码][HTTP回调推送][识别用户身份][获取用户信息]

    转载请注明原文地址:https://www.cnblogs.com/applerosa/p/11509512.html (by lnexin@aliyun.com 世间草木) 此教程注意点: 适用于第 ...

  2. Python—系统模块(os和sys)

    os模块 https://www.cnblogs.com/feifeifeisir/p/9519282.html sys模块 获取Python版本信息 import sys a = sys.versi ...

  3. Linux中的硬链接和软链接的概念、区别及用法

    概念: 硬链接(hard link): A是B的硬链接(A和B都是文件名),则A的目录项中的inode节点号与B的目录项中的inode节点号相同,即一个inode节点对应两个不同的文件名,两个文件名指 ...

  4. node.js中pm2启动应用出错

    在将公司的应用容器化时,遇到的问题. 之前,同事使用node.js 6版本运行,pm2启动js文件,一切正常. 但我一样将node.js 6版本安装,然后npm install pm2完成. 运行pm ...

  5. 自定义vue的loading插件

    在一般的vue项目中,都会用到Loading或者Alert之类的弹窗浮层,而他们是一种比较高频率出现的组件. 一般情况下,我们都会去直接import该组件,然后直接以标签的形式引用进去当前页面组件中, ...

  6. CF1252J Tiling Terrace

    CF1252J Tiling Terrace 洛谷评测传送门 题目描述 Talia has just bought an abandoned house in the outskirt of Jaka ...

  7. luoguP3346 [ZJOI2015]诸神眷顾的幻想乡

    题意 学习了广义后缀自动机. 广义后缀自动机与普通后缀自动机的区别在于它是对多个串建的,于是可以处理多个串. 广义后缀自动机和普通后缀自动机的区别在于两个特判,可以见这篇题解 对于这题,因为叶子数量小 ...

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

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

  9. ionic4 组件调用的坑

    我们再开发过程中很多模块做成组件,那么调用的时候则需把module.ts中的引入去掉,如下红色框框:

  10. LeetCode 739 每日温度

    1.直接遍历 暴力求解 class Solution { public: vector<int>dailyTemperatures(vector<int>& T) { ...