详细说明json的关键词以及Json和Json PP、ajax和Json PP的区别

序

我第一次听说jsonp其实是两年前。当时我在为一个活动页面做抽奖模块的时候，必须从服务器上获取一个概率。当时我什么都不知道。同事说我会用ajax，同事说dataType会改成jsonp，所以我会改成jsonp。结果活动页面写完了，以后再也没遇到jsonp。在此期间，我一直认为jsonp与ajax密切相关，是xhr的一种特殊的跨域形式.直到一个月前的一次采访，被问到jsonp，我被虐成了狗，我才决定看看jsonp。原来jsonp并不是很难。

为什么要用jsonp？

相信大家都很熟悉跨域同源策略。什么，你没听说过？没关系，既然简单，那就从头开始吧。

如果我写一个索引页面，页面中有一个请求，这个请求就是json数据(不知道json数据的介绍和用法的总结)，简单思考一下，写下面的代码：

script src=' http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script type=' text/JavaScript ' $。Ajax({ URL : ' http://localhost/a . JSON '，dataType: 'json '，success:函数(数据){ console.log(数据)；} })/脚本{'name' :' hanzichi '，' age' : 10}楼主把这两个文件都放在了wamp下的www文件夹中，而ajax请求并没有跨域，所以结果是完美的：

但是如果我的json文件和索引文件不在同一个域，也就是不知道跨域(不知道JavaScript的跨域同源策略)怎么办？

尝试在wamp下打开一个新的apache端口(不知道怎么打开，多端口访问参考WampServer)，将json文件放在这个服务端口的文件夹中(楼主设置的端口号是8080，默认是80)，尝试发送请求：

script src=' http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script type=' text/JavaScript ' $。Ajax({ URL : ' http://localhost :8080/a . JSON '，dataType: 'json '，success:函数(数据){ console.log(数据)；} })/脚本

很明显，提示是跨域的！搞什么？这时，jsonp就准备好了！

魔法脚本标签。

与jsonp密切相关的是脚本标签，但传统意义上的xhr或ajax与此无关！

然后看上面的index.html代码，我们看到页面引用了百度cdn的jquery路径。我们似乎已经习惯了这种方式，但是仔细想想，脚本标签完全是跨域的.是的，jsonp实现的核心是利用脚本标签的跨域能力！所以我们灵机一动，似乎可以这样做，动态生成一个脚本标签，将json的url分配给脚本的src属性，然后将脚本标签插入dom。

body script src=' http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script type=' text/JavaScript ' var s=document . createelement(' script ')；s . src=' http://localhost :8080/a . JSON '；document . body . appendchild；/script/body我们创建了一个script标记，包装在标记中的内容只是所需的json数据，但是错误报告如下：

原因是json数据不是合法的js语句，将上面的json数据放在回调函数中是最简单的方法：

body script src=' http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script type=' text/JavaScript '函数jsoncallback(JSON){ console . log(JSON)；} var s=document . create element(' script ')；s . src=' http://localhost :8080/a . JSON '；document . body . appendchild；/script/body jsoncallback({ ' name ' : ' hanzichi '，' age ' : 10 })；

当然，此时的a.json文件不必这样命名，改成a.js也不成问题

如果您与服务器交互，也是如此，例如php:

body script src=' http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script type=' text/JavaScript '函数jsoncallback(JSON){ console . log(JSON)；} var s=document . create element(' script ')；s . src=' http :http://localhost :8080/test . PHP？callback=jsoncallback '；document . body . appendchild；/剧本/身体？PHP $ JSON data=' { ' name ' : ' hanzichi '，' age ' : 10 }echo $_GET['回调']。'('.$jsondata。')';需要注意的是，jsonp提供的url(也就是动态生成的脚本标签的src)，不管看起来是什么样子，最终都会生成并返回一段js代码。

用JQuery封装jsonp。

为了方便开发，jq还将jsonp封装在ajax方法中。

script src=' http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script type=' text/JavaScript ' $。Ajax({ URL : ' http://localhost :8080/a . JSON '，dataType: 'jsonp '，jsonpCallback: ' CallBack '，success:函数(数据){ console.log(数据)；} });/script CallBack({ ' name ' : ' hanzichi '，' age ' : 10 })；上面的代码是针对回调函数名在请求文件中被写死的情况。因为json文件是被请求的，所以json不是服务器端的动态语言，不能被解析。如果是php或其他服务器端语言，则不需要编写死函数名，例如：

script src=' http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script type=' text/JavaScript ' $。Ajax({ URL : ' http://localhost :8080/test . PHP '，dataType: 'jsonp '，success:函数(数据){ console.log(数据)；} });/脚本？PHP $ JSON data=' { ' name ' : ' hanzichi '，' age ' : 10 }echo $_GET['回调']。'('.$jsondata。')';当然，还有几种类似的包装方法：

//1$.getJSON(' http://localhost :8080/test . PHP？回调=？”，函数(数据){ console.log(数据)；});//2$.get(' http://localhost :8080/test . PHP '，function(data){ console . log(data)；}，' jsonp ')；需要注意的是，getJSON方法的请求地址的url需要带回调=？因为jq封装这个方法时，没有默认的回调函数变量callback，所以php中的$_GET['callback']找不到变量值。

通用jq方法url不需要指定回调参数。对于jQuery中的jsonp，会自动添加回调参数。默认情况下，jQuery生成的jsonp请求中的回调参数是一个看似随机的名字，像callback=jQuery 200023559735575690866 _ 1434954892929，对应的是处理函数成功，一般不需要专门处理。第二，如果想把回调名写死，可以参考上面。

摘要

由于同源策略的限制，XmlHttpRequest只允许请求当前源的资源(域名、协议、端口)。为了实现跨域请求，可以通过脚本标签实现跨域请求，然后在服务器端输出JSON数据并执行回调函数，从而解决跨域数据请求，这是jsonp的核心。

Jsonp原则：

1.首先在客户端注册一个回调，然后将回调的名称发送给服务器。2.服务器生成json数据。然后，在javascript语法中，生成一个函数，该函数的名称是传递的参数jsonp。最后，json数据以引用的方式直接放入函数中，从而生成带有js语法的文档并返回给客户端。3.客户端浏览器解析脚本标签并执行返回的javascript文档。此时，数据作为参数被传递到客户端预定义的回调函数中。(回调函数动态执行)。

json和jsonp、ajax和jsonp的区别。

虽然json和jsonp只有一个字母不同，但它们之间没有关系。

Json是一种轻量级的数据交换格式。

Jsonp是一种跨域数据交换协议。

json的优点：(1)基于纯文本传输极其简单；(2)轻量级数据格式适合互联网传输；(3)它易于编写和解析。

ajax和jsonp的区别：

相似性：他们都要求一个网址。

区别：ajax的核心是通过xmlHttpRequest获取内容。

jsonp的核心是动态添加脚本标签来调用服务器提供的js脚本。