蛋疼的JSONP
2014-01-09 09:51
351 查看
test.php内容如下:
test.html内容如下:
如上,test.php和test.html都放在xxxx.com
访问xxxx.com/test.html点击test按钮,结果是:
data: hello
符合预期结果。
把test.html放在oooo.com,以实现跨域AJAX,访问oooo.com/test.html点击按钮则显示:
TypeError: json is null
console.log('data: ' + json[0]);
非常蛋疼。。。。
看了一些资料有点明白了,所谓的jsonp,并不是一种数据格式而是在json串前添加一个script标签,然后src指向那个url,见下文:
http://bbs.csdn.net/topics/390459676
因为本地请求并非跨域,所以直接返回json串没有额外添加什么标签,所以可以正常解析,但是跨域的时候返回的是非标准json串,所以解析之后不正确。
<?php echo '["hello", "yes"]';
test.html内容如下:
<!DOCTYPE html> <html> <head> <title>TEST</title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> </head> <body> <button id="test">TEST</button> <script> $(function(){ $("#test").click(function(){ $.ajax({ type: 'POST', url: 'http://xxxx.com/test.php', data: 'text=你叫什么名字?', dataType:'JSONP', complete: function(data, status){ var json = $.parseJSON(data.responseText); console.log('data: ' + json[0]); } }); }); }); </script> </body> </html>
如上,test.php和test.html都放在xxxx.com
访问xxxx.com/test.html点击test按钮,结果是:
data: hello
符合预期结果。
把test.html放在oooo.com,以实现跨域AJAX,访问oooo.com/test.html点击按钮则显示:
TypeError: json is null
console.log('data: ' + json[0]);
非常蛋疼。。。。
看了一些资料有点明白了,所谓的jsonp,并不是一种数据格式而是在json串前添加一个script标签,然后src指向那个url,见下文:
http://bbs.csdn.net/topics/390459676
因为本地请求并非跨域,所以直接返回json串没有额外添加什么标签,所以可以正常解析,但是跨域的时候返回的是非标准json串,所以解析之后不正确。
相关文章推荐
- JS获取节点的兄弟,父级,子级元素的方法
- Js实现当前导航菜单高亮显示
- js 模块defin化讲解
- JS获取浏览器高度和宽度
- JS验证手机号码和邮箱地址
- JavaScript取随机整数的方法
- 用JS打开新窗口,防止被浏览器阻止的方法
- js中window.open()的所有参数详细解析
- webapi 返回数据类型控制(json,xml)
- JSON对象转字符串的一些方法
- JSONP的学习(收集整理)
- 初涉JavaScript模式 (5) : 原型模式 【一】
- javaScript typeof 和数据类型
- jsp乱码问解决及编码详解
- jsp页面中的代码执行加载顺序介绍
- litjson读取数据示例
- js中window.open()的所有参数详细解析
- JS获取节点的兄弟,父级,子级元素的方法
- js获取select标签选中值的两种方式
- js获取通过ajax返回的map型的JSONArray的方法