json和jsonp的使用区别

一.    跨域请求的概念

  JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。

二.    json和jsonp

  JSON是一种基于文本的数据交换方式(不支持跨域),而JSONP是一种非官方跨域数据交互协议。

  使用json格式传递数据的客户端代码如下:

 $(function () {
var user = {
"username": "HelloWorld"
}; $.ajax({
url: "http://localhost:8080/Changyou/UserInfo",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json", //json不支持跨域请求,只能使用jsonp
data: {
user: JSON.stringify(user)
},
success: function (data) {
$("#user_name")[0].innerHTML = data.user_name;
$("#user_teleNum")[0].innerHTML = data.user_teleNum;
$("#user_ID")[0].innerHTML = data.user_ID;
},
error: function () {
alert("请求超时错误!");
}
})
});

  然而,简单地使用json并不能支持跨域资源请求,为了解决这个问题,需要采用jsonp数据交互协议。众所周知,js文件的调用不受跨域与否的限制,因此如果想通过纯web端跨域访问数据,只能在远程服务器上设法将json数据封装进js格式的文件中,供客户端调用和进一步处理,这就是jsonp协议的原理。该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

  简单的说,就是json不支持跨域,而js可以跨域,因此在服务器端用客户端提供的js函数名将json数据封装起来,再将函数提供给客户端调用,从而获得json数据。

  开发过程中,如果出现类似 “Origin ****** is not allowed by Access-Control-Allow-Origin.” 的错误,则可能是由于json数据不支持跨域导致的,应考虑使用jsonp协议。

  如果出现类似 ”SyntaxError: Unexpected token ':'. Parse error.“ 的错误,则可能是由于返回的json数据没有用”callback“传递的函数名封装导致的。

  客户端代码如下:

 $(function () {

     var user = {
"username": "HelloWorld"
}; $.ajax({
url: "http://localhost:8080/Changyou/UserInfo",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "jsonp", //json不支持跨域请求,只能使用jsonp
data: {
user: JSON.stringify(user)
},
jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名,默认为callback
jsonpCallback: "userHandler", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function (data) {
$("#user_name")[0].innerHTML = data.user_name;
$("#user_teleNum")[0].innerHTML = data.user_teleNum;
$("#user_ID")[0].innerHTML = data.user_ID;
},
error: function () {
alert("请求超时错误!");
}
})
});

  服务器端代码如下:

 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json; charset=utf-8");
String username = new String(request.getParameter("user").getBytes("ISO-8859-1"),"utf-8");
String callback = new String(request.getParameter("callback").getBytes("ISO-8859-1"),"utf-8");
System.out.println("接收到的数据:" + username);
System.out.println("callback的值:" + callback);
JSONObject user = JSONObject.fromObject(username);
System.out.println("接收到的用户名:" + user.get("username"));
JSONObject userinfo = new JSONObject();
userinfo.put("user_name", "张鸣晓");
userinfo.put("user_teleNum", "18810011111");
userinfo.put("user_ID", "123456789098765432");
PrintWriter out = response.getWriter();
String backInfo = callback + "(" + userinfo.toString() + ")"; //将json数据封装在callback函数中提供给客户端
out.print(backInfo);
out.close();
}

尽管客户端没有实现userHandler函数,但也能成功运行,原因就是jquery在处理jsonp类型的ajax时,自动帮你生成回调函数并把数据取出来供success属性方法来调用。

更详细解释,参见http://kb.cnblogs.com/page/139725/

json和jsonp的使用区别的更多相关文章

  1. json 与jsonp 特点及区别

    简单描述JSON跟JSONP的区别以及实战 什么是JSON? 前面简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式,你是否该选用他首先肯定要关注它所拥有的优点. JSON的优点 ...

  2. JSON和JSONP有哪些区别,PhoneGap跨域请求如何实现

    前言 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socke ...

  3. json和jsonp的区别,ajax和jsonp的区别

    json和jsonp虽然只有一个字母的区别,但是它们之间扯不上关系. json是一种轻量级的数据交换格式. jsonp是一种跨域数据交互协议. json的优点:(1)基于纯文本传递极其简单,(2)轻量 ...

  4. json与jsonp区别浅析(json才是目的,jsonp只是手段)

    一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展 ...

  5. json与jsonp区别浅析(json才是目的,jsonp只是手段) (转)

    一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展 ...

  6. JSON跟JSONP的区别以及实战

    前言 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socke ...

  7. JSON和JSONP的区别,以及使用方法

    (一)场景 在拉京东城市选择的基础数据时候,遇到被服务器拒绝的情况,也就是ajax跨域问题 (二)json和jsonp 说的直白一点,在我们做ajax异步的一些功能的时候,一定会或多或少的遇到两个问题 ...

  8. 小渣渣的json和jsonp和ajax的实质和区别

    json和jsonp和ajax的实质和区别ajax的两个问题 1.ajax以何种格式来交换数据 2.跨域的需求如何解决 数据跨域用自定义字符串或者用XML来描述 跨域可以用服务器代理来解决jsonp来 ...

  9. Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别

    为什么要用jsonp? 相信大家对跨域一定不陌生,对同源策略也同样熟悉.什么,你没听过?没关系,既然是深入浅出,那就从头说起. 假如我写了个index页面,页面里有个请求,请求的是一个json数据(不 ...

随机推荐

  1. pgm12

    作为 inference 部分的小结,我们这里对 machine learning 里面常见的三个 model 的 inference 问题进行整理,当然很幸运的是他们都存在 tractable 的算 ...

  2. python 模块之-hashlib

    python 模块hashlib import hashlib m=hashlib.md5()         # 生成MD5加密对象 m.update('jiami-string'.encode(' ...

  3. MT【235】两道函数题

    已知$g(x)=x^2-ax+4a$,记$h(x)=|\dfrac{x}{g(x)}|$,若$h(x)$在$(0,1]$上单调递增,求$a$的取值范围. 解答: 已知$$g(x)=\begin{cas ...

  4. IScroll的那些事——内容不足时下拉刷新

    之前项目中的列表是采用的IScroll,但是在使用IScroll有一个问题就是:当内容不足全屏的时候,是木有办法往下拉的,这样就达不到刷新的目的了.[这是本人工作中遇到的,具体例子具体分析,这里只作一 ...

  5. Shell基础知识(四)

    字符串详解 字符串可以由 单引号/双引号/无引号 包围.如下所示 >> str1=hello str2="hello" str3='hello' << 三种 ...

  6. WorkFlow基础实战

    WorkFlow使用笔记---- 状态机工作流的使用: 1.首先,项目的目标框架要选择.Net4.5版本,才有状态机工作流. 2.新建“活动”项,先从工具栏拖出一个StateMachine,然后添加其 ...

  7. AtCoder Grand Contest 004 C - AND Grid

    题意: 给出一张有紫色点的网格,构造一张红点网格和一张蓝点网格,使红蓝点的交集为紫色点. 保证网格四周没有紫色点. 构造一下,使蓝点和红点能够到每个点. #include<bits/stdc++ ...

  8. 关于promise的一些用法

    Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息. Promise对象有以下两个特点 ...

  9. spring 项目分开发和生产环境

    1.pom 文件修改 <profile> <!-- 本地开发环境 --> <id>dev</id> <properties> <pro ...

  10. nginx 反向代理案例

    server{ listen ssl; server_name a.xxxxx.com; root /home/wwwroot/default/asqumo; ssl_protocols TLSv1. ...