jsonp 原理和基本使用

fengchao000 2019-10-26

该日记的使用教程方法为:

1:将html文件复制

2:在express官网上下载一个服务来响应请求的地址的,详情请看下面]

3:打开服务器的命令指令为:nodemon start

第一步:先写好基本的html文件,如下图所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsop原理</title>
    <script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script>
</head>
<body>
<button id="btn">点击获取资源</button>

</body>
<script>
    $("#btn").click(function () {
        var sc=document.createElement(‘script‘);
        var url=‘http//localhost:3001/users‘;
        sc.src=url;
        document.head.appendChild( sc );
        
    })
</script>
</html>

服务端的user.js的代码如下:

var express = require(‘express‘);
var router = express.Router();

/* GET users listing. */
router.get(‘/‘, function(req, res, next) {
  var container=req.query;
  console.log(container)
  var box=req.query.container
  console.log(box)
  var fn=box + ‘("l am  from  server")‘;
  res.send(fn);
  console.log(fn)

});

module.exports = router;

当在浏览器打开该文件的时候会出现找不到该网络的请求,和增加多了script标签,如下图所示:

jsonp 原理和基本使用

jsonp 原理和基本使用

如何安装呢:先找到express官网:http://www.expressjs.com.cn/starter/generator.html的生成器下载啦,下载方法如下:

注意:express生成器的是express --view=pug myapp,要根据自己的需求来改啦

jsonp 原理和基本使用

下载之后我们就要安装yarn这个包啦

jsonp 原理和基本使用

然后输入指令:nodeMon start

开启服务:效果如下:

jsonp 原理和基本使用

jsonp 原理和基本使用

这样子就说明服务器启动成功啦

j接着打开域名:localhost:3000/users

jsonp 原理和基本使用

jsonp 原理和基本使用

请求成功之后需要在提供地址的服务下添加一个容器来接收响应的信息

q jsonp 原理和基本使用

jsonp 原理和基本使用

jsonp 原理和基本使用

打开页面的浏览器打开检测是否传值成功

jsonp 原理和基本使用

在打开命令窗口是否打印出添加的容器

jsonp 原理和基本使用

jsonp 原理和基本使用

: fengchao000

相关推荐

三种跨域解决方案

当前端页面与后台运行在不同的服务器时，就必定会出现跨域这一问题，本篇简单介绍解决跨域的三种方案，部分代码截图如下，仅供参考：。这种方式比较简单，将A应用和B应用都通过一个统一的地址进行转发，这样就可以避免跨域问题出现。jsonp的方式虽然简便，但有个缺点，

fengchao000 0喜欢 / 0评论 2020-06-17

什么是JSONP？

1、我们知道，哪怕跨域js文件中的代码，web页面也是可以无条件执行的。

newthon 0喜欢 / 0评论 2020-06-09

vue-resource发起get,post,jsonp请求

--vue-resource.min.js就是发起请求的js它依赖于vue.js所以它必须放在vue.js后面-->. console.log; //data和body效果一样，推荐使用body. alert("请求调用失败！post 发送

adonislu 0喜欢 / 0评论 2020-05-16

jq使用jsonp实现百度搜索

什么是jsonp：就是利用<script>标签的src地址，让目标页面回调本地页面，并且带入参数，也解决了跨域问题；callback函数为目标服务器的回调函数，传回来的参数data是一个对象；改变a标签超链接的wd属性就可以搜索到对应的内容；w

zmosquito 0喜欢 / 0评论 2020-05-10

jsonp跨域访问数据，例：得到其他地址的天气接口

由于出于HTTP安全问题考虑，ajax是不能获取非本域的文件的。但是我们可以通过scrip的src请求其他页面。-- 用scrip引用相当于调用 fun() 函数，PHP可以将参数传过来，这样就可以得到数据了。src可以请求写其他网络地址-->. e

adonislu 0喜欢 / 0评论 2020-05-10

解决跨域的方式（9种）

利用 <script> 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。JSONP优点是

somebodyoneday 0喜欢 / 0评论 2020-04-22

jsonp的创建原理或者步骤

服务端返回一个预先定义好的javascript函数的调用，并且将服务器的数据以该函数参数的形式传递过来，这个方法需要前后端配合。域名、端口、协议全都相同就是同源跨域: ?--不受同源策略的标签-->. 1- 前端先定义好一个方法，将方法名字用s

fengchao000 0喜欢 / 0评论 2020-04-22

JSONP与CORS原理与示例

", {id:2,name:‘李四‘,sex:‘男‘},JSONP只支持GET请求，不支持POST请求。JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。CORS与JSONP的使用目的

fengchao000 0喜欢 / 0评论 2020-04-11

Ajax,restful/Rest JSON和JSONP

Ajax– “异步Javascript和XML”。Ajax宽松地定义了一组技术，以帮助使Web应用程序提供更丰富的用户体验。屏幕的数据更新和刷新是使用javascript和xml异步完成。以JSON表示的对象可以转换为要在javascript代码中操作的实

Richardxx 0喜欢 / 0评论 2020-03-07

同源策略：JSONP和CORS

　　同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。　　但是两个源在达成共识后，需要相互传递数

somebodyoneday 0喜欢 / 0评论 2020-03-06

跨域JSONP

JSONP由两部分解组成：回调函数和数据。回调函数是当相应到来的时候，应该在页面中调用的函数，数据就是传回回调函数中的JSON数据。JSONP的原理：我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的，但是在用link标签和script

fengchao000 0喜欢 / 0评论 2020-03-05

跨域解决方案之Jsonp

　　Jsonp 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么我们从不同的域（网站）访问数据需要一个特殊的技术呢？这是因为同源策略。　　同源策略，它是由 Netscape 提出的一个著名

somebodyoneday 0喜欢 / 0评论 2020-02-16

跨域 jsonp

$.ajax(‘http://192.168.1.107:8080/test/test.do‘;,{ data:{ username:

newthon 0喜欢 / 0评论 2020-02-14

使用图片跨域方式获取图片数据使用 jsonp 方式跨域获取数据

server.get(`/mockImg`, (req, res, next) => { // 使用图片跨域方式获取图片数据。window[cbName] = res => {cb && cb; resove}. const s

xiaouncle 0喜欢 / 0评论 2020-02-13

百度搜索关键词联想API JSONP使用实例

许多搜索引擎都提供了关键词联想api，且大多数都是jsonp. Jsonp 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。使用jsonp就不用担心浏览器因同源策略而禁止跨域这种情况的发生了。回

baijinswpu 0喜欢 / 0评论 2020-01-29

175、JSONP

在jquery源码中，jsonp的实现方式是动态添加<script>标签来调用服务器提供的js脚本。jquery会在window对象中加载一个全局的函数，当<script>代码插入时函数执行，执行完毕后就<script>

fengchao000 0喜欢 / 0评论 2020-01-10

一、json与jsonp的使用

备注：跨域也可以通过服务器端代理来解决; 理解：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。

fengchao000 0喜欢 / 0评论 2019-12-25

JSONP 劫持漏洞

Jsonp 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么我们从不同的域（网站）访问数据需要一个特殊的技术呢？这是因为同源策略。同源策略，它是由Netscape提出的一个著名的安全策略，

newthon 0喜欢 / 0评论 2019-12-23

jsonp 与 json(转载)

说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。但到目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JS

somebodyoneday 0喜欢 / 0评论 2013-07-11

webx配置html转义构建JSONP跨域

最近在用一个Webx实现一个JSONP跨域调用的接口，从不同环境传输数据。注意后端组装callback函数的写法，请求数据。后端获取callback参数之后，输出parseJson

qianqianxiao 0喜欢 / 0评论 2015-08-13

Vue项目中使用jsonp抓取跨域数据

在下载的jsopn中，jsonp这个是原生jsonp方法中的参数；//这个jsonp函数是我们自己定义的，与上面的originJsonp不是同一个，originJsonp是一个可以直接引用的方法;她最终返回一个Promise对象。orig

张树刚 0喜欢 / 0评论 2019-11-09

说说JSON和JSONP，也许你会豁然开朗，含jQuery用例

由于Sencha Touch 2这种开发模式的特性，基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。但到目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。JSON和JSONP虽然只有一个字母的差别，但其实他们根本不是一回

zhaoqidev 0喜欢 / 0评论 2014-06-06

跨域解决方案-jsonp/CORS/postMessage/hash/WebSocket/proxy

浏览器会有同源策略，域名，协议，端口只要有一个不同就是跨域.同源策略只限制浏览器端，跨域请求是可以发去的，但是请求响应response被浏览器堵塞了，是限制了不同源的读，但不限制不同源的写，服务端没有同源策略这一限制，form表单可以跨域发送信息也是这个原

wenf00 0喜欢 / 0评论 2019-11-04

跨域解决方案之JSONP

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略，它是由Netscape提出的一个著名的安全策略。所谓同源是指

xiyang 0喜欢 / 0评论 2019-11-04

JSONP跨域和CORS跨域的区别

由于浏览器中的javascript的同源策略，同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互。是跨域资源共享，它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。CORS与JSONP的使用目的相同，但是比JSONP更强大，C

baijinswpu 0喜欢 / 0评论 2019-10-31

JQuery jsonp使用小记

//jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话，就已经不是ajax事件了。//客户端jquery预先定义好的callback函数，成功获取跨域服务器上的json数据后，会动态执行这个callback函数

87413460 0喜欢 / 0评论 2014-06-03

说说JSON和JSONP，也许你会豁然开朗

　　由于Sencha Touch 2这种开发模式的特性，基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。　　说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串

chinewwen 0喜欢 / 0评论 2015-01-21

html5前端常用的jsonp，web的json的区别与原理

web开发中常要用到ajax来解决向服务端异步请求动态数据，数据传递方式有2种：json和xml。其中json到目前为止被推崇或者说是首选的数据传递方案。但是json不能解决跨域的问题。jsonp能解决这个跨域问题。

前端JavaScript 0喜欢 / 0评论 2015-01-14

jsonp跨域请求数据实例—手机号码查询

网上有很多开放的api，我们在本地通过ajax获取数据时，总会碰到一个问题，那就是跨域！如果不借助php等，仅仅通过js怎么解决跨域的问题呢？或许jsonp是个不错的选择。<input type="text"> <sp

revivre 0喜欢 / 0评论 2015-01-24

App Framework发送JSONP请求(3)

App Framework 中如何发送JSONP请求呢?public String login(Model model, Integer status, UserView view,

iovaaron 0喜欢 / 0评论 2015-03-09

jsonp

type: 'get',dataType: "jsonp",jsonp: "callback",});String callback = req.getParameter("callback");

Anything 0喜欢 / 0评论 2015-05-29

js跨域调http接口（jsonp）

<!DOCTYPE html>. console.log("--------------------", typeof result, result);};JSONP.id = "searchPersonJsonp

Anything 0喜欢 / 0评论 2015-09-01

JSON和JSONP解说

　　由于Sencha Touch 2这种开发模式的特性，基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。　　说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串

yigeng 0喜欢 / 0评论 2016-01-07

说说JSON和JSONP，也许你会豁然开朗【转】

　　由于Sencha Touch 2这种开发模式的特性，基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。　　说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串

mingyangwang 0喜欢 / 0评论 2016-12-14

轻松搞定JSONP跨域请求

要理解跨域，先要了解一下“同源策略”。所谓同源是指，域名，协议，端口相同。所谓“同源策略“，简单的说就是基于安全考虑，当前域不能访问其他域的东西。在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的。title=api_v2提供的接口数据。q

sjunothing 0喜欢 / 0评论 2017-02-07

jsonp实现跨域访问

由于此前很少写前端的代码，最近项目中用到json作为系统间交互的手段，自然就伴随着众多ajax请求，随之而来的就是要解决 ajax的跨域问题。本篇将讲述一个小白从遇到跨域不知道是跨域问题，到知道是跨域问题不知道如何解决，再到解决跨域问题，最后找到两种方法

carpenterworm 0喜欢 / 0评论 2017-04-13

深入浅出JSONP--解决ajax跨域问题

　　上周客户新买了服务器，原本在旧的服务器上放着客户的Web主页信息和一个后台程序，在客户的主页中有一个动态显示最新消息的处理，这个处理就是通过ajax异步从那个后台程序中取得的。由于又购买了新的服务器，客户想把web主页和那个后台程序分开来，后台程序被部

张树刚 0喜欢 / 0评论 2017-04-27

jsonp与跨域请求

　同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。　　由于同源策略，我们在

mingyangwang 0喜欢 / 0评论 2018-01-20

同源跨域二三事：从同源策略到 JSONP 技术略解

（一）什么是同源策略？同源策略是浏览器因安全性需要而诞生的沙盒机制中的其中一个策略。所谓同源，就是要三同：同协议，同域名，同端口号。其中任意一个不相同，都不能称之为同源。非同源网站间 JavaScript 脚本的行为受到了严格的限制，以提供必要的安全性。向

qianqianxiao 0喜欢 / 0评论 2019-09-08

jquery,ajax,jsonp例子+springmvc后台

}),//不用JSON.stringify容易报错,要传json字符串不是js对象或json字符串'{"username":'+$.val()+'}'. jsonpCallback: "aa",//自定义的jsonp

shuiluobu 0喜欢 / 0评论 2017-11-05

JSONP

JSON来传数据，靠JSONP来跨域。打个比方，JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。一个是描述信息的格式，一个是信息传递双方约定的方法。　　1、一个众所周知的问题，Ajax直接请

Anything 0喜欢 / 0评论 2017-09-08

jsonp跨域获取百度联想词的方法分析

本文实例讲述了jsonp跨域获取百度联想词的方法。分享给大家供大家参考，具体如下：。希望本文所述对大家JavaScript程序设计有所帮助。

KAZAN 0喜欢 / 0评论 2019-05-13

jsonp实现百度下拉框功能的方法分析

本文实例讲述了jsonp实现百度下拉框功能的方法。分享给大家供大家参考，具体如下：。思路就是获取用户输入，然后根据用户输入调用百度的一个接口jsonp实现跨域请求，然后将百度返回给的内容渲染数据到视图。需要注意的就是，发送请求的时候记得编码用户输入的内容。

duxd 0喜欢 / 0评论 2019-05-10

AJAX 跨域请求 - JSONP获取JSON数据

JSONP是一个非官方的协议，它允许在服务器端集成Scripttags返回至客户端，通过javascriptcallback的形式实现跨域访问。

水滴石穿 0喜欢 / 0评论 2014-12-02

json、jsonp跨域请求数据小结

最近在做项目的时候遇到跨域请求的问题，主要是对json和jsonp的使用，做个小总结，小的初学，请各位大牛轻虐。显而易见，这必然是报错的结果，我们肯定不能直接在写js的时候写一个字符串上去，那么如何解决这个问题，这就是为什么要传一个callback参数过去

苍月 0喜欢 / 0评论 2014-08-28

ajax跨域请求--jsonp实例

1.设置响应报文头,response.setHeader;,消除了"Resource interpreted as Script but transferred with MIME type text/plain",同时要根据自己的编码

kencorn 0喜欢 / 0评论 2014-08-04

使用JSONP实现跨域请求

jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据。//alert('您查询到航班信

daiqinge 0喜欢 / 0评论 2013-12-19

JQuery jsonp使用小记

//jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话，就已经不是ajax事件了。//客户端jquery预先定义好的callback函数，成功获取跨域服务器上的json数据后，会动态执行这个callback函数

80473064 0喜欢 / 0评论 2014-06-03

ajax跨域问题（二）

jsonp是一个非官方协议，它是一个约定。它约定了我请求的参数里面如果包含指定的参数的话这就是一个jsonp请求。普通ajax请求发出去type是xhr的，而jsonp请求发出去的type是script,因为不是xhr类型，所以浏览器就不会做校验。json

adonislu 0喜欢 / 0评论 2019-07-01