Django中的Ajax详解

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

一.AJAX常见应用情景

当我们在百度中输入一个“老”字后，会马上出现一个下拉列表！列表中显示的是包含“传”字的4个关键字。

其实这里就使用了AJAX技术！当文件框发生了输入变化时，浏览器会使用AJAX技术向服务器发送一个请求，查询包含“传”字的前10个关键字，然后服务器会把查询到的结果响应给浏览器，最后浏览器把这4个关键字显示在下拉列表中。

• 整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
• 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为zhangSan的用户是否存在，最终服务器返回true表示名为lemontree7777777的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。

• 整个过程中页面没有刷新，只是局部刷新了；
• 在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

优点：

• AJAX使用Javascript技术向服务器发送异步请求；
• AJAX无须刷新整个页面；
• 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；

二.$.ajax参数

我们首先来看一个常见的ajax请求的例子，该例子使用ajax来发送点赞请求：

$(document).ready(function () {
    $(".diggit").click(function () {
    //向服务端发送当前的article_id,是否点赞或者踩灭：is_up
    // 既然要发送文章id，因此我们需要在article_detail.html中新建一个标签，然后用来存放文章id
    //首先需要判断用户是否已经登入
    // <div class="info" article_id="{{ article_detail_obj.article.nid }}" user_name="{{ article_detail_obj.article.user.username }}"></div>
    //如果自定义属性user_name有值那就说明用户已经登入,那我就直接发送Ajax请求
    if($(".info").attr("user_name")){
        $.ajax({
            url:"/users/up_down/",
            type: "post",
            data: {
                is_up:"True",
                article_id: $(".info").attr("article_id"),
                csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val()
            },
            success:function (data) {
                // up_down_response = {"status": True, "is_repeat": None}
                // 判断status的状态，为True则点赞成功，那么将当前的点赞数+1，并且打印点赞成功的消息
                console.log(data);  // {status: false, is_repeat: true}
                if(data.status){
                     current_up_count = parseInt($("#digg_count").text());
                     current_up_count += 1;
                     $("#digg_count").html(current_up_count);
                    setTimeout(function () {
                        $(".dig_message").html("恭喜您点赞成功").css("color", "red")
                    }, 3000)
                }
                else if(data.is_repeat){
                    setTimeout(function () {
                        $(".dig_message").html("抱歉，不能重复点赞").css("color", "red")
                    }, 3000)
                }
            }
        })
    }
    // 用户未登入
    else {
        console.log(location.pathname);//拿到的是路径部分
        setTimeout(function () {
            $(".dig_message").html("抱歉，您还没有登入，不能进行点赞,3秒后将跳转到登入页面").css("color", "red")
        }, 3000);
        location.href = "/login/?next=" + location.pathname
    }

    });
});

【01】$.ajax的请求参数

######################------------data---------################

       data: 当前ajax请求要携带的数据，是一个json的object对象，也就是一个json对象
       ajax方法就会默认地把它编码成某种格式(urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。
             function testData() {
               $.ajax("/test",{     //此时的data是一个json形式的对象
                  data:{
                    a:1,
                    b:2
                  }
               });                   //?a=1&b=2
######################------------processData---------################

processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；如果设置为false，
             那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString()
             ,最后得到一个［object，Object］形式的结果。
            
######################------------contentType---------################

contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
即告诉服务器，我客户端使用的数据编码格式是urlencoded：urlencoded:?a=1&b=2；
如果想以其他方式提交数据，比如contentType:"application/json"，即客户端告诉服务器，我发送的是一个json字符串：

这里一定要注意，一旦设定了contentType:"application/json"，那么我们发送给服务器端的数据data必须就是一个json字符串，不能
是json对象，要不然会报错，这也就是为什么我们需要使用JSON.stringify来将json对象序列化为一个json字符串的原因了！
               $.ajax("/ajax_get",{
                  data:JSON.stringify({
                       a:22,
                       b:33
                   }),
                   contentType:"application/json",
                   type:"POST",
             
               });                          //{a: 22, b: 33}

    当客户端设定了我发送给服务端的是json字符串时，那么服务端拿到数据肯定需要将数据进行反序列化为一个python字符串
    注意此时如果我们设定了客户端使用的是POST方式发送，那么我们在服务端取数据的时候就应该从请求体中拿出数据：
    request.body.decode("utf8")，取出的是一个字节字符串，然后使用json.loads进行反序列化成Python中的对象
             views.py:   json.loads(request.body.decode("utf8"))


######################------------traditional---------################

traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},
              traditional为false会对数据进行深层次迭代；  

响应参数：dataType

dataType的功能： 设定HttpHeader中“Accept”域的内容，告诉服务器浏览器可以想要返回的数据格式类型，同时JQuery也会根据该类型对返回的数据进行相应的格式转换,例如客户端设定dataType的值为："json"，表示我告诉服务端，你返回给我的数据必须是json格式的字符串，

一旦服务端返回给我json字符串后，我可以直接使用，因为jquery会自动将json字符串转换为JS对象，不需要我们手动去转换：JSON.parse()

以上就是Django中的AJax知识，笔者将在下一篇博客中为大家详细介绍Ajax与表单序列化相关的知识。

参考网址：http://blog.csdn.net/walkerjong/article/details/7520485