首页 > 其他分享 >2020-3-1-jsonp原理

2020-3-1-jsonp原理

时间:2024-03-22 17:03:03浏览次数:23  
标签:http url req parse callback 2020 jsonp 原理 data

原理

ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,将数据作为参数,在src中进行了调用,这样实现了跨域。


实现代码

1服务端

//nodejs
var http = require('http');
var url=require('url')
var querystring=require('querystring')
http.createServer(function (req, res) {
    let req_url=url.parse(req.url).pathname//解析出url
    let callback=querystring.parse(url.parse(req.url).query).callback//解析出客户端传过来的回调函数
    let data={
        name:'zhang',
        age:'20'
    }
    data=JSON.stringify(data)//将数据序列化
    if(req_url=='/getscript'){
        res.end(`${callback}(${data})`)//将包裹数据的回调函数返回
    }else{
        res.end("404")
    }
}).listen(3000);

console.log('Server running at http://127.0.0.1:3000/');

2客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    function show(data){//定义回调函数,以接收数据
        console.log(data)//{name: "zhang", age: "20"}
    }
</script>
<script src="http://127.0.0.1:3000/getscript?callback=show"></script><!--通过script标签访问-->
<body>
    
</body>
</html>

标签:http,url,req,parse,callback,2020,jsonp,原理,data
From: https://www.cnblogs.com/sylvesterzhang/p/18089845

相关文章

  • 2020-2-26-koa框架使用
    快速上手、路由、动态路由、获取get值、中间间、koa-views使用、ejs小结、利用中间体配置公共变量、获取post数据、静态web服务、koa-art-template使用、cookies使用、session使用、mongodb数据库封装、路由模块化案例、快速创建koa项目koa-generator快速上手1安装npminstall......
  • 2020-2-20-nodejs基础知识
    vs插件安装、快速运行、url模块使用、自动重启工具supervisor、自定义模块、下载第三方包、fs模块、Async、Await的使用、文件里、简易静态服务器、事件驱动EventEmitter、模拟登陆简单版、模拟express封装、操作mongodb数据库VScode插件安装需要安装NodeSnippets插件才会有提......
  • 2020-3-7-webpack打包工具
    概述、快速使用、配置文件、webpack-dev-server、babel使用概述为优化页面发送多次的二次请求导致加载速度变慢和处理错综复杂的文件依赖关系,则需要将项目中涉及的多个文件进行合并并重新构建。wepack是一个基于node.js项目构建工具,其构建方式是基于项目构建。安装npmiwebp......
  • 2020-5-11-Mybatis
    框架和架构、MyBatis概述、入门、增删改查操作、dao实现类增删改查、引用外部配置文件、配置实体类别名、注册指定包内的dao接口、动态sql、一对多查询、多对多查询、延迟加载、mybatis缓存、注解开发框架和架构1框架软件开发的一套解决方案,不同框架解决不同问题。框架中封装很......
  • 2020-5-5-JAVAWEB
    测试、反射、注解、Mysql、JDBC、Tomcat、servlet、HTTP、EL表达式、JSTL、Filter过滤器、代理模式、监听器、Redis、Maven测试1黑白盒测试黑盒测试:不需要写代码,给输入值,看程序能否给出期望的输出值白盒测试:需要写代码,关注程序具体执行流程2测试步骤1)定义测试类包名:cn.itca......
  • 2020-5-23-Spring
    简介、耦合、控制反转、依赖注入、注解方式反转控制和依赖注入、Spring整合Junit、银行转账案例、代理、AOP面向切面编程、JDBCTemplate简介1核心内容IOC反向控制、AOP面向切面编程2优势方便解耦,简化编程AOP编程支持声明式事务支持方便程序的测试方便集成各种优秀的框架......
  • 2020-1-1-GIT使用经验汇总
    Git安装、创建版本库、同步操作、分支管理、查看版本记录、远程仓库相关操作安装sudoapt-getinstallgit设置用户名和邮箱gitconfig--globaluser.name"yourname"gitconfig--globaluser.email"[email protected]"创建版本库1.创建目录mkdirlearniggitcdlearn......
  • 2020-1-3-ekyll安装使用
    jekyll是一个博客工具,将markdown文件生成静态网页,具有较好的迁移性。安装依赖包RubyRubyGemsNodeJsPython安装完成后重启电脑配置gem镜像$gemsources--addhttps://gems.ruby-china.com/--removehttps://rubygems.org/$gemsources-l安装jeckyll-pagination$g......
  • 2020-1-9-js新特性第二部分
    实现map函数、嵌套函数和闭包、arguments对象、函数参数、关系操作符、遍历数组foreach方法、map对象与object对象的区别、promise对象、生成器实现Map函数传入处理函数和数组,返回值为将数组内的数按照函数规则处理后新生成的数组window.onload=function(){functio......
  • 2020-1-6-js新特性第一部分
    var、let、const的区别,对象被定义为常量不受保护,自执行函数注意事项,箭头函数特点,对象扩展运算和对象解构运算,label语句,for...in...和for...of...的区别var、let、const的区别varletconst作用域函数花括号内全局是否可重复声明可以不可以不可以声明后是......