當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端之 AJAX

發(fā)布時間：2023/12/20 HTML 19 豆豆

生活随笔收集整理的這篇文章主要介紹了前端之 AJAX 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

AJAX參數(shù)詳細(xì)列表

參數(shù)名	類型	描述
url	String	(默認(rèn): 當(dāng)前頁地址) 發(fā)送請求的地址。
type	String	(默認(rèn): "GET") 請求方式 ("POST" 、 "GET")。注意：其它 HTTP 請求方法，如 PUT 和 DELETE ，但僅部分瀏覽器支持。
timeout	Number	設(shè)置請求超時時間（毫秒）。此設(shè)置將覆蓋全局設(shè)置。
async	Boolean	(默認(rèn): true) 默認(rèn)設(shè)置下，所有請求均為異步請求。如果需要發(fā)送同步請求，請將此選項設(shè)置為 false。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執(zhí)行。
beforeSend	Function	發(fā)送請求前可修改 XMLHttpRequest 對象的函數(shù)，如添加自定義 HTTP 頭。XMLHttpRequest 對象是唯一的參數(shù)。 function (XMLHttpRequest) { ? ? this; // the options for this ajax request }
cache	Boolean	(默認(rèn): true) jQuery 1.2 新功能，設(shè)置為 false 將不會從瀏覽器緩存中加載請求信息。
complete	Function	請求完成后回調(diào)函數(shù) (請求成功或失敗時均調(diào)用)。參數(shù)： XMLHttpRequest 對象，成功信息字符串。 function (XMLHttpRequest, textStatus) { ? ? this; // the options for this ajax request }
contentType	String	(默認(rèn): "application/x-www-form-urlencoded") 發(fā)送信息至服務(wù)器時內(nèi)容編碼類型。默認(rèn)值適合大多數(shù)應(yīng)用場合。
data	Object, String	發(fā)送到服務(wù)器的數(shù)據(jù)。將自動轉(zhuǎn)換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉(zhuǎn)換。必須為 Key/Value 格式。如果為數(shù)組，jQuery 將自動為不同值對應(yīng)同一個名稱。如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 '&foo=bar1&foo=bar2'。
dataType	String	預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，jQuery 將自動根據(jù) HTTP 包 MIME 信息返回 responseXML 或 responseText，并作為回調(diào)函數(shù)參數(shù)傳遞，可用值: ? ? "xml": 返回 XML 文檔，可用 jQuery 處理。 ? ? "html": 返回純文本 HTML 信息；包含 script 元素。 ? ? "script": 返回純文本 JavaScript 代碼。不會自動緩存結(jié)果。 ? ? "json": 返回 JSON 數(shù)據(jù) 。 ? ? "jsonp":?JSONP?格式。使用?JSONP?形式調(diào)用函數(shù)時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。
error	Function	(默認(rèn): 自動判斷 (xml 或 html)) 請求失敗時將調(diào)用此方法。這個方法有三個參數(shù)：XMLHttpRequest 對象，錯誤信息，（可能）捕獲的錯誤對象。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常情況下textStatus和errorThown只有其中一個有值 ? ? this; // the options for this ajax request }
global	Boolean	(默認(rèn): true) 是否觸發(fā)全局 AJAX 事件。設(shè)置為 false 將不會觸發(fā)全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified	Boolean	(默認(rèn): false) 僅在服務(wù)器數(shù)據(jù)改變時獲取新數(shù)據(jù)。使用 HTTP 包 Last-Modified 頭信息判斷。
processData	Boolean	(默認(rèn): true) 默認(rèn)情況下，發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對象(技術(shù)上講并非字符串) 以配合默認(rèn)內(nèi)容類型 "application/x-www-form-urlencoded"。如果要發(fā)送 DOM 樹信息或其它不希望轉(zhuǎn)換的信息，請設(shè)置為 false。
success	Function	請求成功后回調(diào)函數(shù)。這個方法有兩個參數(shù)：服務(wù)器返回數(shù)據(jù)，返回狀態(tài) function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... ? ? this; // the options for this ajax request }

error 的一些事項

一、error：function (XMLHttpRequest, textStatus, errorThrown

(默認(rèn): 自動判斷 (xml 或 html)) 請求失敗時調(diào)用時間。參數(shù)有以下三個：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的錯誤對象。如果發(fā)生了錯誤，錯誤信息（第二個參數(shù)）除了得到null之外，還可能是"timeout", "error", "notmodified" 和 "parsererror"。

二、error事件返回的第一個參數(shù)XMLHttpRequest有一些有用的信息：

XMLHttpRequest.readyState 狀態(tài)碼：

0 －（未初始化）還沒有調(diào)用send()方法?
1 －（載入）已調(diào)用send()方法，正在發(fā)送請求?
2 －（載入完成）send()方法執(zhí)行完成，已經(jīng)接收到全部響應(yīng)內(nèi)容?
3 －（交互）正在解析響應(yīng)內(nèi)容?
4 －（完成）響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了

XMLHttpRequest.status 返回值狀態(tài)碼

AJAX準(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":"Q1mi"}'); JSON.parse('{name:"Q1mi"}') ; // 錯誤 JSON.parse('[18,undefined]') ; // 錯誤

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

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

和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> </country>

用JSON表示如下：

{"name": "中國","province": [{"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）。

AJAX 不是新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。

AJAX 最大的優(yōu)點是在不重新加載整個頁面的情況下，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁內(nèi)容。（這一特點給用戶的感受是在不知不覺中完成請求和響應(yīng)過程）

AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執(zhí)行。

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

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

搜索引擎根據(jù)用戶輸入的關(guān)鍵字，自動提示檢索關(guān)鍵字。還有一個很重要的應(yīng)用場景就是注冊時候的用戶名的查重。當(dāng)文件框發(fā)生了輸入變化時，使用AJAX技術(shù)向服務(wù)器發(fā)送一個請求，然后服務(wù)器會把查詢到的結(jié)果響應(yīng)給瀏覽器，最后再把后端返回的結(jié)果展示出來。

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

AJAX的優(yōu)缺點

優(yōu)點：

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

jQuery實現(xiàn)的AJAX

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="{% static 'JS/jquery-3.1.1.js' %}"></script> </head> <body> <button class="send_Ajax">send_Ajax</button> <script>//$.ajax的兩種使用方式://$.ajax(settings);//$.ajax(url,[settings]);$(".send_Ajax").click(function(){$.ajax({url:"/handle_Ajax/",type:"POST",data:{username:"Yuan",password:123},success:function(data){alert(data)},//=================== error============error: function (jqXHR, textStatus, err) {// jqXHR: jQuery增強(qiáng)的xhr// textStatus: 請求完成狀態(tài)// err: 底層通過throw拋出的異常對象，值與錯誤類型有關(guān)console.log(arguments);},//=================== complete============complete: function (jqXHR, textStatus) {// jqXHR: jQuery增強(qiáng)的xhr// textStatus: 請求完成狀態(tài) success | errorconsole.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);console.log('textStatus: %s', textStatus);},//=================== statusCode============statusCode: {'403': function (jqXHR, textStatus, err) {console.log(arguments); //注意：后端模擬errror方式：HttpResponse.status_code=500},'400': function () {}}})}) </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ù)

請求參數(shù)

###################### data ################ 當(dāng)前ajax請求要攜帶的數(shù)據(jù)，是一個json的object對象，ajax方法就會默認(rèn)地把它編碼成某種格式 (urlencoded:?a=1&b=2)發(fā)送給服務(wù)端；此外，ajax默認(rèn)以get方式發(fā)送請求。 $.ajax("/test",{ //此時的data是一個json形式的對象data:{a:1,b:2}) //?a=1&b=2 ###################### processData ################ 聲明當(dāng)前的data數(shù)據(jù)是否進(jìn)行轉(zhuǎn)碼或預(yù)處理，默認(rèn)為true，即預(yù)處理； if為false，那么對data：{a:1,b:2}會調(diào)用json對象的toString()方法，即{a:1,b:2}.toString() ,最后得到一個［object，Object］形式的結(jié)果。###################### contentType ################ 默認(rèn)值: "application/x-www-form-urlencoded"。發(fā)送信息至服務(wù)器時內(nèi)容編碼類型。用來指明當(dāng)前請求的數(shù)據(jù)編碼格式；urlencoded:?a=1&b=2；如果想以其他方式提交數(shù)據(jù)，比如contentType:"application/json"，即向服務(wù)器發(fā)送一個json字符串： $.ajax("/ajax_get",{data:JSON.stringify({a:22,b:33}),contentType:"application/json",type:"POST", }); //{a: 22, b: 33} 注意：contentType:"application/json"一旦設(shè)定，data必須是json字符串，不能是json對象 views.py: json.loads(request.body.decode("utf8"))###################### traditional ################ 一般是我們的data數(shù)據(jù)有數(shù)組時會用到：data:{a:22,b:33,c:["x","y"]}, traditional為false會對數(shù)據(jù)進(jìn)行深層次迭代；

響應(yīng)參數(shù)

dataType：預(yù)期服務(wù)器返回的數(shù)據(jù)類型,服務(wù)器端返回的數(shù)據(jù)會根據(jù)這個值解析后，傳遞給回調(diào)函數(shù)。默認(rèn)不需要顯性指定這個屬性，ajax會根據(jù)服務(wù)器返回的content Type來進(jìn)行轉(zhuǎn)換；比如我們的服務(wù)器響應(yīng)的content Type為json格式，這時ajax方法就會對響應(yīng)的內(nèi)容進(jìn)行一個json格式的轉(zhuǎn)換，if轉(zhuǎn)換成功，我們在success的回調(diào)函數(shù)里就會得到一個json格式的對象；轉(zhuǎn)換失敗就會觸發(fā)error這個回調(diào)函數(shù)。如果我們明確地指定目標(biāo)類型，就可以使用data Type。dataType的可用值：html｜xml｜json｜text｜script見下dataType實例

Django 實現(xiàn)AJAX

from django.shortcuts import render,HttpResponse from django.views.decorators.csrf import csrf_exempt # Create your views here. import jsondef login(request):return render(request,'Ajax.html')def ajax_get(request):l=['alex','little alex']dic={"name":"alex","pwd":123}#return HttpResponse(l) #元素直接轉(zhuǎn)成字符串a(chǎn)lexlittle alex#return HttpResponse(dic) #字典的鍵直接轉(zhuǎn)成字符串namepwdreturn HttpResponse(json.dumps(l))return HttpResponse(json.dumps(dic))# 傳到前端的是json字符串,要想使用,需要JSON.parse(data) //---------------------------------------------------function testData() {$.ajax('ajax_get', {success: function (data) {console.log(data);console.log(typeof(data)); //dataType:"json",//console.log(data.name);//JSON.parse(data);//console.log(data.name);},})}注解:Response Headers的content Type為text/html,所以返回的是String;但如果我們想要一個json對象設(shè)定dataType:"json"即可,相當(dāng)于告訴ajax方法把服務(wù)器返回的數(shù)據(jù)轉(zhuǎn)成json對象發(fā)送到前端.結(jié)果為object當(dāng)然，return HttpResponse(json.dumps(a),content_type="application/json")這樣就不需要設(shè)定dataType:"json"了。content_type="application/json"和content_type="json"是一樣的！

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

方式1

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

$.ajax({data: {"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val() //使用jQuery取出csrfmiddlewaretoken的值，拼接到data中}, })

方式2

通過獲取返回的cookie中的字符串放置在請求頭中發(fā)送。注意：需要引入一個jquery.cookie.js插件。

$.ajax({headers: {"X-CSRFToken": $.cookie('csrftoken')}, //從Cookie取csrftoken，并設(shè)置到請求頭中 })

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

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

注意：

如果使用從cookie中取csrftoken的方式，需要確保cookie存在csrftoken值。

如果你的視圖渲染的HTML文件中沒有包含 {% csrf_token %}，Django可能不會設(shè)置CSRFtoken的cookie。這個時候需要使用ensure_csrf_cookie()裝飾器強(qiáng)制設(shè)置Cookie。

django.views.decorators.csrf import ensure_csrf_cookie@ensure_csrf_cookie def login(request):pass

更多細(xì)節(jié)詳見：Djagno官方文檔中關(guān)于CSRF的內(nèi)容上傳文件

form表單上傳文件

html

<h3>form表單上傳文件</h3> <form action="/upload_file/" method="post" enctype="multipart/form-data"><p><input type="file" name="upload_file_form"></p><input type="submit"> </form>

view

def upload_file(request):print("FILES:",request.FILES)print("POST:",request.POST)return HttpResponse("上傳成功!")

Ajax(FormData)

FormData是什么呢？XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優(yōu)點就是我們可以異步上傳一個二進(jìn)制文件.

所有主流瀏覽器的較新版本都已經(jīng)支持這個對象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

html

<h3>Ajax上傳文件</h3><p><input type="text" name="username" id="username" placeholder="username"></p> <p><input type="file" name="upload_file_ajax" id="upload_file_ajax"></p> <button id="upload_button">提交</button> {#注意button標(biāo)簽不要用在form表單中使用#}<script>$("#upload_button").click(function(){var username=$("#username").val();var upload_file=$("#upload_file_ajax")[0].files[0];var formData=new FormData();formData.append("username",username);formData.append("upload_file_ajax",upload_file);$.ajax({url:"/upload_file/",type:"POST",data:formData,contentType:false,processData:false,success:function(){alert("上傳成功!")}});}) </script>

views同上

偽造Ajax上傳文件

iframe標(biāo)簽

示例：<iframe?src="http://www.baidu.com" width="1000px" height="600px"></iframe>

iframe+form

<h3>偽造Ajax上傳文件</h3> <form action="/upload_file/" method="post" id="form2" target="ifr" enctype="multipart/form-data"><p><iframe name="ifr" id="ifr"></iframe></p><p><input type="file" name="upload_file"></p><p><input type="text" name="user"></p><input type="button" value="提交" id="submitBtn"> </form> <script>$("#submitBtn").click(function(){$("#ifr").load(iframeLoaded);$("#form2").submit();});function iframeLoaded(){alert(123)} </script>

序列化

serialize()函數(shù)用于序列化一組表單元素，將表單內(nèi)容編碼為用于提交的字符串。

serialize()函數(shù)常用于將表單內(nèi)容序列化，以便用于AJAX提交。

該函數(shù)主要根據(jù)用于提交的有效表單控件的name和value，將它們拼接為一個可直接用于表單提交的文本字符串，該字符串已經(jīng)過標(biāo)準(zhǔn)的URL編碼處理(字符集編碼為UTF-8)。

該函數(shù)不會序列化不需要提交的表單控件，這和常規(guī)的表單提交行為是一致的。例如：不在<form>標(biāo)簽內(nèi)的表單控件不會被提交、沒有name屬性的表單控件不會被提交、帶有disabled屬性的表單控件不會被提交、沒有被選中的表單控件不會被提交。

與常規(guī)表單提交不一樣的是：常規(guī)表單一般會提交帶有name的按鈕控件，而serialize()函數(shù)不會序列化帶有name的按鈕控件

語法

jQuery?1.0 新增該函數(shù)。

語法：jQueryObject.serialize( )

返回值

serialize()函數(shù)的返回值為String類型，返回將表單元素編碼后的可用于表單提交的文本字符串。

對<form>元素進(jìn)行序列化可以直接序列化其內(nèi)部的所有表單元素。

// 序列化<form>內(nèi)的所有表單元素 // 序列化后的結(jié)果：uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2 alert( $("form").serialize() );

我們也可以直接對部分表單元素進(jìn)行序列化。

// 序列化所有的text、select、checkbox表單元素 // 序列化后的結(jié)果：username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2 alert( $(":text, select, :checkbox").serialize() );

serialize()函數(shù)通常用于將表單內(nèi)容序列化，以便通過AJAX方式提交。

$("#btn").click( function(){// 將當(dāng)前表單內(nèi)容以POST請求的AJAX方式提交到"http://www.365mini.com"$.post( "http://www.365mini.com", $("form").serialize(), function( data, textStatus, jqXHR ){alert( "AJAX提交成功!" ); } ); } );

總結(jié)

以上是生活随笔為你收集整理的前端之 AJAX的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

Ajax

上一篇：机器学习之线性回归损失函数、代价函数、
下一篇：前端之使用 POST 提交数据并跳转