jsonp是什么？

  • Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

  • 为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。

  • 同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。

JSONP 应用

  1. 服务端JSONP格式数据
  1. <?php
  2. header('Content-type: application/json');
  3. //获取回调函数名
  4. $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
  5. //json数据
  6. $json_data = '["customername1","customername2"]';
  7. //输出jsonp格式的数据
  8. echo $jsoncallback . "(" . $json_data . ")";
  9. ?>
  1. 客户端页面完整代码
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>JSONP 实例</title>
  6. </head>
  7. <body>
  8.     <div id="divCustomers"></div>
  9.     <script type="text/javascript">
  10. function callbackFunction(result, methodName)
  11.         {
  12.             var html = '<ul>';
  13.             for(var i = 0; i < result.length; i++)
  14.             {
  15.                 html += '<li>' + result[i] + '</li>';
  16.             }
  17.             html += '</ul>';
  18.             document.getElementById('divCustomers').innerHTML = html;
  19.         }
  20. </script>
  21. <script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
  22. </body>
  23. </html>
  1. jQuery 使用 JSONP
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>JSONP 实例</title>
  6.     <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
  7. </head>
  8. <body>
  9. <div id="divCustomers"></div>
  10. <script>
  11. $.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
  13.     var html = '<ul>';
  14.     for(var i = 0; i < data.length; i++)
  15.     {
  16.         html += '<li>' + data[i] + '</li>';
  17.     }
  18.     html += '</ul>';
  20.     $('#divCustomers').html(html);
  21. });
  22. </script>
  23. </body>
  24. </html>
  1. 自测代码
  1. <?php
  2. header('Content-type: application/json');
  3. //获取回调函数名
  4. $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
  5. //json数据
  6. $json_data = '["customername1","customername2"]';
  7. //输出jsonp格式的数据
  8. echo $jsoncallback . "(" . $json_data . ")";
  9. ?>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>JSONP 实例</title>
  6. </head>
  7. <body>
  8.     <div id="divCustomers"></div>
  9.     <script type="text/javascript">
  10. function callbackFunction(result, methodName)
  11.         {
  12.             var html = '<ul>';
  13.             for(var i = 0; i < result.length; i++)
  14.             {
  15.                 html += '<li>' + result[i] + '</li>';
  16.             }
  17.             html += '</ul>';
  18.             document.getElementById('divCustomers').innerHTML = html;
  19.         }
  20. </script>
  21. <script type="text/javascript" src="http://www.php.test/jsonp/jsonp.php?jsoncallback=callbackFunction"></script>
  22. </body>
  23. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>JSONP 实例</title>
  6.     <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
  7. </head>
  8. <body>
  9. <div id="divCustomers"></div>
  10. <script>
  11. $.getJSON("http://www.php.test/jsonp/jsonp.php?jsoncallback=?", function(data) {
  13.     var html = '<ul>';
  14.     for(var i = 0; i < data.length; i++)
  15.     {
  16.         html += '<li>' + data[i] + '</li>';
  17.     }
  18.     html += '</ul>';
  20.     $('#divCustomers').html(html);
  21. });
  22. </script>
  23. </body>
  24. </html>

菜鸟教程jsonp基础知识讲解的更多相关文章

  1. Html基础知识讲解

    Html基础知识讲解 <title>淄博汉企</title> </head> <body bgcolor="#66FFCC" topmar ...

  2. python基础知识讲解——@classmethod和@staticmethod的作用

    python基础知识讲解——@classmethod和@staticmethod的作用 在类的成员函数中,可以添加@classmethod和@staticmethod修饰符,这两者有一定的差异,简单来 ...

  3. java Reflection（反射）基础知识讲解

    原文链接:小ben马的java Reflection(反射)基础知识讲解 1.获取Class对象的方式 1.1)使用 "Class#forName" public static C ...

  4. php基础教程-必备基础知识

    PHP 脚本在服务器上执行. 您应当具备的基础知识 在继续学习之前,您需要对下面的知识有基本的了解: HTML CSS JavaScript 如果您希望首先学习这些项目,请在我们的 首页 访问这些教程 ...

  5. ElasticSearch（四）：关于es的一些基础知识讲解

    上一篇博客更新完之后,我发现一个问题:在我创建索引的时候依旧无法准确的理解每个字段的意义,所以就有了这个. 1. 关于索引 1.1 关于索引的一些基础知识 在创建标准化索引的时候,我们传入的请求体如下 ...

  6. shell基础知识讲解

    第1章 shell基础 1.1 什么叫做shell编程 shell编程也叫做bash高级编程语法 1.2 常见的shell命令解释器 bash            redhat和centos使用 d ...

  7. AC自动机基础知识讲解

    AC自动机 转载自:小白 还可参考:飘过的小牛 1.KMP算法: a. 传统字符串的匹配和KMP: 对于字符串S = ”abcabcabdabba”,T = ”abcabd”,如果用T去匹配S下划线部 ...

  8. 1.spring基础知识讲解

    引言:以下记录一些自己在使用时pringle框架时的一些自己心得合成体会时,如有侵权,请联系本博主. 1. spring基本都使用 spring是一个开源的轻量级框架,其目的是用于简化企业级应用程序开 ...

  9. redis 教程(一)-基础知识

    redis 简介 redis 是高性能的 key-value 数据库,读的速度是110000次/s,写的速度是81000次/s ,它以内存作为主存储 具有以下优点: 1. 支持数据的持久化,将内存中的 ...

随机推荐

  1. ADT基础（三）—— HashMap

    ADT基础(三)-- HashMap 1 哈希表 哈希表(hash table),也叫散列表,是一种非常重要的数据结构,应用场景及其丰富,许多缓存技术(比如memcached)的核心其实就是在内存中维 ...

  2. C++ folly库解读（二） small_vector —— 小数据集下的std::vector替代方案

    介绍 使用场景 为什么不是std::array 其他用法 其他类似库 Benchmark 代码关注点 主要类 small_vector small_vector_base 数据结构 InlineSto ...

  3. CSS的定位布局(position)

    定位 static(默认值) 没有开启定位 relative 相对定位的性质 包含块(containing block)概念 没有开启定位时包含块就是当前元素最近的祖先块元素 开启绝对定位后的元素包含 ...

  4. Redis-第十章节-链表

    目录 数组和链表 链表 对比 总结 1.数组和链表 数组: 数组会在内存中开辟一块连续的空间存储数据,这种存储方式有利也有弊端.当获取数据的时候,直接通过下标值就可以获取到对应的元素,时间复杂度为O( ...

  5. 探索 .NET Core 依赖注入的 IServiceProvider

    在上一篇文章中,我们学习了Microsoft.Extensions.DependencyInjection中的IServiceCollection,包括服务注册转换为ServiceDescriptor ...

  6. 02.从0实现一个JVM语言之词法分析器-Lexer-03月02日更新

    从0实现JVM语言之词法分析器-Lexer 本次有较大幅度更新, 老读者如果对前面的一些bug, 错误有疑问可以复盘或者留言. 源码github仓库, 如果这个系列文章对你有帮助, 希望获得你的一个s ...

  7. CentOS6.4 Install oh-my-zsh

    先安装zsh yum -y install zsh # 查看是否安装完成 cat /etc/shells /bin/sh /bin/bash /sbin/nologin /bin/dash /bin/ ...

  8. 剑指 Offer 24. 反转链表

    剑指 Offer 24. 反转链表 Offer 24 题目描述: 常规解法 本题的解法很常规,没有其他特别的坑,只需要将链表反转即可. package com.walegarrett.offer; / ...

  9. Mongo的相关语法

    mongod的条件操作符 $gt -------- greater than > $gte --------- gt equal >= $lt -------- less than < ...

  10. Java 树结构的基础部分(一）

    二叉树 1.1 为什么需要树这种数据结构 1) 数组存储方式的分析 优点:通过下标方式访问元素,速度快.对于有序数组,还可使用二分查找提高检索速度. 缺点:如果要检索具体某个值,或者插入值(按一定顺序 ...