说明总结：

1.ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

2.但是ajax和jsonp在数据传输的过程中都是可以用json格式的数据。

3.其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。

4.ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；

服务器端代码：

 //获取客户端的信息

     if (isset($_GET['code'])) {

         if ($_GET['code'] == "CA1998") {

             $flightId = $_GET['code'];

             $price = 1000;

         }

         else if ($_GET['code'] == "CA1997") {

             $flightId = $_GET['code'];

             $price = 2000;

         }

         else{

             $flightId = 0;

             $price = 0;

         }

         $flightHandler = array('flightId'=>$flightId,'price'=>$price);

         $flightHandler = json_encode($flightHandler);

17         $flightHandler = "flightHandler(".$flightHandler .");";// 将数据进行了包装，包装成了一个调用的函数，这一步很重要。

         print_r($flightHandler);

     }

获取到的服务器数据：

 flightHandler({

     "flightId": "CA1998",

     "price": 2000

 });
5 //其实就在服务器端把json数据包装成了一个js的函数，将一个对象作为参数放在函数里面。所以跟ajax用XMLHttpRequest接收数据是不一样的。

传统ajax获取到的json数据：

 {

     "flightId": "CA1998",

     "price": 2000

 }

客户端代码：

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>XHR</title>

     <link rel="stylesheet" href="../templates/css/verify.css">

 </head>

 <body>

     <label for="flightId">输入：CA1998 或者 CA1997 </label> <input type="text" id="flightId" name="flightId"> <input type="button" value="原生js获取jsonp数据（php包装数据）" onclick="flightHandler0()"><input type="button" value="原生js获取jsonp数据（js包装数据）" onclick="flightHandler1()">

  <script type="text/javascript">

     // 得到航班信息查询结果后的回调函数

     function flightHandler(data){

         if (data.price != 0) {

              alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '航班 ' + data.flightId );

         } else{

             alert("EORROR");

         };

     };

     function flightHandler0(){

         var flightId = document.getElementById('flightId').value;

          //供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）

          //其实参数都是前端和后台程序员规定的，前端传过去，后端判断获取即可。

         var url = "flightResult.php?code=" + flightId +"&callback=flightHandler";

         // 创建script标签，设置其属性

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

         script.setAttribute('src', url);

         // 把script标签加入head，此时调用开始

         document.getElementsByTagName('head')[0].appendChild(script);

     };

     </script>

 </body>

 </html>

设想：

上面的方法是在服务器端把json数据包装在回调函数里面，那能不能在客户端来做这个事情呢？但是试了一下感觉行不通。

在服务器端把

$flightHandler = "flightHandler(".$flightHandler .");";

去掉。

留言中有用jquery写的jsonp的例子。

最后附上用原生js和jquery分别处理jsonp的例子：

js：http://snowinmay.net/ajax/xhr-js-jsonp.html

jsonp：http://snowinmay.net/ajax/xhr-jquery-jsonp.html

所以返回数据应该是json数据，但是在客户端好像没有很好的办法来包装这个数据。如果有的话以后再补充。

用原生js来处理跨域的数据（jsonp）的更多相关文章

  1. 原生js实现ajax跨域(兼容IE8,IE9)

    html设置meta标签兼容360兼容模式和IE怪异模式 <meta http-equiv="X-UA-Compatible" content="IE=9;IE=8 ...

  2. Js C# 实现跨域访问数据

    使用项目一的js调用项目二的数据 1.项目一 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta ...

  3. Vue.js 2.0 跨域请求数据

    Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了 axios .接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的 ...

  4. JS实现跨域请求数据--jsonp

    * { margin: 0; padding: 0; } input { width: 300px; height: 30px; border: 1px solid lightgray; margin ...

  5. JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp）

    1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...

  6. 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  7. js中各种跨域问题实战小结（一）

    什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...

  8. JS跨域请求之JSONP

    在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. JSONP的产生 1.众所周知,Ajax请 ...

  9. js中各种跨域问题实战小结

    什么是跨域?为什么要实现跨域呢?   这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源 ...

随机推荐

  1. Windows系统中设置Python程序定时运行方法

    Windows系统中设置Python程序定时运行方法 一.环境 win7 + Python3.6 二.步骤 1,在Windows开始菜单中搜索“计划任务”,并且点击打开“计划任务”: 2.点击“创建基 ...

  2. 3、pandas的loc和iloc数据筛选

    选择列: 选择一列: 选择多列(选择的内容变成list,也就是要两个方括号): 选择一行或多行(loc函数): 选择连续的行(以索引标签为选择参数): 选择非连续的行(以索引标签为选择参数): 选择包 ...

  3. windows下常用的几个批处理脚本

    1.windows下对比两个文件内容,有差异则执行一个任务: 适用场景:比如你的数据库备份结果的日志每天会形成一个文件,如下图,你可以通过此脚本检测到文件的变化,并执行发送告警邮件通知你数据库备份异常 ...

  4. update与select关联执行效率问题

    UPDATE fl_user_space u SET u.`course_count` = (SELECT COUNT(*) FROM fl_course c WHERE c.uid = u.uid) ...

  5. PyCharm笔记之搭建Python开发环境

    新建一个空helloworld项目,然后新建一个main.py文件: 此时还无法运行,因为没有配置项目的入口脚本,通过下图的步骤指定一个: 在scrip框里填入你的入口脚本 之后就可以点击绿色的播放按 ...

  6. ag 命令的帮助文档

    安装 the silver searcher 在各大平台上都可以从软件库直接安装.除了 Debian/Ubuntu 外,其他系统使用的包名都是一样的. MacOS: brew install the_ ...

  7. Mac通过安装Go2Shell实现“在当前目录打开iTerm2”

    先上效果图: 1.从官网下载最新的版本,不要从苹果商店下载,因为苹果商店的版本比较旧,只支持Finders10.6~10.10,不支持最新的版本 http://zipzapmac.com/Go2She ...

  8. Almost Union-Find (并查集+删除元素)题解

    思路: 当时只有暴力的思想,1.3都很好达到,只要加一个sum[ ]和num[ ]就可以,但是2比较麻烦,不知道谁以p为根,就想直接扫描然后一个个和p脱离关系,果然超时emmm.通常的想法是我们先用一 ...

  9. 在VMware14上安装centos6.5

    打开vmware14  =>  创建新虚拟机(即再建一个linux),已有光盘映像文件,正常操作即可.

  10. Windows，远程计算机：X.X.X.X，这可能是由于CredSSP加密Oracle修正

    https://blog.csdn.net/wyhwlls/article/details/80320301 近期window 10家庭版更新后,远程桌面连不到服务器了 网上有卸载补丁,修改组策略什么 ...