本文详细介绍了前端开发中的JSON基础，包括Python与JSON对象的对应、parse()和stringify()方法以及Django向JS发送数据。接着讲解了AJAX的基本概念、应用场景、优缺点和实现方式，包括基于JS和jQuery的AJAX实例。最后讨论了JSONP，阐述了同源策略、JSONP的JS和jQuery实现，并解释了其原理。
前端开发之JSON、AJAX和JSONP
一、JSON
1. JSON基础
- JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON是用字符串来表示Javascript对象。
- json字符串就是js对象的一种表现形式(字符串的形式)。
- json.dumps()出来的是json字符串，再json.load()出来的才是json对象。json.load()是Python的方法，在js里是JSON.parse()，用来把JSON字符串转换为JS对象。
- HttpResponse里面只能放字符串。json对象的编码规范是用双引号""包起来的。
python中的json模块：这里面的json_str就是json字符串。
import json
i=10
s='hello'
t=(1,4,6)
l=[3,5,7]
d={
'name':"yuan"}
json_str1=json.dumps(i)
json_str2=json.dumps(s)
json_str3=json.dumps(t)
json_str4=json.dumps(l)
json_str5=json.dumps(d)
print(json_str1) #'10'
print(json_str2) #'"hello"'
print(json_str3) #'[1, 4, 6]'
print(json_str4) #'[3, 5, 7]'
print(json_str5) #'{"name": "yuan"}'
JSON字符串内可以有的值：
- 数字 （整数或浮点数）
- 字符串 （在双引号中）
- 逻辑值 （true 或 false）
- 数组 （在方括号中）
- 对象 （在花括号中，引号用双引）
- null
注：JSON对象为js的子集，是因为像undefined, NaN, {‘name’:‘yuan’}等都不在json对象的范畴。
2. python与json对象的对应
同一个数据，在不同的语言中有不同的数据类型。在Python中，如果要得到一个json字符串，那么就要把Python数据先转换成js对应的数据对象（比如python的元组被转换成js的数组，字典被转换成js的object），再加上引号就是json字符串了。前端接收到json字符串，就可以通过JSON.parse()等方法解析成json对象(即js对象)直接使用了。
python --> json
dict object
list,tuple array
str,unicode string
int,long,float number
True true
False false
None null
3. parse() 和 stringify()
parse() 用于从一个json字符串中解析出json对象：
var str = '{"name":"yuan","age":"23"}'
结果：JSON.parse(str) ------> Object {
age: "23",name: "yuan"}
stringify()用于从一个json对象解析成json字符串：
var c= {
a:1,b:2}
结果： JSON.stringify(c) ------> '{"a":1,"b":2}'
注意1：单引号写在{
}外，每个属性名都必须用双引号，否则会抛出异常。
注意2:
a={
name:"yuan"}; //ok
b={
'name':'yuan'}; //ok
c={
"name":"yuan"}; //ok
alert(a.name); //ok
alert(a[name]); //undefined
alert(a['name']) //ok
4. django向js发送数据
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>
二、Ajax
1. Ajax基础
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
ajax的两个特点：局部刷新、异步传送。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求。
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
js实现的局部刷新：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function() {
//当文档加载完毕时执行本函数
var form = document.getElementById("form1");//获取表单元素对象
form.onsubmit = function() {
//给表单元素添加一个监听，监听表单被提交事件
var usernameValue = form.username.value;//获取表单中名为username的表单元素值
if(!usernameValue) {
//判断该值是否为空
var usernameSpan = document.getElementById("usernameSpan");//得到usernmae元素后的<span>元素
usernameSpan.innerText = "用户名不能为空！";//设置span元素内容！
return false;//返回false，表示拦截了表单提交动作
}
return true;//不拦截表单提交动作
};
};
</script>
</head>
<body>
<h1>注册页面</h1>
<form action="" method="post" id="form1">
用户名：<input type="text" name="username"/>
<span id="usernameSpan"></span>
<br/>
密 码：<input type="password" name="password"/>
<span id="passwordSpan"></span>
<br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>
2. Ajax常见应用场景
注册某个网站账户密码时，当输入的用户名已被注册时，把光标移动到其他表单项上，浏览器会使用AJAX技术向服务器发出请求，服务器会查询该名称是否存在，最终服务器返回true表示该名称已经存在了，浏览器在得到结果后显示“用户名已被注册！”。这个过程整个网页并没有被刷新，只是用户名局部刷新。
3. Ajax的优缺点
优点：
- Ajax使用Javascript技术向服务器发送异步请求；
- Ajax无须刷新整个页面；
- 因为服务器响应内容不再是整个页面，而是页面中的局部，所以Ajax性能高；
缺点：
- Ajax并不适合所有场景，很多时候还是要使用同步交互；
- Ajax虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
- 因为Ajax是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；
4. 基于JS的Ajax的实现
四步操作：
-
step1：创建核心对象；
var xmlhttp = XMLHttprequest() -
step2：使用核心对象打开与服务器的连接；
xmlhttp.open("") -
step3：发送请求；
xmlhttp.send("name = alex") # 请求体的内容 if GET请求 ： send(null) -
step4：注册监听，监听服务器响应。
监听：xmlhttp(if == 4:{ var context = xmlhttpresponseText })
XMLHTTPRequest：
- open(请求方式, URL, 是否异步)
- send(请求体)
- onreadystatechange，指定监听函数，它会在xmlHttp对象的状态发生变化时被调用；
- readyState，当前xmlHttp对象的状态，其中4状态表示服务器响应结束；
- stat
最低0.47元/天 解锁文章
扫一扫
217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
