精华内容
下载资源
问答
  • jsonp解决跨域问题

    千次阅读 2021-01-29 22:49:25
    JSONP解决跨域问题一级目录二级目录三级目录1. jsonp方案 一级目录 二级目录 三级目录 1. jsonp方案 jsonp实现跨域请求的原理: 动态创建在这里插入代码片


    最近在学习ajax跨域的问题,为了加深理解,写篇博客记录一下。

    1. 原理分析

    1.1 同源策略

    我们先来看看跨域问题涉及的一些概念:

    • 源: 指页面中数据的来源,由三部分指定:协议名、域名或IP地址、端口号
    • 同源策略:不同源的客户端js脚本在没有明确授权的情况下,不能读写对方资源(a.com下的js脚本采用ajax不能读取b.com里面的文件数据,会发生跨域错误)
    • 跨域错误:(如下图)
      在这里插入图片描述

    1.2 跨域的情形

    在这里插入图片描述
    上图中有“红色标记”的栗子都是不同源的情形。总的来说,协议名、域名、端口号任意一项不同就不同源。

    1.3 跨域问题的解决方案

    • 很多项目中,为了实现前后端分离,会特意将前端静态资源(html/css/js等)与后台数据接口 分处在不同的服务器上,所以域名/ip或端口号必然不相同,这就导致了“跨域请求问题”。
    • 跨域问题的解决方案有:
      – 代理请求
      –JSONP
      –CORS

    本文主要将jsonp方案解决跨域问题,其他方案学习透彻了再来总结。

    1.4 什么是JSONP

    • JSONP(json with padding)是json的一种使用模式。
    • 通过上面的学习,我们已经知道,由于同源策略浏览器会禁止JS跨域。
      但是,我们知道script标签是允许跨域请求的。利用这个特性,客户端使用script代替XHR( XMLHttpRequest)发起跨域请求,服务器在json响应数据前后填充一些额外的内容,就称为“填充式JSON”——JSONP

    2. JSONP方案具体实现

    JSONP实现跨域请求的原理就是动态创建script标签,利用“src”不受同源策略约束的性质来实现跨域获取数据。
    菜鸟教程提供了一个链接,我们可以用它练练手~
    链接:https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction

    2.1动态创建script标签

    下面栗子很简单,就不细说了~

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>JSONP 实例</title>
    </head>
    <body>
    <script>
      function callbackFunction(data){
        console.log("i got it");
        console.log(data);
      }
    </script>
    <script>
      window.onload=function(){
        var script=document.createElement("script");
        script.src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction";
        document.head.append(script)}
    </script>
    </body>
    </html>
    

    2.2 用jQuery中$.getJSON()实现JSONP

    • $.getJSON()方法允许通过使用JSONP形式的回调函数来加载其他网域的JSON数据
    • 使用$.getJSON()方法实现跨域请求,需要在请求路径URL后增加callback=?, jQuery将自动替换“?”为正确的函数名,以执行回调函数。

    注:下面代码中路径后是jsoncallback=?,因为服务端的代码中回调函数名为jsoncallback,前后端应该是一致的

    记得引入jQuery文件!

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>JSONP 实例</title>
        <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
    </head>
    <body>
    <script>
    $.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?",function(data){console.log(data);})
    </script>
    </body>
    </html>
    

    2.3 用jQuery中$.ajax()实现JSONP

    $.ajax()方法同样可以实现JSONP跨域请求,我们主要来看看它的一些选项参数:

    • url:请求地址
    • type:请求方式
    • dataType:“jsonp” 必写,设置服务器端返回的数据类型,这里是"jsonp"
    • jsonp:获得jsonp回调函数名的参数名,这个值用于代替"callback=?"(本例就是用"jsoncallback=?“代替了"callback=?”),一般默认都是callback
    • jsonCallback:可选,为JSONP请求指定一个回调函数名,这个值将代替jQuery自动生成的随机函数名(就是代替"callback=?"中的问号)
    • success:请求成功后的回调函数。

    知道这些选项参数的意思了,我们再看看上面给到的那个链接:

    https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction

    我们看到调用的url中,jsoncallback参数告诉服务器,我的本地回调函数叫做callbackFunction,让服务器请把查询结果传入这个函数中。服务器传递给callbackFunction函数json格式的数据:callbackFunction([“customername1”,“customername2”])

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>JSONP 实例</title>
        <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
    </head>
    <body>
    <script>
    $.ajax({
      url: "https://www.runoob.com/try/ajax/jsonp.php",
      type: "get",
      dataType: "jsonp",
      jsonp: "jsoncallback",
      success: function(data){
        console.log(data);
      }
    })
    </script>
    </body>
    </html>
    

    2.4 总结:

    • ajax和jsonp本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。
    • JSONP方案属于客户端直接请求,不存在二次请求的问题;但是,不足是script标签只能发起get请求。
    展开全文
  • jsonp 解决跨域问题

    2021-01-29 17:39:20
    jsonp 解决跨域问题

    用jsonp 解决跨域问题

    参考文章:

    (1)用jsonp 解决跨域问题

    (2)https://www.cnblogs.com/jiaoshuai/p/6844993.html


    备忘一下。


    展开全文
  • Jsonp解决跨域4

    2018-12-04 19:45:00
    Jsonp解决跨域4 1、jsonp总结 jsonp是一个非官方协议 它是一个约定 前后端需要约定的参数 默认callback 服务端发现如果是一个jsonp请求,就会把返回的json对象改成js代码 函数名是callback的值 返回值是js...

    Jsonp解决跨域4



    1、jsonp总结

    jsonp是一个非官方协议

    它是一个约定

    前后端需要约定的参数 默认callback

    服务端发现如果是一个jsonp请求,就会把返回的json对象改成js代码

    函数名是callback的值

    返回值是js代码

    (1)慕课网是支持jsonp请求,callback参数是自己添加的

    13547563-85002a1f98170f49.png

    慕课网是支持jsonp请求,callback参数是自己添加的

    (2)百度也是支持jsonp请求的,callback参数是自己添加的

    13547563-dac5d64d3ed177af.png

    百度也是支持jsonp请求的,callback参数是自己添加的

    2、jsonp有什么弊端

    (1)服务端需要改动代码支持

        如果服务端代码是自己项目组的,那改起来比较方便,如果服务端代码是其他业务方或者第三方,那代码就不好修改。

    (2)只支持get请求

    13547563-aa8c49697c66a477.png

    前端代码改成了post请求,但是发现最终还是以get请求方式执行      

    13547563-c92c24ab552f9bfd.png

    以get方式请求执行


    (3)发送的不是xhr请求

        xhr请求支持很多新特性,异步、各种事件等,但是jsonp不支持异步、各种事件等

    展开全文
  • JSONP解决跨域问题 原理: 服务器端: 客户端:

    JSONP解决跨域问题

    原理:
    服务器端:
    在这里插入图片描述
    客户端:
    在这里插入图片描述
    简述原理:
    借助<script>发送跨域请求,服务器端将要返回的数据填充到js语句中,客户端通过动态创建script执行收到的js语句

    展开全文
  • jquery ajax使用JSONP解决跨域问题
  • 1.jsonp是一个非官方的跨域解决方案,只支持get请求。 2.jsonp解决跨域请求,是利用script标签的跨域能力来发送请求的,使服务器返回js代码,或函数调用,以实现跨域。 客户端代码 在客户端定义一个函数,通过script...
  • Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不可以的,但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句,做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据...
  • 导师在告诉我切换域名和配置项目接口环境的时候,顺便“面试”了一下解决...  jsonp解决跨域:  JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JS
  • jsonp解决跨域访问的问题 JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。 主要用于解决ajax的跨域访问 由于浏览器的同源策略(浏览器最基本的安全功能)。该策略会...
  • jsonp解决跨域访问

    2014-11-19 10:54:52
    jsonp解决跨域访问   记录一下开发中碰到的解决跨域访问的情况
  • JSONP解决跨域问题

    2018-08-01 08:57:56
    解决跨域问题。 1、在js中不能跨域请求数据 但是,js可以跨域请求js片段 2、可以把数据包装成js片段 可以把数据使用js方法来包装,形成一条方法的调用语句。 3、可以使用ajax请求js片段,当js判断到达浏览...
  • jsonp解决跨域问题: 利用script标签没有跨域限制的漏洞,网页可以拿到从其他来源产生动态JSON数据,当然了JSONP请求一定要对方的服务器做支持才可以。 「与AJAX对比」 JSONP和AJAX相同,都是客户端向服务器发送请求...
  • 前端通过jsonp解决跨域问题 通常为了减轻web服务器的负载,我们把js、css,img等静态资源分离到另一台独立域名的服务器上,在html页面中再通过相应的标签从不同域名下加载静态资源,而被浏览器允许,基于此原理,...
  • JSONP是什么?JSON全称为JSON with Padding,是JSON的一种补充的使用方式,不是官方协议。 使用JSONP服务器后台要改动吗?JSONP不同于一般的ajax...JSONP解决跨域的实现原理浏览器只对XHR进行跨域问题校验,而JS...
  • Jsonp解决跨域的原理及过程

    千次阅读 2018-12-25 16:42:54
    在了解什么是跨域之前,我们先来了解这样一个概念:同源策略。 浏览器有一个很重要的安全性...以下是Jsonp解决跨域: 根据浏览器同源策略,所谓同源就是协议、主机、端口号都相同时成为同源。a 域的js不能直接访...
  • jQueryAJAX的$.ajax()用jsonp解决跨域问题

    千次阅读 2016-08-11 20:42:56
    jsonp解决跨域访问服务器的方式。
  • jsonp解决跨域请求以及其工作原理

    万次阅读 2016-09-19 21:29:50
    jsonp解决跨域请求以及其工作原理  一.跨域问题 JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于...
  • Jsonp解决跨域问题

    千次阅读 2018-11-27 12:05:33
    JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的&...
  • jsonp解决跨域请求

    2018-10-08 11:36:33
    Js不可以跨域请求数据。 什么是跨域: 域名不同 域名相同端口不同。...解决js的跨域问题可以使用jsonp。   Jsonp不是新技术,跨域解决方案。使用js的特性绕过跨域请求。Js可以跨域加载js文件。  ...
  • Struts2使用jQuery JSONP解决跨域问题

    千次阅读 2016-11-02 16:11:47
    http://www.darrenfang.com/2013/12/jquery-jsonp-in-struts2/ 在项目中需要添加一个数据分析模块,为了不影响现有业务...那么自然就涉及到AJAX跨域的问题,而使用JSONP解决跨域问题是最简单的。 通过学习
  • 一个简单的jQuery+AJAX+JSONP解决跨域调用的问题 直接上代码: ashx页面: <%@ WebHandler Language="C#" Class="jsonp" %> using System; using System.Web; public class jsonp : IHttpHandler { ...
  • <!-- jQuery中用jsonp处理跨域 --> <script> $("button").click(function(){ $.ajax({ url:"http://localhost:3000", type:'get', dataType:'JSONP', ...
  • 关于在js的应用过程中,出现的跨域情况,进行了详细的分析以及提供了对应的解决方案
  • 之前了解了跨域,只是有些印象,正好...解决跨域问题:本文的解决方案:jsonp3.jsonp原理: jsonp即json+padding,动态创建script标签,利用script标签的src属性可以获取任何域下的js脚本,通过这个特性(也可以说是漏

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,050
精华内容 18,820
关键字:

jsonp解决跨域