出现的问题:

花了点时间研究ajax中的json和jsonp的原理,这里记录一下。以前一直在使用ajax调用数据,但是从来没有遇到跨域问题,也从来没有注意过json和jsonp的区别,总是一通乱用。但昨天朋友遇到这个问题,让我帮他研究研究。直接上图。

然后我的第一反应当然是去找哪里少一个分号,但是该加分号的位置都加分号了,如图:

这段简单的代码其他位置我都懂,就是dataType这段不懂,我就去百度,百度告诉我,jsonp是用来解决跨域问题的,但是为什么我用了jsonp还是不能呢?我就去研究研究jsonp,看看jsonp到底封装的什么函数。看看它如何实现跨域的。

什么是跨域和同域:

跨域是指程序运行在当前域中去调用其他域,简单的说就是网页在www.baidu.com中打开去获取www.goolg.com中的数据。这是因为浏览器对于javascript的同源策略的限制。

那什么是同域呢? 简单的解释就是相同域名,端口相同,协议相同即为同域。

这个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险~

study.cn/json/jsonp/jsonp.html
 请求地址  形式  结果
 http://study.cn/test/a.html 同一域名,不同文件夹  成功
 http://study.cn/json/jsonp/jsonp.html 同一域名,统一文件夹  成功
 http://a.study.cn/json/jsonp/jsonp.html 不同域名,文件路径相同  失败
 http://study.cn:8080/json/jsonp/jsonp.html  同一域名,不同端口  失败
 https://study.cn/json/jsonp/jsonp.html  同一域名,不同协议    失败

大牛们如何实现跨域的呢?

OK,我知道了跨域是什么了,那么别人是怎么实现跨域的呢?首先我们知道script标签是可以引入别的域中的js代码的,也就是说script是不受跨域限制的。那我们何不像请求js文件去请求数据呢。Talk nonsense and put it down.

PHP代码如下:

这段代码简简单单的实现了用script标签获取PHP中打印的数据,然后用flightHandler函数回调。但是出现了同样的问题,还是说少一个分号,wtfk,怎么会出现这样的问题呢?然后我重新审视一下代码发现了两个问题。

1、flightHandler并没有执行,因为从上面这串代码中根本看不出来是什么地方执行的。

2、PHP文件返回的是json数据,怎么能直接引用呢?

这就好像代码是这样子的:

mmp,你说这样浏览器不会提醒你少一个分号?到这里我已经找到了为什么会少一个分号。so,得出的结论是返回的应该是去执行的js函数,并且这个函数名是flightHandler,传入的参数就是想要获取的数据,这样回调函数才会打印出我们想要的东西。所以我简单的改了一下如下的PHP文件。

然后我就成功跨域获取到数据了。

jsonp如何知道本地回调函数js函数名呢?

那就是将服务端提供的js脚本是动态生成的就行了。

dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据

然后我在火狐中看到了随机生成的函数名

也就是说我在PHP中返回的执行的js函数名要和这一致,于是我这样修改了一下PHP代码:

ok,到这里就全部完成了,解决的所有疑惑,我也该先我朋友交差了。

ajax中的json和jsonp详解的更多相关文章

  1. json与jsonp详解

     前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域 ...

  2. JSON和JSONP详解

    什么是JSON JSON是一种基于文本的数据交换方式,或者叫做数据描述格式,你是否该选用他首先肯定要关注它所拥有的优点. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascrip ...

  3. ajax、反向ajax、jsonp详解

    ajax详解 什么是ajax 其实ajax已经属于老技术了,现在几乎没人不会用了,在这里主要是把底层的东西给大家分享一下,以备应对装逼的面试官. ajax即“Asynchronous Javascri ...

  4. JAVA中的四种JSON解析方式详解

    JAVA中的四种JSON解析方式详解 我们在日常开发中少不了和JSON数据打交道,那么我们来看看JAVA中常用的JSON解析方式. 1.JSON官方 脱离框架使用 2.GSON 3.FastJSON ...

  5. [转]jsonp详解

    jsonp详解 json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西.今天总算搞明白了.下面一步步来搞清楚jsonp是个什么玩意. ...

  6. jQuery中getJSON跨域原理详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解 前几天我再开发一个叫 河蟹工 ...

  7. php_DWZ-JUI中碰到的问题解决方法详解(thinkphp+dwz)

    原文:php_DWZ-JUI中碰到的问题解决方法详解(thinkphp+dwz) 折腾了两天,dwz删除后,数据不能自动刷新,解决方案,直接看图  . 1. 删除.修改状态后无法刷新记录: 在dwz. ...

  8. 前端后台以及游戏中使用Google Protocol Buffer详解

    前端后台以及游戏中使用Google Protocol Buffer详解 0.什么是protoBuf protoBuf是一种灵活高效的独立于语言平台的结构化数据表示方法,与XML相比,protoBuf更 ...

  9. JS中的函数节流throttle详解和优化

    JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...

随机推荐

  1. cmath函数整理

    double a= pow(double x, double y)://返回x的y次方. double a= sqrt(double x)://返回x的平方根. double a=ceil(doubl ...

  2. C++实现二叉树(建树,前序,中序,后序)递归和非递归实现

    #include<iostream> #include<string.h> #include<stack> using namespace std; typedef ...

  3. CodeForces 723C Polycarp at the Radio (题意题+暴力)

    题意:给定 n 个数,让把某一些变成 1-m之间的数,要改变最少,使得1-m中每个数中出现次数最少的尽量大. 析:这个题差不多读了一个小时吧,实在看不懂什么意思,其实并不难,直接暴力就好,n m不大. ...

  4. bzoj 2087: [Poi2010]Sheep【凸包+极角排序+dp】

    首先处理处理出来哪些边能连--能把羊分成两个偶数部分的,实现是在凸包上枚举极点,极角排序,枚举凸包上点对判断两边羊的个数的奇偶即可,设可以连边为v[i][j]=1 然后设f[i][j]为从i到j个凸包 ...

  5. 洛谷P2787 语文1(chin1)- 理理思维(珂朵莉树)

    传送门 一看到区间推倒……推平操作就想到珂朵莉树 区间推平直接assign,查询暴力,排序的话开一个桶统计,然后一个字母一个字母加就好了 开桶统计的时候忘了保存原来的左指针然后挂了233 //mina ...

  6. 题解报告:hdu 1284 钱币兑换问题(简单数学orDP)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1284 Problem Description 在一个国家仅有1分,2分,3分硬币,将钱N兑换成硬币有很 ...

  7. Linux环境下ZooKeeper集群环境搭建关键步骤

    ZooKeeper版本:zookeeper-3.4.9 ZooKeeper节点:3个节点 以下为Linux环境下ZooKeeper集群环境搭建关键步骤: 前提条件:已完成在Linux环境中安装JDK并 ...

  8. 积分图像 分类: 图像处理 Matlab 2015-06-06 10:30 149人阅读 评论(0) 收藏

    积分图像(integral image)是一种快速计算矩形区域之和的数据结构,常利用它对算法进行加速.积分图像中处的值是原始灰度图像的左上角与当前点所围成的矩形区域内所有像素点的灰度值之和,即: 其中 ...

  9. 事件模型的介绍与Button的ActionListener

    事件监听: 这是个很重要的概念,也是个很重要的模型,vb,vc都是这样用,甚至后面学的web框架也在用.    现在我们可以做很多按钮了吧,但是我们的按钮按它是没反应的,现在我们来看看怎么样才能让它有 ...

  10. 一个页面通过iframe,获取另一个页面的form

    document.getElementsByTagName("iframe")[0].contentWindow.document.forms[0].submit(); var z ...