Ajax以及在Django中的应用

AjaX 全称是Asynchronous JavaScript and XML，即异步JavaScript和XML，是指创建一种交互式网页应用的网页开发技术。

一般的网页（即不使用ajax技术的网页），如果需要更新某些内容，需要重新加载整个页面。而应用了ajax技术之后，可以在不重新加载整个整个页面的情况下，通过后台加载数据，并在页面上显示。

Ajax的核心是XMLHttpRequest对象，他是Ajax的关键，发送异步请求，接收响应以及执行回调都是通过它完成。

默认情况下使用XMLHttpRequest发送的请求都是异步的，现在就说一下异步请求的大概流程；

1、创建一个XMLHttpRequest对象；

2、定义回调函数

因为是异步请求，因为要定义一个回调函数，这里当XMLHttpRequest对象的属性readystatechange发生改变，就会调用函数。 属性readystatechange表示了请求以及响应过程的当前活动阶段，可能的值：
- 0：未初始化，尚未调用open()方法；
- 1：启动已经调用open,但未调用send();
- 2:发送，已经调用send()方法，但未收到响应；
- 3：接收 已经收到部分响应数据；
- 4：完成。已经收到全部响应数据，而且可以在客户端使用了。 

    var (xmlHttpReq = createXHR()
    function RequestCallBack(){//一旦readyState值改变，将会调用这个函数
    if(xmlHttpReq.readyState == 4){
            if(xmlHttpReq.status == 200){
                //将xmlHttpReq.responseText的值赋给ID为 resText 的元素
                document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
            }
     }
    }
   xmlHttpReq.open('get','exca.txt',true);
   xmlHttpReq.send(null);

上面代码中，当XHR的readstatechange变为4，且响应码是200，就进行一些操作。

在发送XHR请求的同时，会带上一些头部信息，比如Referer,User-Agent，Cookie，HOst等等，如果自己想加额外的信息，可以使用setRequestHeader()方法。如在Django，使用ajax方法提交表单的时候，就应该加上csrftoken信息。 正常用JS实现Ajax还是比较麻烦的，jquery的出现大大地简化了代码量，使我们更加关注上层功能的实现。

$.ajax是最底层的，$.load,$.get,$.post是第2层的，$.getJson,$.getScript是最高级的实现。

Django的一个实例： 

<script language="javascript" type="text/javascript">
$('#login-form').submit(function(){
    $.ajax({
        type:"POST",
        url:"/logins/",
        data:{"username":$("#login-username").val(),"password":$("#login-password").val()},
        beforeSend:function(xhr){
            xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
        },
        success:function(data,textStatus){
            var errors = data["errors"];
            if(errors.length==0){
                location.reload();
            }
            else{
                //alert(errors);
                var html = "<div class=\"alert alert-danger\">"
                for (var key in errors){
                    html += errors[key]+"<br/>";
                }
                html += "</div>";
                $("#login-modal .modal-header").after(html);
            }
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
            alert(XMLHttpRequest.responseText);
        }

    });
    return false;
});

beforesend是在发送请求之间调用的函数，success是正确响应后调用的函数，error是请求失败调用的函数。location.reload()表示重新加载当前页面。

这里补充一个额外的小知识，函数返回的return false是为了防止默认事件的处理。

--------EOF---------
微信分享/微信扫码阅读