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】--重点解析之跨域请求的更多相关文章

  1. 原生JavaScript封装的jsonp跨域请求

    原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. javascript fetch 跨域请求时 session失效问题

    javascript 使用fetch进行跨域请求时默认是不带cookie的,所以会造成 session失效. fetch(url, { method: 'POST', credentials: 'in ...

  3. sonp跨域请求

    sonp跨域请求学习笔记   前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可以 ...

  4. js跨域请求方式 ---- JSONP原理解析

    这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下     跨域请求数据解决方案主要有如下解决方法:   1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...

  5. JavaScript 跨域请求

    1.最简单通用的做法就是 反向代理         通过nginx搭建一个反向代理服务器,通过将跨域的请求配置成转发:此方法适用于动静分离时,很多跨域请求的情况下: server { listen 8 ...

  6. spring boot跨域请求访问配置以及spring security中配置失效的原理解析

    一.同源策略 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[orig ...

  7. ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  8. thinkphp,javascript跨域请求解决方案

    javascript跨域请求解决方案 前言 对于很多前端或者做混合开发的同学,我们难免会遇到跨域发起请求业务,比如A站点向B站点请求数据等等.由于最近要做一个站点集群的项目,所以具体业务要求很多个站点 ...

  9. Javascript跨域请求的几种解决方法

    什么情况下才会出现跨域? 假设域名是:http://www.example.com.cn/ 如果所请求的域名跟这个域名不致,这种情况就是跨域,由于跨域存在漏洞,所以一般来说正常的跨域请求方式是请求不到 ...

随机推荐

  1. div自适应高度

    div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"& ...

  2. 【BZOJ-3270】博物馆 高斯消元 + 概率期望

    3270: 博物馆 Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 292  Solved: 158[Submit][Status][Discuss] ...

  3. asp.net页面生命周期

    Asp.Net页面生命周期 本文转载自:http://www.cnblogs.com/xhwy/archive/2012/05/20/2510178.html 一.什么是Asp.Net页面生命周期 当 ...

  4. win7里边使用telnet命令为什么提示telnet不是内部或外部命令,也不是可运行的程序或批处理文件

    Win7默认没有安装telnet功能,所以你直接用telnet命令是用不了的:你可以去“控制面板”-->“程序”(在左下角)--->“打开或关闭Windows功能”,勾上“telnet客户 ...

  5. Hibernate组件和关联映射

    一.基本定义 组件:建立一个类,为了方便代码复用和建立模型,但类在数据库中并没有对应的表,此类可以作为一个组件插入到其他类中(有数据表的类) 组件和关联映射的关系是组件是没有对应的类;组件是值类型的, ...

  6. .net 高效开发实用工具

    Visual Studio Visual Studio Productivity Power tool: VS 专业版的效率工具. Web Essentials: 提高开发效率,能够有效的帮助开发人员 ...

  7. vector it->和*it

    //每次写代码总是被迭代器的iter->和*iter弄晕,主要是被protobuf弄晕了 #include <vector> struct test{ test(){ memset( ...

  8. SpringMVC学习记录1

    起因 以前大三暑假实习的时候看到公司用SpringMVC而不是Struts2,老司机告诉我SpringMVC各种方便,各种解耦. 然后我自己试了试..好像是蛮方便的.... 基本上在Spring的基础 ...

  9. 《深入理解Java虚拟机》学习笔记1-内存数据区域

         1.程序计数器 作用-较小的内存空间,用于存储当前线程所执行的字节码的行号 特性-每条线程有需要一个独立的程序计数器,各线程间互不影响,独立存储,称为"线程私有"的内存 ...

  10. Format 函数示例

    Format 函数示例本示例显示用 Format 函数做格式化输出的不同用法.对于日期分隔号(/),时间分隔号(:),以及 AM/ PM 等文本而言,其真正的显示格式会因计算机上的国际标准不同而有所差 ...