【JavaScript】--重点解析之跨域请求
JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
JSON是用字符串来表示Javascript对象,例如可以在django中发送一个JSON格式的字符串给客户端Javascript,Javascript可以执行这个字符串,得到一个Javascript对象。
json就是js对象的一种表现形式(字符串的形式)
JSON对象语法
json语法:
- 数据在名称/值对中
- 数据由逗号分隔
- 花括号保存对象(对象需要使用大括号起来)
- 方括号保存数组(数组使用中括号括起来)
var person = {"name":"zhangSan", "age":"", "sex":"male"};
alert(person.name + ", " + person.age + ", " + person.sex);
注意,key也要在双引号中!
JSON值:
- 数字 (整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(true 或 false)
- 数组 (在方括号中)
- 对象 (在花括号中)
- null
var person = {"name":"alex", "age":"", "sex":"male", "hobby":["girl", "movie", "travle"]};
alert(person.name + ", " + person.age + ", " + person.sex + ", " + person.hobby);
带有方法的JSON对象:
var person = {"name":"alex",
"sex":"men",
"teacher":{
"name":"tiechui",
"sex":"half_men",
},
"bobby":['basketball','running'], "getName":function() {return 80;}
};
alert(person.name);
alert(person.getName());
alert(person.teacher.name);
alert(person.bobby[0]);
js接受python的json对象:
在json的编码过程中,会存在从python原始类型向json类型的转换过程,具体的转换
如下: python --> json
dict object
list,tuple array
str,unicode string
int,long,float number
True true
False false
None null
js与django的交互
def login(request):
obj={'name':"alex111"}
return render(request,'index.html',{"objs":json.dumps(obj)})
#----------------------------------
<script>
var temp={{ objs|safe }}
alert(temp.name);
alert(temp['name'])
</script>
JSON与XML比较
- 可读性: XML胜出;
- 解码难度:JSON本身就是JS对象(主场作战),所以简单很多;
- 流行度: XML已经流行好多年,但在AJAX领域,JSON更受欢迎。
parse()和.stringify()
parse用于从一个字符串中解析出json对象,如 var str = '{"name":"yuan","age":"23"}' 结果: JSON.parse(str) Object age: ""
name: "yuan" 注意:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常。 stringify()用于从一个对象解析出字符串,如 var
a = {a:1,b:2} 结果: JSON.stringify(a) "{"a":1,"b":2}"
跨域请求
同源策略机制
浏览器有一个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指,域名,协议,端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下,不能读写对方的资源。
简单的来说,浏览器允许包含在页面A的脚本访问第二个页面B的数据资源,这一切是建立在A和B页面是同源的基础上。
如果Web世界没有同源策略,当你登录淘宝账号并打开另一个站点时,这个站点上的JavaScript可以跨域读取你的淘宝账号数据,这样整个Web世界就无隐私可言了。
jsonp的js实现
JSONP是JSON with Padding的略称。可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
JSONP就像是JSON+Padding一样(Padding这里我们理解为填充)
#---------------------------http://127.0.0.1:8001/login def login(request):
print('hello ajax')
return render(request,'index.html')
#---------------------------返回用户的index.html
<h1>发送JSONP数据</h1> <script>
function fun1(arg){
alert("hello"+arg)
}
</script>
<script src="http://127.0.0.1:8002/get_byjsonp/"></script> #-----------------------------http://127.0.0.1:8002/get_byjsonp def get_byjsonp(req):
print('8002...')
return HttpResponse('fun1("苑昊")')
这其实就是JSONP的简单实现模式,或者说是JSONP的原型:创建一个回调函数,然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递,完成回调。
将JSON数据填充进回调函数,这就是JSONP的JSON+Padding的含义吧。
一般情况下,我们希望这个script标签能够动态的调用,而不是像上面因为固定在html里面所以没等页面显示就执行了,很不灵活。我们可以通过javascript动态的创建script标签,这样我们就可以灵活调用远程服务了。
<script>
function addScriptTag(src){
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
function fun1(arg){
alert("hello"+arg)
} window.onload=function(){
addScriptTag("http://127.0.0.1:8002/get_byjsonp/")
}
</script>
现在将你自己在客户端定义的回调函数的函数名传送给服务端,服务端则会返回以你定义的回调函数名的方法,将获取的json数据传入这个方法完成回调:
<script>
function addScriptTag(src){
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
function fetch(arg){
alert("hello"+arg)
} window.onload=function(){
addScriptTag("http://127.0.0.1:8002/get_byjsonp?callback=fetch")
} </script> #--------------------------------http://127.0.0.1:8002/get_byjsonp
def get_byjsonp(req): callback=req.GET.get('callback')
print(callback)
return HttpResponse('%s("yuan")'%callback)
jQuery对JSONP的实现
jQuery框架也当然支持JSONP,可以使用$.getJSON(url,[data],[callback])方法
<script type="text/javascript">
$.getJSON("http://127.0.0.1:8002/get_byjsonp?callback=?",function(arg){
alert("hello"+arg)
});
</script>
结果是一样的,要注意的是在url的后面必须添加一个callback参数,这样getJSON方法才会知道是用JSONP方式去访问服务,callback后面的那个问号是内部自动生成的一个回调函数名。
当然,如果说我们想指定自己的回调函数名,或者说服务上规定了固定回调函数名该怎么办呢?我们可以使用$.ajax方法来实现
<script type="text/javascript" src="/static/jquery-2.2.3.js"></script> <script type="text/javascript">
$.ajax({
url:"http://127.0.0.1:8002/get_byjsonp",
dataType:"jsonp",
jsonp: 'callbacks',
jsonpCallback:"fetch"
});
function fetch(arg){
alert(arg);
}
</script> #--------------------------------- http://127.0.0.1:8002/get_byjsonp
def get_byjsonp(req): callback=req.GET.get('callbacks')
print(callback)
return HttpResponse('%s("yuan")'%callback)
another way:
<script type="text/javascript" src="/static/jquery-2.2.3.js"></script> <script type="text/javascript">
$.ajax({
url:"http://127.0.0.1:8002/get_byjsonp",
dataType:"jsonp",
jsonp: 'callbacks',
success:function(data){
alert(data)
}
}); </script>
#-------------------------------------http://127.0.0.1:8002/get_byjsonp
def get_byjsonp(req): callback=req.GET.get('callbacks')
print(callback) #jQuery223015502220591490135_1477560648881
return HttpResponse("%s('yuan')"%callback)
没错,jsonpCallback就是可以指定我们自己的回调方法名fetch,远程服务接受callback参数的值就不再是自动生成的回调名,而是fetch。dataType是指定按照JSOPN方式访问远程服务。callback必须有,因为服务端根据它来去回调函数的名字,如果是自已定义的,那么就得有自定义的名字:jsonpCallback:"fetch";如果不加这个参数,则自动生成一个随机名字。
利用jQuery可以很方便的实现JSONP来进行跨域访问。
【JavaScript】--重点解析之跨域请求的更多相关文章
- 原生JavaScript封装的jsonp跨域请求
原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...
- javascript fetch 跨域请求时 session失效问题
javascript 使用fetch进行跨域请求时默认是不带cookie的,所以会造成 session失效. fetch(url, { method: 'POST', credentials: 'in ...
- sonp跨域请求
sonp跨域请求学习笔记 前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可以 ...
- js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下 跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...
- JavaScript 跨域请求
1.最简单通用的做法就是 反向代理 通过nginx搭建一个反向代理服务器,通过将跨域的请求配置成转发:此方法适用于动静分离时,很多跨域请求的情况下: server { listen 8 ...
- spring boot跨域请求访问配置以及spring security中配置失效的原理解析
一.同源策略 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[orig ...
- ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...
- thinkphp,javascript跨域请求解决方案
javascript跨域请求解决方案 前言 对于很多前端或者做混合开发的同学,我们难免会遇到跨域发起请求业务,比如A站点向B站点请求数据等等.由于最近要做一个站点集群的项目,所以具体业务要求很多个站点 ...
- Javascript跨域请求的几种解决方法
什么情况下才会出现跨域? 假设域名是:http://www.example.com.cn/ 如果所请求的域名跟这个域名不致,这种情况就是跨域,由于跨域存在漏洞,所以一般来说正常的跨域请求方式是请求不到 ...
随机推荐
- coocs2d-x 分辨率
config.lua: CC_DESIGN_RESOLUTION = { width = , height = , autoscale = "FIXED_HEIGHT", call ...
- VR、AR、MR的区别
VR.AR.MR定义: 什么是虚拟现实? 虚拟现实(Virtual Reality,简称VR,又译作灵境.幻真)是近年来出现的高新技术,也称灵境技术或人工环境.虚拟现实是利用电脑模拟产生一个三维空间的 ...
- 一篇对iOS音频比较完善的文章
转自:http://www.cnblogs.com/iOS-mt/p/4268532.html 感谢作者:梦想通 前言 从事音乐相关的app开发也已经有一段时日了,在这过程中app的播放器几经修改我也 ...
- Linux下几款好用的录屏软件
最近需要在Linux环境下录制一段视频,自己的Linux是LinuxMint Xfce 18,网上搜了一圈发现都不太顺手.尤其是VLC,感觉不是很易用,幸好最后在Linux自带的软件管理器找到了两个不 ...
- Python 3.5源码编译安装
系统环境:CentOS 6.8-Minimal 安装Python依赖包: [root@Python src]# yum install zlib-devel bzip2-devel openssl-d ...
- Linux之:Ubuntu速学笔记(1)
撰写日期:2016-7-2 17:11:28 Saturday 课程资源: web程序员角度ubuntu自修速学课程 链接来源:程序员在囧途, VMware: VMware Workstation1 ...
- Windows常用快捷方式
总结了其他常用的快捷方式: Ctrl+C 复制 . Ctrl+V粘贴. Ctrl+X剪切. Delete删除. Alt+Tab 应用程序切换 Ctrl+Alt+Delete Ctrl+shift+E ...
- 脚手架搭建的vue项目里引入jquery和bootstrap
引入jquery: 1.在cmd输入:npm install jquery,回车,等待.. 2.在webpack.base.conf.js里进行如下操作: 3.在webpack.prod.conf.j ...
- Web API系列(三)统一异常处理
前面讲了webapi的安全验证和参数安全,不清楚的朋友,可以看看前面的文章,<Web API系列(二)接口安全和参数校验>,本文主要介绍Web API异常结果的处理.作为内部或者是对外提供 ...
- css驼峰写法
当style样式与 animate() 方法一起使用时,该属性名称必须是驼峰写法: 您必须使用 paddingLeft 代替 padding-left,marginRight 代替 margin-ri ...