Javascript的jsonp原理
 
首先JSON是一种基于文本的数据交换方式，或者叫做数据描述格式
当一个网页在请求JavaScript文件时则不受是否跨域的影响，凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>
所以我们这里运用了script标签的跨域能力，让它用一个callback函数包裹着一段JSON格式的数据，当该数据返回到前端页面的时候，我们再执行这个函数就可以把数据读取出来
前端代码
jsonp.html
  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title>Wsscat's jsonp</title>
  5.     </head>
  6.     <body>
  7.         <button onclick="jsonpServer('jsonp.php')">JSONP</button>
  8.     </body>
  9.     <script>
  10.         function jsonpServer(url) {
  11.             var script = document.createElement("script");
  12.             script.setAttribute("type", "text/javascript");
  13.             script.setAttribute("src", url);
  14.             document.body.appendChild(script);
  15.         }
  16.         function JSON_CALLBACK(data) {
  17.             console.log(data);
  18.         }
  19.     </script>
  20. </html>

　　

后端代码
jsonp.php
  1. <?php
  2. $data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';
  3. $data = "JSON_CALLBACK(" . $data . ")";
  4. echo $data;
  5. ?>

　　

jQuery的jsonp方法
 
type：请求方式 GET/POST
url:请求地址
async:布尔类型，默认为true 表示请求是否为异步，如果为false表示为同步。
dataType：返回的数据类型
jsonp：传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback：自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success：调用成功执行的函数
error：异常处理函数
js代码
  1. $.ajax({
  2.             url:'index.php',
  3.             type:'get',
  4.             dataType:'jsonp',
  5.             //jsonp:'JSON_CALLBACK',
  6.             jsonpCallback:'JSON_CALLBACK',
  7.             success:function(data){
  8.                 console.log(data)
  9.             }
  10.         })
php代码
  1. <?php
  2.     $data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';
  3.     $data = "JSON_CALLBACK(" . $data . ")";
  4.     echo $data;
  5. ?>

　　

Javascript的jsonp原理的更多相关文章

  1. Ajax跨域：Jsonp原理解析

    推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...

  2. javascript笔记——jsonp

    上篇博客介绍了同源策略和跨域访问概念,其中提到跨域常用的基本方式:JSONP和CORS.   那这篇博客就介绍JSONP方式.   JSONP原理   在同源策略下,在某个服务器下的页面是无法获取到该 ...

  3. JQuery实现Ajax跨域访问--Jsonp原理

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  4. jsonp原理，封装，应用（vue项目）

    jsonp原理 JSON是一种轻量级的数据传输格式. JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 ...

  5. 面试汇总——知道什么是同源策略吗？那怎么解决跨域问题？知道 JSONP 原理吗？

    本文是面试汇总分支——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?. 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, ...

  6. 简单透彻理解JSONP原理及使用

    首先提一下JSON这个概念,JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中.JSON格式数据的编码和解析基本在所有主流语言中都被实现,所以现在大部分前后端分离的架构都以JSON格式进 ...

  7. JSONP原理及jQuery中的使用

    JSONP原理   JSON和JSONP   JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息.   JSONP(JSON ...

  8. 跨域JSONP原理及调用详细演示样例

      上篇博客介绍了同源策略和跨域訪问概念,当中提到跨域经常使用的基本方式:JSONP和CORS.   那这篇博客就介绍JSONP方式.   JSONP原理   在同源策略下,在某个server下的页面 ...

  9. 跨域篇--JSONP原理

    一篇文章让你明白 jsonp原理详解 什么是JSONP? 先说说JSONP是怎么产生的: 其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,着用自 ...

随机推荐

  1. @Autowired 作用范围

    一.@AutoWired 可以作用于:构造器.方法.参数.属性 二.作用在方法上 @Component public class Student{ private Book book; public ...

  2. WebApi传参总动员(一)

    目前自己的工作和WebApi相关,免不了传入.接收参数.以前的老办法是从请求流中获取json,再反序列化,这中间有2个不能控制的地方,一个是流,一个是反序列化,都需要try,总感觉非常的不爽.因此对W ...

  3. 操作服务器及MySQL数据库可以使其远程链接

    转自原文操作服务器及MySQL数据库可以使其远程链接 一般情况分三个地方准备,MySQL数据库,防火墙,还有你的服务器主机的准备 操作系统为centos6.5.其他系统大致差不多. 1:在服务器中安装 ...

  4. Nginx 做系统的前端反向proxy

    Nginx是一款很优秀的基于event的webserver.吞吐量大.占用资源少,只是文档就很让人郁闷了,免费的Nginx和收费的Nginx+的文档共用一份,配置完之后才发现免费的Nginx启动某些命 ...

  5. USACO 1.2 Transformations (模拟）

    模拟题目,依照题目给定的要求变换图形就可以,变换的优先级依次减小. 这个题目我写的非常乱.只是最还还是勉强能够执行 /* ID:twd30651 PROG:transform LANG:C++ */ ...

  6. sedna载入xml文件

    如果有一个xml文件a.xml.须要把它载入到sedna数据库xml_db里. sedna是通过se_term把xml载入到数据库的.有两种方法: 1.通过se_term的-query參数. se_t ...

  7. HDU 5045 DP+状压

    2014 ACM/ICPC Asia Regional Shanghai Online 给出N个人做M道题的正确率,每道题仅仅能由一个人做出,而且当全部人都做出来且仅做出一道题时,做过题的人才干够继续 ...

  8. spark 随机森林算法案例实战

    随机森林算法 由多个决策树构成的森林,算法分类结果由这些决策树投票得到,决策树在生成的过程当中分别在行方向和列方向上添加随机过程,行方向上构建决策树时采用放回抽样(bootstraping)得到训练数 ...

  9. 如何让NSURLConnection在子线程中运行

    可以有两个办法让NSURLConnection在子线程中运行,即将NSURLConnection加入到run loop或者NSOperationQueue中去运行. 前面提到可以将NSTimer手动加 ...

  10. 在centos上面开机自启动某个程序

    Systemd 是 Linux 系统工具,用来启动守护进程,已成为大多数发行版的标准配置.可以通过 systemctl --version 命令来查看使用的版本 常用命令 # 立即启动一个服务 $ s ...