1.什么是jsonp

1.1 同源策略

浏览器同源策略的限制，XmlHttpRequest只允许请求当前源（相同域名、协议、端口）的资源。

-1）jsonp只支持get请求

-2）不受同源策略限制 ，兼容性好 不需要XMLHttpRequest（ActiveX）支持,通过js回调函数返回结果

-3）不能解决 不同域的两个页面之间js调用的问题

2. jsonp 原理

动态添加一个script标签，get链接上发送回调函数名称 传给服务器 服务器获取回调函数名称 返回这个函数名称的JS函数（拼装函数） json数据作为函数的实际参数传入 返回的数据是js函数  在前端调用回调函数（ json数据传入） 执行回调函数

3.实例

先来说说 服务端应该返回的数据形式 如下所示 用的php  thinphp框架编写的 访问URL 是

http://91hx.xicp.cn:8989/Service/Validata/testJsonP?callback=jsonpCallback callback后面的名字要传给服务器的 后端拼装成一个js回调函数 这样前台json数据就作为回调函数的参数传入 获取到数据了
 public function  testJsonP(){

        $jsonname =I('get.callback');//获取URL上的callback名称 也就是获取jsonpCallback

        $a = [name=>'张三',sex=>'男',msg=>'返回成功！'];// 一个数组数据

       $json = json_encode($a);// 转成json数据

        echo  $jsonname.'('.$json.');';//正确的格式应该是这样 jsonpCallback({"name":"\u5f20\u4e09","sex":"\u7537","msg":"\u8fd4\u56de\u6210\u529f\uff01"}); 不要忘记分号; 这样返回的才是一个js函数 前台肯定有这个函数名字才行

}

tip:关联数组　上面例子 $a = array( "msg" => "返回成功！")

前台 访问URL http://localhost:63343/H5/jsonP.html　动态添加一个script标签 src里 调用回调函数 jsonpCallback() . ?callback=jsonpCallback名字随便起 后端获取的就是jsonpCallback这个名字而已

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<script type="text/javascript">

    function jsonpCallback(date){

        console.log(date);

        alert(date);

        alert(date.msg);

    }

    var script =document.createElement('script');

    script.src='http://91hx.xicp.cn:8989/Service/Validata/testJsonP?callback=jsonpCallback';

    document.body.insertBefore(script,document.body.firstChild);

</script>

</body>

</html>

　我们可以在浏览器里 这里我用的谷歌直接查看 数据是否访问正确 切换到Network标签下 可以看到生成的访问地址 点击然后

　

这下面的图 点击一下左侧链接   切换到Response就可以看到响应的数据了 跟前端写的函数名要一致 里面的json数据就是 那个函数的参数 传入 别忘记有分号;

前端我们已经console.log 数据了 也可以查看 切换到Console标签下

JSONP 理解 和 实例 讲解的更多相关文章

  1. S3C2440上RTC时钟驱动开发实例讲解(转载)

    嵌入式Linux之我行,主要讲述和总结了本人在学习嵌入式linux中的每个步骤.一为总结经验,二希望能给想入门嵌入式Linux的朋友提供方便.如有错误之处,谢请指正. 共享资源,欢迎转载:http:/ ...

  2. 实例讲解MySQL联合查询

    好了终于贴完了MySQL联合查询的内容了,加上上一篇一共2篇,都是我转载的,实例讲解MySQL联合查询.那下面就具体讲讲简单的JOIN的用法了.首先我们假设有2个表A和B,他们的表结构和字段分别为: ...

  3. 实例讲解基于 React+Redux 的前端开发流程

    原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...

  4. TCP入门与实例讲解

    内容简介 TCP是TCP/IP协议栈的核心组成之一,对开发者来说,学习.掌握TCP非常重要. 本文主要内容包括:什么是TCP,为什么要学习TCP,TCP协议格式,通过实例讲解TCP的生命周期(建立连接 ...

  5. SQL Server 之 事务与隔离级别实例讲解

    SQL Server 之 事务与隔离级别实例讲解 SQL Server 实现了6个隔离级别来防止并发情况下,类似企图并发的访问或修改同一数据时问题的发生.本文将带你体验全部6个隔离级别.正如你接下来将 ...

  6. Python多线程、多进程和协程的实例讲解

    线程.进程和协程是什么 线程.进程和协程的详细概念解释和原理剖析不是本文的重点,本文重点讲述在Python中怎样实际使用这三种东西 参考: 进程.线程.协程之概念理解 进程(Process)是计算机中 ...

  7. ContentProvider数据库共享之——实例讲解

      版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/harvic880925/article/details/44591631 前言:现在这段时间没这 ...

  8. MySQL Group By 实例讲解（二）

    mysql group by使用方法实例讲解 MySQL中GROUP BY语句用于对某个或某些字段查询分组,并返回这个字段重复记录的第一条,也就是每个小组(无排序)里面的第一条. 本文章通过实例向大家 ...

  9. 基于pythonselect.select模块通信的实例讲解

    基于python select.select模块通信的实例讲解 要理解select.select模块其实主要就是要理解它的参数, 以及其三个返回值. select()方法接收并监控3个通信列表, 第一 ...

随机推荐

  1. 设计模式C#实现（十六）——中介者模式

    意图 0 适用性 1 结构 2 实现 3 效果 4 参考 5 意图 用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显示地相互引用,从而使其耦合松散,而且可以独立地改变他们之间的交互. 适用 ...

  2. 在AndroidStudio v1.2.0中导入或增加新项目或工程（导入第三方类库或工程）

    以下说明基于AndroidStdudio版本v1.2 由于AndroidStudio项目止录与Eclipse中的Worksapce在意义上的改变,所以导入新包或建立新项目时并不和以前那样了. 下面是我 ...

  3. centos 6.6 使用tomcat6部署solr5.3.1

    Solr现在是一个独立的服务器. 从Solr5.0开始,Solr不再发布为在任何Servlet容器中部署的“war”Web应用程序包(Web Application Archive).网上关于solr ...

  4. 【小白的CFD之旅】17 需要编程?

    小白经过大半个多月对于CFD的学习,终于对其大概轮廓有了初步的了解,尤其是在与小牛师兄交流之后.小牛师兄毕竟是专业学流体力学的,小白认为在流体力学理论方面自己与牛师兄至少存在5年的差距.不过小白并不气 ...

  5. 我的CS考研路

    说在前面 从去年7月15号正式准备考研以来,直到今天,3月19号,一共经历8个多月,考研初步告捷,在此想跟大家分享一下自己的经验,希望能对接下来考研的学弟学妹们有所帮助. 首先介绍下我自己的情况,本科 ...

  6. NYOJ 485

    A*B Problem 描述 设计一个程序求出A*B,然后将其结果每一位相加得到C,如果C的位数大于等于2,继续将C的各位数相加,直到结果是个一位数k. 例如: 6*8=48: 4+8=12: 1+2 ...

  7. 简易的轮廓边生成（N和V dot点乘方式）（surface方式和vs ps 方式的分别实现）

    一.前面心情 1.公司我的架构发生变动,从技术中心到项目组了,但不管怎么样,该看的还要看,总会用到 二.实现 三.参考: http://blog.csdn.net/cubesky/article/de ...

  8. [LeetCode] Wiggle Sort

    Problem Description: Given an unsorted array nums, reorder it in-place such that nums[0] <= nums[ ...

  9. 2016-2017-2 《Java程序设计》课程学生博客和代码托管链接

    2016-2017-2 <Java程序设计>课程学生博客和代码托管链接 博客 1552 20155201 李卓雯 20155202 张 旭 20155203 杜可欣 20155204 王 ...

  10. Chrome开发者工具详解

    http://www.cnblogs.com/LibraThinker/p/5948448.html http://www.cnblogs.com/LibraThinker/p/5981346.htm ...