Python自动化开发 - AJAX
一 AJAX预备知识:json进阶
1.1 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
JSON是用字符串来表示Javascript对象
json字符串就是js对象的一种表项形式(字符串的形式)
Python中有json模块,来测试一下json字符串和json对象到底是什么
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import json
i = 10
s = "hello"
t = (1, 4, 6)
l = [3, 5, 7]
d = {'name': 'Linda'}
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: %s, and type is :%s" % (json_str1, type(json_str1)))
print("json_str2: %s, and type is :%s" % (json_str2, type(json_str2)))
print("json_str3: %s, and type is :%s" % (json_str3, type(json_str3)))
print("json_str4: %s, and type is :%s" % (json_str4, type(json_str4)))
print("json_str5: %s, and type is :%s" % (json_str5, type(json_str5)))
里面的json_str就是json字符串,那么json字符串可以放哪些值呢?
-
数字(整数或浮点数)
-
字符串(在双引号中)
-
逻辑值(true或false)
-
数组(在方括号[xx, xx]中)
-
对象(在花括号{"xx":xx,引号用双引号})
-
null
其实就是js的数据对象。不管是Python还是其他语言,都有自己的数据类型,如果要处理成json字符串,
就要把数据转换成js对应的数据对象(比如Python的元组就处理成数组,字典就被处理成object),再加上引号就是json字符串
前端接收到json字符串,就可以通过JSON.parse()等方法解析成json对象(即js对象),直接使用就行
之所以称json对象为js的子集,是因为像undefined,NaN,{'name':'yuan'}等都不在json对象的范畴。
1.2 Python与JSON对象的对应
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
python --> json
dict object
list,tuple array
str,unicode string
int,long,float number
True true
False false
None null
一个带方法的json对象,person就是一个json对象,满足json规范
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script>
var person = {
"name": "alex",
"sex": true,
"teacher":{
"name":"egon",
"sex": false
},
"hobby":['running','basketball'],
"getAge":function () {
return 80;
}
};
alert(person.name);
alert(person.getAge());
alert(person.teacher.name);
alert(person.hobby[0]);
</script>
1.3 JSON.parse()和JSON.stringify()
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
parse() 用于从一个json字符串中解析出json对象,如
var str = '{"name":"linda","age":"23"}'
结果:JSON.parse(str) ------> Object {age: "23",name: "linda"}
stringify()用于从一个json对象解析成json字符串,如
var c= {a:1,b:2}
结果: JSON.stringify(c) ------> '{"a":1,"b":2}'
注意1:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常。
注意2:
a={name:"linda"}; //ok
b={'name':'linda'}; //ok
c={"name":"linda"}; //ok
alert(a.name); //ok
alert(a[name]); //undefined
alert(a['name']) //ok
1.4 Django向JS发送数据
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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技术使js接受django相应的json数据。
1.5 JSON与XML比较
-
可读性: XML胜出;
-
解码难度:JSON本身就是JS对象(主场作战),所以简单很多;
-
流行度: XML已经流行好多年,但在AJAX领域,JSON更受欢迎。
注解:其实本没什么json对象,只是我们自己这么称呼罢了,所谓的json数据就是指json字符串,在前端解析出来的对象就是js对象的一部分!
二 什么是AJAX
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。
即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。
-
同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
-
异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新;(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <script type="text/javascript">
8 window.onload = function() {//当文档加载完毕时执行本函数
9 var form = document.getElementById("form1");//获取表单元素对象
10 form.onsubmit = function() {//给表单元素添加一个监听,监听表单被提交事件
11 var usernameValue = form.username.value;//获取表单中名为username的表单元素值
12 if(!usernameValue) {//判断该值是否为空
13 var usernameSpan = document.getElementById("usernameSpan");//得到usernmae元素后的<span>元素
14 usernameSpan.innerText = "用户名不能为空!";//设置span元素内容!
15 return false;//返回false,表示拦截了表单提交动作
16 }
17 return true;//不拦截表单提交动作
18 };
19 };
20 </script>
21 </head>
22 <body>
23 <h1>注册页面</h1>
24 <form action="" method="post" id="form1">
25 用户名:<input type="text" name="username"/>
26 <span id="usernameSpan"></span>
27 <br/>
28 密 码:<input type="password" name="password"/>
29 <span id="passwordSpan"></span>
30 <br/>
31 <input type="submit" value="注册"/>
32
33 </form>
34 </body>
35 </html>
36
37 js实现的局部刷新
三 AJAX常见应用场景
四 AJAX的优缺点
优点:
-
AJAX使用Javascript技术向服务器发送异步请求;
-
AJAX无须刷新整个页面;
-
因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高;
缺点:
-
AJAX并不适合所有场景,很多时候还是要使用同步交互;
-
AJAX虽然提高了用户体验,但无形中向服务器发送的请求次数增多了,导致服务器压力增大;
-
因为AJAX是在浏览器中使用Javascript技术完成的,所以还需要处理浏览器兼容性问题;
五 AJAX技术
四步操作:
-
创建核心对象;
-
使用核心对象打开与服务器的连接;
-
发送请求
-
注册监听,监听服务器响应。
XMLHTTPRequest
-
open(请求方式, URL, 是否异步)
-
send(请求体)
-
onreadystatechange,指定监听函数,它会在xmlHttp对象的状态发生变化时被调用
-
readyState,当前xmlHttp对象的状态,其中4状态表示服务器响应结束
-
status:服务器响应的状态码,只有服务器响应结束时才有这个东东,200表示响应成功;
-
responseText:获取服务器的响应体
六 AJAX实现
七 AJAX实例
八 jQuery实现AJAX
$.ajax()是jQuery对AJAX的封装实现
$(function () { $("#login-button").click(function () { var username = $("#login-form #id_username").val(); var password = $("#login-form #id_password").val(); console.log(username); console.log(password); $.ajax({ url:'/host/login/', // 发送数据目标url type:"POST", // 发送数据方式 data:{username:username,password:password}, // 发送数据 success:function (data) { // 成功响应的回调处理函数 var data_dict = JSON.parse(data); //输入参数 data为JSON字符串 if(data_dict.status){ location.href = "/host/hosts/" }else { $("#login_msg").text(data_dict.error); } } }) }) });
posted on 2017-05-25 22:37 Jonathan1314 阅读(260) 评论(0) 编辑 收藏 举报