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---------
本文微信分享/扫码阅读