1. 同源策略是浏览器处于安全考虑,为通信设置了“相同的域、相同的端口、相同的协议”这一限制。这让我们的ajax请求存在跨域无权限访问的问题。

  2. 同时我们发现script标签引入脚本的行为并不受同源策略的限制,但是script引入的文件会被立即执行,如果其内容不符合js语法,则会报错;

操作原理

针对以上情况,诞生了jsonp:

  1. 利用script标签的src属性来请求接口,并向接口传递一个回调函数(克服了同源问题)

  2. 接口将数据以回调函数参数的形式同回调函数一同传回;此时传回则是这样形式的一个字符串:回调函数名(数据),这样就符合js语法了(克服了script标签引入内容非js报错的问题)

实例操作

纸上得来总觉浅,绝知此事要躬行。jsonp的原理我早就倒背入流了,但是看着觉得明白,但总觉得少了点什么没抓住。所以,实际操刀试试吧。点击下载源码

下载代码后,进入some-code/jsonp-demo文件夹,该文件夹的目录为:

app.js

package.json

views

  1. 命令行进入当前目录,安装包依赖:

    npm install
  2. 安装完毕后,运行程序:

    node app.js

    如果看到命令行输出“app is listening”则表示运行成功

  3. 修改host

    因为需要模拟跨域,所以在host文件中创建俩个不同的域名,在host文件中添加以下内容:

    127.0.0.1  www.a.com www.b.com

    自此结束,在浏览器中输入http://www.a.com:3000/,如果访问成功则表示大功告成,页面中应该出现俩个按钮。

这个时候,我们打开浏览器的控制台,分别点击页面中的俩个按钮,就可以看到测试结果啦。

代码分析

  1. 入口文件:app.js

    • 设定模版引擎

      app.set('views', path.join(__dirname, 'views'));
      var swig = new swig.Swig();
      app.engine('html', swig.renderFile);
      app.set('view engine', 'html');
    • 设置路由和接口

      访问www.a.com时,渲染view/index.html页面

      app.get("/",function(req,res){
      res.render('index', {});
      })

      请求www.b.com/index.json时,返回数据,这里服务器收到jsonp的回调函数名,并把它与数据拼接在一起返回给客户端

      //模拟数据
      var data = {"brand":23}
      app.get("/index.json",function(req,res){
      //解析请求路径
      var param = urlLib.parse(req.url,true);
      var returnValue = param.query.callback+ '(' + JSON.stringify(data) +')';
      res.send(returnValue)
      })
    • 启动服务

      app.listen(3000,function(){
      console.log("app is listening")
      })
  2. 页面:view/index.html

    页面中有俩个按钮:jsonp_buttonajax_button,点击以后分别进行jsonp请求和ajax请求。

    • 绑定点击事件

      jsonp_button.onclick = function(){
      var url = "http://www.b.com:3000/index.json?callback=jsonp";
      //向页面中添加script标签,进行jsonp请求
      creatScript(url)
      } ajax_button.onclick = function(){
      //ajax请求
      var xhr = getXhr();
      xhr.open("get","http://www.b.com:3000/index.json");
      xhr.send();
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      console.log(xhr.responseText);
      } else {
      console.log("Request was unsuccessful: " + xhr.status);
      }
      }
      function getXhr(){
      var xhr;
      if(window.XMLHttpRequest){
      xhr = new XMLHttpRequest()
      }else{
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
      return xhr;
      }

    - 动态创建script标签 ```
    function creatScript(url){
    var scriptTag = document.createElement('script');
    scriptTag.setAttribute('src', url);
    document.getElementsByTagName('head')[0].appendChild(scriptTag);
    }
    ```
    - jsonp回调函数 ```
    function jsonp(data) {
    //获取数据
    console.log(data);
    }
    ```

由上面可以得出:jsonp中所有请求数据的后续操作应写在jsonp的回调函数中,它类似于ajax 的 success操作。

最后一句话概括jsonp:jsonp就是原本应该发送json数据给客户端的服务器,不再发送json,改为发送一段调用回调函数的js代码,而原本应该返回的数据则是该函数的参数。

jsonp 演示实例 —— 基于node的更多相关文章

  1. 转:基于node的web开发框架Express入门

    JavaScript 标准参考教程(alpha) 草稿二:Node.js Express框架 GitHub TOP Express框架 来自<JavaScript 标准参考教程(alpha)&g ...

  2. NodeBB – 基于 Node.js 的开源论坛系统

    NodeBB 是一个更好的论坛平台,专门为现代网络打造.它是免费的,易于使用. NodeBB 论坛软件是基于 Node.js 开发,支持 Redis 或 MongoDB 的数据库.它利用 Web So ...

  3. e2e 自动化集成测试 架构 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step (四) Q 反回调

    上一篇文章“e2e 自动化集成测试 架构 京东 商品搜索 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step (三) SqlServ ...

  4. LIGHTX-CMS —— 基于 Node.js,Express.js 以及 SQLite 3 搭建的个人博客系统

    概述 LIGHTX-CMS 是我基于 Node.js,Express.js 以及 SQLite 3 搭建的个人博客发布系统. 项目本身可以拿来部署个人博客网站,同时我认为其也适合用以新手学习 Node ...

  5. 基于node和npm的命令行工具——tive-cli

    前端开发过程中经常会用到各种各样的脚手架工具.npm全局工具包等命令行工具,如:Vue脚手架@vue/cli.React脚手架create-react-app.node进程守卫工具pm2.本地静态服务 ...

  6. Selenium2学习-040-JavaScript弹出框(alert、confirm、prompt)操作演示实例

    弹出框是网页自动化测试常见得操作页面元素之一,常见的JavaScript弹出框有如下三种: 1.alert(message):方法用于显示带有一条指定消息和一个 OK 按钮的警告框.DemoAlert ...

  7. 基于 Node.js 平台,快速、开放、极简的 web 开发框架。

    资料地址:http://www.expressjs.com.cn/ Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. $ npm install express -- ...

  8. Pomelo:网易开源基于 Node.js 的游戏服务端框架

    Pomelo:网易开源基于 Node.js 的游戏服务端框架 https://github.com/NetEase/pomelo/wiki/Home-in-Chinese

  9. Fenix – 基于 Node.js 的桌面静态 Web 服务器

    Fenix 是一个提供给开发人员使用的简单的桌面静态 Web 服务器,基于 Node.js 开发.您可以同时在上面运行任意数量的项目,特别适合前端开发人员使用. 您可以通过免费的 Node.js 控制 ...

随机推荐

  1. 扩:new and override

    昨天有个网友问我继承里面的new和override关键词有啥区别,呃,我们来看个例子就知道了 new ==>隐藏父类同名方法  override==>覆盖 定义一个父类: public c ...

  2. ExtJS面向对象

    序言 1.ExtJs是一套很好的后台框架.现在很流行的,我们要会. 2.这是我写ExtJs的第一篇,以后会写很多直到把这框架运用的炉火纯青,走火入魔. ExtJs中的命名空间 我是做.net的,这命名 ...

  3. 【WP 8.1开发】如何动态生成Gif动画

    相信如何为gif文件编码,很多朋友都会,而难点在于怎么让GIF文件中的帧动起来,也就是创建gif动画. Gif文件编码方法 先简单介绍一下编码的方法. 1.调用BitmapEncoder.Create ...

  4. es6学习笔记一数组(中)

    接着上一篇,给大家再分享一些数组的其他方法.大家也可以去点击这里学习数组更多的方法 concat方法: 概述:    concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回. ...

  5. 谈谈基于OAuth 2.0的第三方认证 [中篇]

    虽然我们在<上篇>分别讨论了4种预定义的Authorization Grant类型以及它们各自的适用场景的获取Access Token的方式,我想很多之前没有接触过OAuth 2.0的读者 ...

  6. ASP.NET WebAPi之断点续传下载(中)

    前言 前情回顾:上一篇我们遗留了两个问题,一个是未完全实现断点续传,另外则是在响应时是返回StreamContent还是PushStreamContent呢?这一节我们重点来解决这两个问题,同时就在此 ...

  7. js 根据屏幕大小调用不同的css文件

    原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在hea ...

  8. 【记录】ASP.NET XSS 脚本注入攻击

    输入进行 Html 转码: HttpUtility.HtmlEncode(content); 输入保留 Html 标记,使用 AntiXSS 过滤: Install-Package AntiXSS M ...

  9. 【记录】GitHub/TortoiseGit 修改邮箱/提交者

    我使用 Git 客户端工具是 TortoiseGit,在提交更新的时候,不知何时起会出现下面这种情况: 正常提交作者信息显示应该是: 本来也没怎么注意,但是在提交历史中,记录就不显示出来了,也就是在首 ...

  10. 如何使用免费PDF控件从PDF文档中提取文本和图片

             如何使用免费PDF控件从PDF文档中提取文本和图片 概要 现在手头的项目有一个需求是从PDF文档中提取文本和图片,我以前也使用过像iTextSharp, PDFBox 这些免费的PD ...