關於ajax的實現

在網上找到一些關於ajax的實現

在web上一般經過http協議中的get/post文件發送數據或者請求。在瀏覽器中輸入url後，瀏覽器就幫助咱們完成get請求的發送與返回文件的解析，並刷新更新界面。可是若是咱們不想更新界面，只想發送一個get或者post文件把數據（請求）傳給服務器端，而後獲取服務器返回的response文件。這個時候就能夠利用ajax技術實現。

實現ajax有兩種方法，一種是用原生的JavaScript發送，這種方法比較麻煩，能夠參考《其餘相關文章[1]》。另外一種使用jQuery封裝好了ajax的一些方法，使用起來更簡單，本文主要介紹如何用jquery的ajax方法與django後臺通信。

1. 需求描述

將以下的表單數據a和b發送給服務器，服務器端的django接收數據並計算a+b的結果，並以json格式附在response文件上返回回來。前端接收到返回的結果後，在不刷新頁面的狀況下，將結果顯示出來。

<form>
a: <input type="text" id="a" name="a"> <br>
b: <input type="text" id="b" name="b"> <br>
<p>result: <span id='result'></span></p>
<button type="button" id='sum'>ajax提交</button>
</form>

這一個過程分爲3個階段：前端發送HTTP文件、django接收HTTP文件並返回HTTP RESPONSE文件、前端接收RESPONSE並顯示結果；

2. 前端發送數據

發送數據有兩種方法，分別是get和post，其對應的兩種jquery方法就是.get()和.post(),只要選其中一種就好。另外，還有一種方法$.ajax()，該方法更爲靈活，post和get都能發，body的文件形式也能夠自定義。

2.1 經過$.get發送HTTP GET

jquery封裝了.get方法，通過該方法可以發送get文件。詳細介紹見<ahref="http://www.ziqiangxuetang.com/jquery/jquery−ajax−get−post.html">《.get說明》

爲＃sum添加click事件

<script>
    $(document).ready(function(){
      $("#sum").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();
        $.get("/ajax/add/",{'a':a,'b':b}, function(ret){
            $('#result').html(ret.result)
        })
      });
    });
</script>

輸入a=5,b=6,點擊ajax提交後即會發出以下HTTP GET文件：

GET /ajax/add/?a=5&b=6 HTTP/1.1
Host: 127.0.0.1:8000
Connection: keep-alive
Accept: */*
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.130 Safari/537.36
Referer: http://127.0.0.1:8000/ajax/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: csrftoken=OTKs7zAcHysRAV8S35mZRkKQ8FW7rhTN

能夠看出.get()把url和數據添加到了get文件的url上，並發送出去。其中function(ret)是.get()的回調函數，它的做用會在後文介紹。

2.2 經過$.post發送HTTP POST

jquery封裝了.post方法，通過該方法可以發送post文件。詳細介紹見<ahref="http://www.ziqiangxuetang.com/jquery/jquery−ajax−get−post.html">《.post說明》

爲＃sum添加click事件

<script>
    $(document).ready(function(){
      $("#sum").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();
        $.post("/ajax/add/",{'a':a,'b':b}, function(ret){
            $('#result').html(ret.result)
        })
      });
    });
</script>

輸入a=5,b=6,點擊ajax提交後即會發出以下HTTP POST文件:

POST /ajax/add/ HTTP/1.1
Host: 127.0.0.1:8000
Connection: keep-alive
Content-Length: 7
Accept: */*
Origin: http://127.0.0.1:8000
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.130 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://127.0.0.1:8000/ajax/
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: csrftoken=OTKs7zAcHysRAV8S35mZRkKQ8FW7rhTN

a=5&b=6

能夠看出$.post()幫助咱們向指定的url發送了一個HTTP POST, 數據放在post文件的body中。

2.3 經過$.ajax()發送GET/POST

$.ajax()詳細說明見http://www.ziqiangxuetang.com/jquery/ajax-ajax.html「>《jQuery ajax() 方法》，本例中代碼以下：

<script>
    $(document).ready(function(){
      $("#sum").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();
        $.ajax({
            type:"GET",
            url:"/ajax/add/",
            data:{"a":a, "b":b},
            data-type:"json",
            success: function(ret){
                    $('#result').html(ret.result)
                     }
        })
      });
    });
    </script>

3. django接收並返回RESPONSE

首先在url配置裏添加響應請求的url，以便指定對應的視圖函數。

urlpatterns = [
     ..
     url(r'^ajax/add/', views.ajax_test_add, name = 'ajax_test_add'),
]

3.1 對於get請求

在views.py下定義相應的響應函數：

def ajax_test_add(request):
    a = int(request.GET.get('a'))
    b = int(request.GET.get('b'))
    return_json = {'result':a+b}
    return HttpResponse(json.dumps(return_json), content_type='application/json')

這樣django在接到2.1中的HTTP GET就會返回以下RESPONSE:

HTTP/1.0 200 OK
Date: Tue, 11 Aug 2015 13:55:00 GMT
Server: WSGIServer/0.1 Python/2.7.6
X-Frame-Options: SAMEORIGIN
Content-Type: application/json

{"result": 11}

3.2 對於post請求

因爲django中對post增長了csrf的保護，因此其views.py的響應函數須要加上@csrf_exempt裝飾器，具體以下：

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def ajax_test_add(request):
    a = int(request.POST.get('a'))
    b = int(request.POST.get('b'))
    return_json = {'result':a+b}
    return HttpResponse(json.dumps(return_json), content_type='application/json')

這樣這樣django在接到2.2中的HTTP POST就會返回3.1中同樣的RESPONSE。

4. 回調函數顯示結果

在.get()、.post()和.ajax()中都有一個function(ret)函數，以.get()爲例：

<script>
    $(document).ready(function(){
      $("#sum").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();
        $.get("/ajax/add/",{'a':a,'b':b}, function(ret){
            $('#result').html(ret.result)
        })
      });
    });
</script>

function(ret)是.get()的回調函數，當收到response以後就會自動執行該函數。.get()會很智能地根據response文件headers裏的Content-Type所指示的body格式，將body封裝相應對象傳給回調函數。例如Content-Type:application/json，ret就會是一個json對象；Content-Type:text，ret就會是一個字符串。

在該例子中，回調函數內將結果顯示在#result元素內，由於ret是一個javascript json對象，因此用ret.result就能夠獲取對應的值。