Jonathan1314

导航

Python自动化开发 - AJAX

 

一  AJAX预备知识：json进阶

1.1 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

JSON是用字符串来表示Javascript对象

json字符串就是js对象的一种表项形式(字符串的形式)　　

Python中有json模块，来测试一下json字符串和json对象到底是什么

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)))
View Code

 里面的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对象的对应

   python         -->        json
        dict                      object
        list,tuple                array
        str,unicode               string
        int,long,float            number
        True                      true
        False                     false
        None                      null
View Code

一个带方法的json对象，person就是一个json对象，满足json规范

<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>
View Code

 

1.3 JSON.parse()和JSON.stringify()

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
View Code

 

1.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>
View Code

此外，还可以通过下面介绍的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除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

 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实现的局部刷新
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  阅读(263)  评论(0)  编辑  收藏  举报