JavaScript：大神必修，5步看懂Ajax

用場景:

asynchronous javascript and xml == ajax

1.一般在表單提交前使用ajax進(jìn)行驗證數(shù)據(jù)

2.ajax就是js對象,應(yīng)用在與服務(wù)器之間進(jìn)行交互

3.在搜索框中搜索內(nèi)容時會出現(xiàn)一些高頻的詞匯.4.ajax實現(xiàn)局部刷新頁面.

ajax的使用:

var xhr = new XMLHttpRequest(); //應(yīng)用在一些主流瀏覽器,火狐,谷歌,ie7以上.

var xhr = new ActiveXObject(“Microsoft.XMLHTTP”); //支持ie6, 5

var xhr = new ActiveXObject(“Msxml2.XMLHTTP”);

var xhr = new ActiveXObject(“Msxml2.XMLHTTP.3.0”);

var xhr = new ActiveXObject(“Msxml2.XMLHTTP.5.0”);

var xhr = new ActiveXObject(“Msxml2.XMLHTTP.6.0”);//支持ie6的最高版本

狀態(tài)碼:

1XX: 消息

2XX: 成功

200 OK 請求成功

3XX: 重定向

302: 重定向,臨時的.

4XX: 客戶端錯誤

403: 禁止訪問,沒有權(quán)限

404: 文件沒有找到

401: 表示當(dāng)前的請求需要驗證

5XX: 服務(wù)器錯誤

500: 服務(wù)器錯誤,通常指的是代碼錯誤

501: 服務(wù)器有可能不支持某一個功能.

502: 網(wǎng)關(guān)錯誤

總結(jié):

1.使用ajax的步驟:

a: 創(chuàng)建ajax對象,var xhr = new XMLHttpRequest();

b: xhr.open();//open里邊有三個參數(shù)1.請求方式 get/post 2.請求的地址 3.是異步請求還是同步請求, true表示異步 false表示同步請求

c: xhr.send();

2.get方式

1.var xhr = new XMLHttpRequest();

//以get方式發(fā)送時可以在地址值傳遞參數(shù)過去

2.xhr.open('get', '1.php?username=xiaohuang&sex=nv', true);

3.xhr.send();

3.post方式發(fā)送數(shù)據(jù)

1.var xhr = new XMLHttpRequest();

2.xhr.open('post', '1.php', true);

3.xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//send方法中一般不傳遞參數(shù),如果寫了參數(shù)表示是以post方式傳遞參數(shù)的

4.xhr.send('username=xiaoming&sex=nan');

responseText : 通過該屬性可以拿到從后臺頁面返回給前臺頁面的數(shù)據(jù)

responseXML: 返回的是xml格式的數(shù)據(jù). 這種方式不經(jīng)常使用.

onreadystatechange: 是一個事件, 當(dāng)ajax狀態(tài)值發(fā)生改變的時間.

readyState:(0,1,2,3,4)

0:未初始化狀態(tài)

1:已經(jīng)載入,并且已經(jīng)調(diào)用了send方法,正在發(fā)送請求

2:載入完成,也就是send方法執(zhí)行完畢,并且已經(jīng)接受到響應(yīng)內(nèi)容.

3:交互,表示服務(wù)器正在解析響應(yīng)的內(nèi)容

4:完成,響應(yīng)內(nèi)容完成之后,就可以被客戶端調(diào)用了.

status: 200 請求成功

ajax請求函數(shù)封裝

encodeURIComponent

同步和異步

同步:當(dāng)我們請求服務(wù)器時,等服務(wù)器處理完數(shù)據(jù)之后一起執(zhí)行.

異步:當(dāng)我們請求服務(wù)器時,服務(wù)器處理數(shù)據(jù)并且前臺的代碼繼續(xù)往下執(zhí)行。

跨域的問題

跨域其實他就是跨域名請求

127.0.0.1 localhost 不是同一個域名

一般情況下ajax是沒法跨域的.

現(xiàn)在我們要用ajax實現(xiàn)跨域,怎么辦?

答: 有兩種方法

方法一:

header('Access-Control-Allow-Origin: *');

方法二:

function fn(data)

{

console.log(data);

var obj = JSON.parse(data);

console.log(obj);

}

</script>

在index.php文件中

$data['user'] = 'xiaoming';

$data['pass'] = 123;

$json = json_encode($data);

echo "fn('".$json."')";

JAX準(zhǔn)備知識：JSON

什么是 JSON ？

JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）

JSON 是輕量級的文本數(shù)據(jù)交換格式

JSON 獨立于語言 *

JSON 具有自我描述性，更易理解

* JSON 使用 JavaScript 語法來描述數(shù)據(jù)對象，但是 JSON 仍然獨立于語言和平臺。JSON 解析器和 JSON 庫支持許多不同的編程語言。

合格的json對象：

["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["張三", "李四"] }
[ { "name": "張三"}, {"name": "李四"} ]

不合格的json對象：

{ name: "張三", 'age': 32 }  // 屬性名必須使用雙引號
[32, 64, 128, 0xFFF] // 不能使用十六進(jìn)制值
{ "name": "張三", "age": undefined }  // 不能使用undefined
{ "name": "張三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName":  function() {return this.name;}  // 不能使用函數(shù)和日期對象
}

stringify與parse方法

JavaScript中關(guān)于JSON對象和字符串轉(zhuǎn)換的兩個方法：

JSON.parse(): 用于將一個 JSON 字符串轉(zhuǎn)換為 JavaScript 對象　

JSON.parse('{"name":"run1"}');
JSON.parse('{name:"run1"}') ;   // 錯誤
JSON.parse('[18,undefined]') ;   // 錯誤

JSON.stringify(): 用于將 JavaScript 值轉(zhuǎn)換為 JSON 字符串。　

JSON.stringify({"name":"run1"})

和XML的比較

JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁瑣笨重的 XML 格式。

JSON 格式有兩個顯著的優(yōu)點：書寫簡單，一目了然；符合 JavaScript 原生語法，可以由解釋引擎直接處理，不用另外添加解析代碼。所以，JSON迅速被接受，已經(jīng)成為各大網(wǎng)站交換數(shù)據(jù)的標(biāo)準(zhǔn)格式，并被寫入ECMAScript 5，成為標(biāo)準(zhǔn)的一部分。

XML和JSON都使用結(jié)構(gòu)化方法來標(biāo)記數(shù)據(jù)，下面來做一個簡單的比較。

用XML表示中國部分省市數(shù)據(jù)如下：

<?xml version="1.0" encoding="utf-8"?>
<country>
    <name>中國</name>
    <province>
        <name>黑龍江</name>
        <cities>
            <city>哈爾濱</city>
            <city>大慶</city>
        </cities>
    </province>
    <province>
        <name>廣東</name>
        <cities>
            <city>廣州</city>
            <city>深圳</city>
            <city>珠海</city>
        </cities>
    </province>
    <province>
        <name>臺灣</name>
        <cities>
            <city>臺北</city>
            <city>高雄</city>
        </cities>
    </province>
    <province>
        <name>新疆</name>
        <cities>
            <city>烏魯木齊</city>
        </cities>
    </province>
</country>

用JSON表示如下

{
    "name": "中國",
    "province": [{
        "name": "黑龍江",
        "cities": {
            "city": ["哈爾濱", "大慶"]
        }
    }, {
        "name": "廣東",
        "cities": {
            "city": ["廣州", "深圳", "珠海"]
        }
    }, {
        "name": "臺灣",
        "cities": {
            "city": ["臺北", "高雄"]
        }
    }, {
        "name": "新疆",
        "cities": {
            "city": ["烏魯木齊"]
        }
    }]
}

由上面的兩段代碼可以看出，JSON 簡單的語法格式和清晰的層次結(jié)構(gòu)明顯要比 XML 容易閱讀，并且在數(shù)據(jù)交換方面，由于 JSON 所使用的字符要比 XML 少得多，可以大大得節(jié)約傳輸數(shù)據(jù)所占用的帶寬。

AJAX簡介

AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務(wù)器進(jìn)行異步交互，傳輸?shù)臄?shù)據(jù)為XML（當(dāng)然，傳輸?shù)臄?shù)據(jù)不只是XML）。

同步交互：客戶端發(fā)出一個請求后，需要等待服務(wù)器響應(yīng)結(jié)束后，才能發(fā)出第二個請求；
異步交互：客戶端發(fā)出一個請求后，無需等待服務(wù)器響應(yīng)結(jié)束，就可以發(fā)出第二個請求。

AJAX除了異步的特點外，還有一個就是：瀏覽器頁面局部刷新；（這一特點給用戶的感受是在不知不覺中完成請求和響應(yīng)過程）

示例：

頁面輸入兩個整數(shù)，通過AJAX傳輸?shù)胶蠖擞嬎愠鼋Y(jié)果并返回。

HTML部分代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AJAX局部刷新實例</title>
</head>
<body>

<input type="text" id="i1">+
<input type="text" id="i2">=
<input type="text" id="i3">
<input type="button" value="AJAX提交" id="b1">

<script src="/static/jquery-3.2.1.min.js"></script>
<script>
  $("#b1").on("click", function () {
    $.ajax({
      url:"/ajax_add/",
      type:"GET",
      data:{"i1":$("#i1").val(),"i2":$("#i2").val()},
      success:function (data) {
        $("#i3").val(data);
      }
    })
  })
</script>
</body>
</html>

views.py

def ajax_demo1(request):
    return render(request, "ajax_demo1.html")


def ajax_add(request):
    i1 = int(request.GET.get("i1"))
    i2 = int(request.GET.get("i2"))
    ret = i1 + i2
    return JsonResponse(ret, safe=False)

urls.py

urlpatterns = [
    ...
    url(r'^ajax_add/', views.ajax_add),
    url(r'^ajax_demo1/', views.ajax_demo1),
    ...   
]

AJAX語法

$.ajax({
    url:"",  // 控制往哪里提交
    type:"POST",  // 請求的方法
    data:{},  // 請求的參數(shù)
    success:function(arg){
        // 收到響應(yīng)之后要做的事
    }
})

AJAX常見應(yīng)用情景

搜索引擎根據(jù)用戶輸入的關(guān)鍵字，自動提示檢索關(guān)鍵字。

還有一個很重要的應(yīng)用場景就是注冊時候的用戶名的查重。

其實這里就使用了AJAX技術(shù)！當(dāng)文件框發(fā)生了輸入變化時，使用AJAX技術(shù)向服務(wù)器發(fā)送一個請求，然后服務(wù)器會把查詢到的結(jié)果響應(yīng)給瀏覽器，最后再把后端返回的結(jié)果展示出來。

整個過程中頁面沒有刷新，只是刷新頁面中的局部位置而已！
當(dāng)請求發(fā)出后，瀏覽器還可以進(jìn)行其他操作，無需等待服務(wù)器的響應(yīng)！

當(dāng)輸入用戶名后，把光標(biāo)移動到其他表單項上時，瀏覽器會使用AJAX技術(shù)向服務(wù)器發(fā)出請求，服務(wù)器會查詢名為lemontree7777777的用戶是否存在，最終服務(wù)器返回true表示名為lemontree7777777的用戶已經(jīng)存在了，瀏覽器在得到結(jié)果后顯示“用戶名已被注冊！”。

整個過程中頁面沒有刷新，只是局部刷新了；
在請求發(fā)出后，瀏覽器不用等待服務(wù)器響應(yīng)結(jié)果就可以進(jìn)行其他操作；

AJAX的優(yōu)缺點

優(yōu)點

AJAX使用JavaScript技術(shù)向服務(wù)器發(fā)送異步請求；
AJAX請求無須刷新整個頁面；
因為服務(wù)器響應(yīng)內(nèi)容不再是整個頁面，而是頁面中的部分內(nèi)容，所以AJAX性能高；

jQuery實現(xiàn)的AJAX

最基本的jQuery發(fā)送AJAX請求示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ajax test</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="ajaxTest">AJAX 測試</button>
<script>
  $("#ajaxTest").click(function () {
    $.ajax({
      url: "/ajax_test/",
      type: "POST",
      data: {username: "Q1mi", password: 123456},
      success: function (data) {
        alert(data)
      }
    })
  })
</script>
</body>
</html>

views.py

def ajax_test(request):
    user_name = request.POST.get("username")
    password = request.POST.get("password")
    print(user_name, password)
    return HttpResponse("OK")

$.ajax參數(shù)

data參數(shù)中的鍵值對，如果值值不為字符串，需要將其轉(zhuǎn)換成字符串類型。

$("#b1").on("click", function () {
    $.ajax({
      url:"/ajax_add/",
      type:"GET",
      data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])},
      success:function (data) {
        $("#i3").val(data);
      }
    })
  })

AJAX請求如何設(shè)置csrf_token

方式1

通過獲取隱藏的input標(biāo)簽中的csrfmiddlewaretoken值，放置在data中發(fā)送。

$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  data: {
    "username": "rum2",
    "password": 123456,
    "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()  // 使用JQuery取出csrfmiddlewaretoken的值，拼接到data中
  },
  success: function (data) {
    console.log(data);
  }
})

方式2

通過獲取返回的cookie中的字符串放置在請求頭中發(fā)送。

注意：需要引入一個jquery.cookie.js插件。

$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  headers: {"X-CSRFToken": $.cookie('csrftoken')},  // 從Cookie取csrf_token，并設(shè)置ajax請求頭
  data: {"username": "rum", "password": 123456},
  success: function (data) {
    console.log(data);
  }
})

或者用自己寫一個getCookie方法：

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');

每一次都這么寫太麻煩了，可以使用$.ajaxSetup()方法為ajax請求統(tǒng)一設(shè)置。

function csrfSafeMethod(method) {
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});

序列化

Django內(nèi)置的serializers

def books_json(request):
    book_list = models.Book.objects.all()[0:10]
    from django.core import serializers
    ret = serializers.serialize("json", book_list)
    return HttpResponse(ret)

我們的數(shù)據(jù)中經(jīng)常有日期時間，也就是datetime對象，而json.dumps是無法處理這樣在類型的，那就需要通過自定義處理器來做擴展，如下：

class JsonCustomEncoder(json.JSONEncoder):
    """
    自定義一個支持序列化時間格式的類
    """

    def default(self, o):
        if isinstance(o, datetime):
            return o.strftime("%Y-%m-%d %H:%M:%S")
        elif isinstance(o, date):
            return o.strftime("%Y-%m-%d")
        else:
            return json.JSONEncoder.default(self, o)


def books_json(request):
    book_list = models.Book.objects.all().values_list("title", "publish_date")
    ret = json.dumps(list(book_list), cls=JsonCustomEncoder)
    return HttpResponse(ret)

Bootstrap-sweetalert

https://github.com/lipis/bootstrap-sweetalert

$(".btn-danger").on("click", function () {
  swal({
    title: "你確定要刪除嗎？",
    text: "刪除可就找不回來了哦！",
    type: "warning",
    showCancelButton: true,
    confirmButtonClass: "btn-danger",
    confirmButtonText: "刪除",
    cancelButtonText: "取消",
    closeOnConfirm: false
    },
    function () {
      var deleteId = $(this).parent().parent().attr("data_id");
      $.ajax({
        url: "/delete_book/",
        type: "post",
        data: {"id": deleteId},
        success: function (data) {
          if (data.status === 1) {
            swal("刪除成功!", "你可以準(zhǔn)備跑路了！", "success");
          } else {
            swal("刪除失敗", "你可以再嘗試一下！", "error")
          }
        }
      })
    });
})

#科技##軟件開發(fā)##python#

么是 AJAX 請求？

AJAX 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā) 技術(shù)。
ajax 是一種瀏覽器通過 js 異步發(fā)起請求，局部更新頁面的技術(shù)。
Ajax 請求的局部更新，瀏覽器地址欄不會發(fā)生變化
局部更新不會舍棄原來頁面的內(nèi)容

AJAX 請求的示例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
      // 在這里使用 javaScript 語言發(fā)起 Ajax 請求，訪問服務(wù)器 AjaxServlet 中 javaScriptAjax
      function ajaxRequest() {
      // 我們首先要創(chuàng)建 XMLHttpRequest
      var xmlhttprequest = new XMLHttpRequest();
      // 調(diào)用 open 方法設(shè)置請求參數(shù)
      xmlhttprequest.open("GET","http://localhost:8080/Test/ajaxServlet?action=javaScriptAj
      ax",true)
      // 在 send 方法前綁定 onreadystatechange 事件，處理請求完成后的操作。
      xmlhttprequest.onreadystatechange = function(){
      if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
      var jsonObj = JSON.parse(xmlhttprequest.responseText);
      // 把響應(yīng)的數(shù)據(jù)顯示在頁面上
      document.getElementById("div01").innerHTML = " 編號：" + jsonObj.id + " , 姓名：" +
      jsonObj.name;
      }
      }
      // 調(diào)用 send 方法發(fā)送請求
      xmlhttprequest.send();
      }
    </script>
    </head>
      <body>
      <button onclick="ajaxRequest()">ajax request</button>
      <div id="div01">
      </div>
    </body>
</html>

jQuery 中的 AJAX 請求

$.ajax 方法
url 表示請求的地址
type 表示請求的類型 GET 或 POST 請求
data 表示發(fā)送給服務(wù)器的數(shù)據(jù)
格式有兩種：
一：name=value&name=value
二：{key:value}
success 請求成功，響應(yīng)的回調(diào)函數(shù)
dataType 響應(yīng)的數(shù)據(jù)類型
常用的數(shù)據(jù)類型有：
text 表示純文本
xml 表示 xml 數(shù)據(jù)
json 表示 json 對象

$("#ajaxBtn").click(function(){
  $.ajax({
    url:"http://localhost:8080/Test/ajaxServlet",
    // data:"action=jQueryAjax",
    data:{action:"jQueryAjax"},
    type:"GET",
    success:function (data) {
    // alert(" 服務(wù)器返回的數(shù)據(jù)是： " + data);
    // var jsonObj = JSON.parse(data);
    $("#msg").html(" 編號：" + data.id + " , 姓名：" + data.name);
  },
  dataType : "json"
  });
});

方法和.post 方法
url 請求的 url 地址
data 發(fā)送的數(shù)據(jù)
callback 成功的回調(diào)函數(shù)
type 返回的數(shù)據(jù)類型

// ajax--get 請求
$("#getBtn").click(function(){
  $.get("http://localhost:8080/Test/ajaxServlet","action=jQueryGet",function (data) {
    $("#msg").html(" get 編號：" + data.id + " , 姓名：" + data.name);
  },"json");
  });
  // ajax--post 請求
  $("#postBtn").click(function(){
    $.post("http://localhost:8080/Test/ajaxServlet","action=jQueryPost",function (data)
  {
      $("#msg").html(" post 編號：" + data.id + " , 姓名：" + data.name);
  },"json");
});

$.getJSON 方法
url 請求的 url 地址
data 發(fā)送給服務(wù)器的數(shù)據(jù)
callback 成功的回調(diào)函數(shù)

// ajax--getJson 請求
$("#getJSONBtn").click(function(){
  $.getJSON("http://localhost:8080/Test/ajaxServlet","action=jQueryGetJSON",function
  (data) {
    $("#msg").html(" getJSON 編號：" + data.id + " , 姓名：" + data.name);
  });
});

表單序列化 serialize() serialize()可以把表單中所有表單項的內(nèi)容都獲取到，并以 name=value&name=value 的形式進(jìn)行拼接。

// ajax 請求
$("#submit").click(function(){
// 把參數(shù)序列化
  $.getJSON("http://localhost:8080/Test/ajaxServlet","action=jQuerySerialize&" +
  $("#form01").serialize(),function (data) {
    $("#msg").html(" Serialize 編號：" + data.id + " , 姓名：" + data.name);
  });
});

歡迎關(guān)注公眾號：愚生淺末。

在線咨詢

上一篇：HTML與CSS的鏈接方式分類
下一篇：JavaScript 的 7 種設(shè)計模式

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商