精华内容
下载资源
问答
  • jsonp请求
    2022-04-12 12:01:30

    我们知道,jsonp也是一种请求的主流方式,每次书写起来太麻烦了,遂将他封装起来,方便我们日后使用,首先给上核心的封装函数:

        // api文档
        /*     jsonp中传入一个对象{
                url: 请求的地址
                data:请求的数据
                success:成功时候执行的函数
            } */
    
    
        function jsonp(options) {
            const script = document.createElement('script');
            let substitute01 = Math.random().toString();
            substitute01 = substitute01.replace('.', '_');
            let substitute02 = Math.random().toString();
            substitute02 = substitute02.replace('.', '_');
            const function_name = `fun${substitute01}_${substitute02}`;
            let params = '';
            //遍历对象
            for (const key in options.data) {
                params += '&' + key + '=' + options.data[key];
            }
            //这里还必须叫callback,否则后台的jsonp方法不识别
            script.src = `${options.url}?callback=${function_name}` + params;
            //挂载到window对象上
            console.log(function_name);
            window[function_name] = options.success;
            //把scipt加入到文档流中
            const body = document.querySelector('body');
            body.appendChild(script);
            script.addEventListener('load', () => body.removeChild(script))
        }

    接下来给一个测试的代码:

    客户端html结构:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="./jsonp.js"></script>
        <title>Jsonp</title>
    
    </head>
    
    <body>
        <p style="text-align: center;"><button>发送jsonp请求</button></p>
    
    </body>
    
    </html>

    客户端jsonp.js代码

    document.addEventListener('DOMContentLoaded', () => {
    
        // api文档
        /*     jsonp中传入一个对象{
                url: 请求的地址
                data:请求的数据
                success:成功时候执行的函数
            } */
    
    
        function jsonp(options) {
            const script = document.createElement('script');
            let substitute01 = Math.random().toString();
            substitute01 = substitute01.replace('.', '_');
            let substitute02 = Math.random().toString();
            substitute02 = substitute02.replace('.', '_');
            const function_name = `fun${substitute01}_${substitute02}`;
            let params = '';
            //遍历对象
            for (const key in options.data) {
                params += '&' + key + '=' + options.data[key];
            }
            //这里还必须叫callback,否则后台的jsonp方法不识别
            script.src = `${options.url}?callback=${function_name}` + params;
            //挂载到window对象上
            console.log(function_name);
            window[function_name] = options.success;
            //把scipt加入到文档流中
            const body = document.querySelector('body');
            body.appendChild(script);
            script.addEventListener('load', () => body.removeChild(script))
        }
    
    
        const btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            jsonp({
                url: 'http://127.0.0.1/api/jsonp',
                success: function(obj) {
                    console.log(obj);
                    console.log('waoh');
                },
                data: {
                    ni: 54,
                    fa: 65
                }
            });
        })
    
    
    
    
    
    
    
    
    })

    服务端代码

    const express = require('express')
    const router = require('./router')
    const app = express()
    const cors = require('cors')
    const path = require('path')
    app.use(cors())
    app.use(express.json())
    app.use(express.urlencoded({ extended: false }))
    app.use(express.static(path.join(__dirname, '/www')))
    app.use('/api', router)
    
    
    app.listen('80', () => {
        console.log('服务器启动成功al');
    })

    服务端路由代码:

    const express = require('express');
    const router = express.Router()
    const formidable = require('formidable')
    const path = require('path')
    
    // ==================================================================================
    
    
    
    router.get('/jsonp', (req, res) => {
        let obj = new Object()
        for (let key in req.query) {
            if (key == 'callback')
                continue
            obj[key] = req.query[key]
        }
        console.log(obj);
        res.jsonp(obj);
        //这里还必须要返回一个对象,或者字符串
    })
    
    
    
    // ==================================================================================
    //导出路由
    module.exports = router;

    服务端需要导入的包:express cors 

    更多相关内容
  • jQuery 发送一个 jsonp 请求 jQuery 也提供给我们发送 jsonp 请求的方式 1. jsonp: 利用 script 标签的 src 属性来请求 2. 返回值: 是一个字符串, 字符串里面写了一个 函数名(后端传递给前端的参数) 使用 $.ajax() ...
  • jsonp请求

    2021-05-13 21:48:14
    首先创建一个文件夹jsonp 在文件夹中创建一个jsonp.js 代码 //封装一个获取jsonp接口方法 export function jsonp({ url, params = {}, success }) { // 根据时间戳生成一个callback名 //例:...

    首先创建一个文件夹jsonp
    在文件夹中创建一个jsonp.js
    代码

    //封装一个获取jsonp接口方法 
    export function jsonp({
        url,
        params = {},
        success
    }) {
        // 根据时间戳生成一个callback名
        //例:https://view.inews.qq.com/g2/getOnsInfo?callback=jsonp_callback_161529116492615333&name=disease_h5
        let callbackName = 'jsonp_callback_' + Date.now() + Math.random().toString().substr(2, 5);
        let script = document.createElement('script');
        let baseUrl = `${url}?callback=${callbackName}`;
    
        // 取出params对象属性并得到完整url
        for (let item in params) {
            baseUrl += `&${item}=${params[item]}`;
        }
        // jsonp核心,通过script的跨域特性发出请求
        script.src = baseUrl;
        // 把创建的script挂载到DOM
        document.body.appendChild(script);
    
        // 给window添加属性,用于获取jsonp结果
        window[callbackName] = (res) => {
            // 执行success回调
            success(res);
            // 删除window下属性
            delete window[callbackName];
            // 得到结果后删除创建的script
            document.body.removeChild(script);
        }
    
    }
    
    

    创建好之后封装一个api.js里面可以写请求

    //思路-这里引入了自己封装的jsonp,1.原因是后端数据返回的是jsonp格式的数据。一般公共数据才是这种格式,大部分后台给的数据不是这种 2.jsonp可以跨域,但是只能get请求,而且需要后台配合,返回jsonp格式。所以工作时大部分用ajax或axios请求
    import { jsonp } from './index'
    
    //获取国外疫情数据
    //通过return promise的形式,导出异步获得的数据
    export function getForeinData() {
        return new Promise((resolve, reject) => {
            jsonp({
                url: 'https://view.inews.qq.com/g2/getOnsInfo',
                params: {
                    name: 'disease_foreign',
                },
                success(res) {
                    resolve(res)
                }
            });
        })
    }
    

    在页面使用该方法时
    首先将该方法导入页面

    import { getForeinData } from "../../jsonp/api.js";
    

    调用直接

    getForeinData().then(res=>{
    console.log(res)获取到的数据
    })
    

    需要注意的是jsonp进行请求只能使用gei请求,不能使用post

    展开全文
  • 主要介绍了详解如何在Vue项目中发送jsonp请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • jsonp请求拦截

    2021-10-17 17:25:28
    最近遇到的一个问题,可以通过拦截修改jsonp请求去解决;搜了下关键字“拦截jsonp请求”,没有找到想要的答案,都是搜到一些跨域的文章…所以自己实现记录了下,希望帮助到正在搜的伙伴。 思路 理解jsonp原理的话,...

    前言:

    最近遇到的一个问题,可以通过拦截修改jsonp请求去解决;搜了下关键字“拦截jsonp请求”,没有找到想要的答案,都是搜到一些跨域的文章…所以自己实现记录了下,希望帮助到正在搜的伙伴。

    思路

    理解jsonp原理的话,实现起来很简单,就直接贴代码啦(监听dom创建,识别script标签,修改src)

    代码

      (function () {
      var originalCreateElement = document.createElement
      function changeReqLink (script) {
        var src
        Object.defineProperty(script, 'src', {
          get: function () {
            return src
          },
          set: function (newVal) {
            src = newVal
            script.setAttribute('src', newVal)
          }
        })
        var originalSetAttribute = script.setAttribute
        script.setAttribute = function () {
          var args = Array.prototype.slice.call(arguments)
          if (args[0] === 'src' && args[1].includes('callback=')) {
            console.log('请求地址: ' + args[1])
            args[1] = args[1].replace(/test/g, 'test1')
            console.log('修改后的地址: ' + args[1])
          }
          originalSetAttribute.call(script, ...args)
        }
      }
      document.createElement = function (tagName) {
        var dom = originalCreateElement.call(document, tagName)
        tagName.toLowerCase() === 'script' && (changeReqLink(dom))
        return dom
      }
    })()
    

    测试

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 使用Script元素发送JSONP请求的方法 // 根据指定URL发送一个JSONP请求 //然后把解析得到的相应数据传递给回调函数 //在URL中添加一个名为jsonp的查询参数,用于指定该请求的回调函数的名称 function getJSONP(url, ...
  • 实现JSONP请求

    2022-04-28 19:44:37
    而所有非同源的请求(即 域名,协议,端口 其中一种或多种不相同),都会被作为跨域请求。实际上请求发了, 也返回了数据, 只是浏览器检测到时非同源的数据, 就会被浏览器丢掉 然后标签发出的请求不会被同源策略检测...

    同源策略

    JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。
    而所有非同源的请求(即 域名,协议,端口 其中一种或多种不相同),都会被作为跨域请求。实际上请求发了, 也返回了数据, 只是浏览器检测到时非同源的数据, 就会被浏览器丢掉

    然后标签发出的请求不会被同源策略检测到, 因此可以用来发送请求, 如script, img等标签

    JSON实现流程

    请添加图片描述

    1. 定义全局函数, 发送请求(客户端)
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>Document</title>
        </head>
        <body>
          <script>
            window.test = (data) => {
              console.log(data);
            };
          </script>
          <script src="http://localhost:3000/test?callback=test"></script>
        </body>
      </html>
      
    2. 接收数据, 返回数据(后端)
      const Koa = require("koa");
      const app = new Koa();
      const Router = require("koa-router");
      const router = new Router({
        prefix: "/test",
      });
      
      app.use(router.routes());
      router.get("/", async (ctx) => {
        ctx.body =
          ctx.query.callback +
          "(" +
          JSON.stringify({
            code: "200",
            data: {
              name: "chenjiang",
            },
          }) +
          ")";
      });
      
      app.listen(3000, (res) => {
        console.log("启动成功");
      });
      
    3. 浏览器network
      在这里插入图片描述
    展开全文
  • Vue-JSONP 一个用于处理JSONP请求的微型库。快速开始作为Vue插件: import { VueJsonp } from 'vue-jsonp'// Vue Plugin.Vue . use ( VueJsonp )// Now you can use this.$jsonp in Vue components.const vm = new ...
  • jquery发送jsonp请求

    2022-04-13 15:37:36
    jquery发送jsonp请求
  • JS实现简单的JSONP请求

    2020-09-30 14:25:28
    JS实现简单的JSONP请求 思路 在dom中添加一个script脚本,url拼写到src属性中,其中一个关键的参数是callback,它是接收jsonp成功之后的回调。等请求成功之后,把回调函数释放。另外demo中添加了超时机制,详见...
  • 主要介绍了原生js实现ajax请求JSONP跨域请求操作,结合实例形式分析了基于原生js实现的ajax请求JSONP跨域请求相关操作技巧与使用注意事项,需要的朋友可以参考下
  • 而这边页面中会出现多个不同JSONP请求,但他们的回调函数名称都是同一个,_Callback。想到设置AJAX 的JSONP参数。但是发现根本不起作用。最后偶然发现 jsonpcallback是区分大小写的。必须是 jsonpCallback 而不是...
  • ajax方法中也涵盖了jsonp请求,可以通过ajax方法来发送jsonp请求; <!--客户端代码--> <body> <button id="btn">发送jsonp请求</button> <script src="js/jquery-3.5.1.min.js">&...
  • Jsonp请求的原理实现

    2020-11-02 13:03:39
    jsonp只能解决ajax类型的get跨域请求 jsonp并不是ajax情况,而是一般的get请求,并且在后端动态拼接一个函数调用,在前端执行该函数 实现原理 浏览器端:设置我们需要的script标签和请求的回调函数的执行体,并...
  • jQuery发送jsonp请求

    2021-04-10 09:30:50
    原生jsonp和jQuery发送jsonp的方式出入比较大,所以想在这里记录一下jQuery发送jsonp请求的方式~~ 文字版: 使用jQuery发送jsonp请求,主要使用jQuery函数的getJSON()方法,$.getJSON()。 需要传两个参数,第一个...
  • Jsonp请求无法设置请求头信息

    千次阅读 2020-08-21 17:55:48
    使用jsonp请求添加自定义请求头。获取接口返回结果失败 --------跨域安全限制只针对web端,服务器端不存在限制 chrome: jsonp 请求返回error:aborded jquery.min.js:4 GET ...
  • Hi~,今天我们来聊聊面试官很喜欢问,但是平时开发又没什么卵用的JSONP请求吧????何为JSONPJSONP是JSON with Padding的略称,JSONP为民间提出的一种跨域解决方案,通过客户端的script标签发出的请求方式。那请求何必...
  • 所以出现了 一下这种情况 用 get请求出现拦截跨站请求资源 以下是解决办法, 这是我的请求: 我在浏览器模板赋值的时候发现赋值没有成功, 在浏览器控制台打印出来的如下: 大概的意思是没有请求头,然后在网上看...
  • vue发送jsonp请求

    2020-09-18 00:15:41
    下载并引入vue-resource.min.js sendJSONP(){ ...encodein=utf-8&encodeout=utf-8&format=json&fields=word&... this.$http.jsonp('https://sug.so.360.cn/suggest',{ params:{
  • 1. jQuery发送jsonp请求 需求 在"点击发送 jsonp 请求"后,将服务器返回的响应体渲染到窗口中。 ajaxDemo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
  • 使用axios发送jsonp请求

    千次阅读 2021-01-26 12:13:24
    axios 本身不支持 jsonp 这种 dataType(不同于 ajax) 【解决方法】 自行封装一个 jsonp 调用方法: jsonp(url) { return new Promise((resolve, reject) => { // 这里的 "jsonCallBack" ,和调用的 ...
  • axios不支持jsonp请求,如果我们要用jsonp来请求数据可以使用fetch-jsonp这个模块 1.安装fetch-jsonp npm install fetch-jsonp --save 2.在main.js中全局引用 3.在文件中使用 4.要注意this的指向,function...
  • vue-resource实现get,post,jsonp请求,JSONP的实现原理
  • 一、安装Jsonp npm install jsonp --save 二、封装组件 建一个axios文件夹,创建index.js文件 import Jsonp from 'jsonp' export default class Axios{ static jsonp(options){ return new Promise((resolve, ...
  • 传统http请求、ajax请求、jsonp请求
  • jsonp 是为了解决跨域问题而诞生出的解决方案。在现代浏览器中,除了src等特殊标签可以允许跨域,其他时候都不允许跨域访问。为了解决这个问题,jsonp诞生了。其原理主要是 向服务端传递一个一个callback 方法,以及...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 64,275
精华内容 25,710
关键字:

jsonp请求

友情链接: ex2.zip