ajax到底是什嗎？ajax的背景和使用介紹（附執行個體解析）

本篇文章主要的介紹了ajax的詳情，ajax的具體含義介紹，還有唯有要用ajax的說明，現在一起來看這篇文章吧

首先我們看看什麼是ajax?

常常聽到ajax的大名，那麼，什麼是ajax呢？

1:背景介紹

首先，speak with me, 誒債克斯，別讀成阿賈克斯了哦~。

AJAX = Asynchronous JavaScript and XML（非同步 JavaScript 和 XML）。

AJAX 不是新的程式設計語言，而是一種使用現有標準的新方法。

AJAX 最大的優點是在不重新載入整個頁面的情況下，可以與伺服器交換資料並更新部分網頁內容。

AJAX 不需要任何瀏覽器外掛程式，但需要使用者允許JavaScript在瀏覽器上執行。

2.知識解析：

Ajax就是用 JS 發起一個請求，並得到伺服器返回的內容。這跟以前的技術最大的不同點在於「頁面沒有重新整理」，改善了使用者體驗，僅此而已。

那麼我們如何發送一個ajax請求呢？

1. 建立一個對象 XMLHttpRequest

var xhr = new XMLHttpRequest();為了支援ie6以及更早的版本，要 var xhr=new ActiveXObject()

2.監聽請求成功後的狀態變化

3.佈建要求參數

4.發起請求

5.操作DOM，實現動態局部重新整理

而什麼是一個完整的HTTP請求呢？

一個完整的請求由四部分組成

接下來，我們就要監聽請求成功的狀態變化了

onreadystatechange：用來監聽readyState的變化的

readyState：表示當前請求的背景狀態

status：表示處理的結果

其中readyState：表示當前請求的背景狀態

0：請求未初始化(還沒有調用open())

1：請求已經建立，但是還沒有發送(還沒有調用send())

2：請求已經發送，正在處理中

3：請求正在處理中，通常響應中已經有部分資料可以用了

4：響應已經完成，可以擷取並使用伺服器的響應了

而status：表示處理的結果(狀態代碼)

1XX，表示收到請求正在處理中

status == 200 是表示處理的結果是OK的

狀態代碼:200到300是指服務端正常返回

304:如果網頁自要求者上次請求後再也沒有更改過，應將伺服器配置為返回此響應，進而節省頻寬和開銷

404:找不到對象（404 not found)

503:伺服器逾時

佈建要求參數

xhr對象接受三個參數
1：表示請求類型
2：表示請求的網址
3：表示是否非同步

get/post/put/delete

Get和post方法的區別：

get是擷取資料，get的send方法的參數可以是null或者空，對發送資訊有限制，一般在2000個字元，一般是用來查詢（等冪）
post可以發送資料，但是在使用post方法發送資料，需要使用setRequestHeader()來添加HTTP頭，同時，post的send()方法需要寫入要發送的資料的值, 一般用於修改伺服器上的資源，對資訊數量無限制，也更安全（想看更多就到topic.alibabacloud.comAJAX開發手冊欄目中學習）

3常見問題

使用post提交需要忘記content-type的問題

4.解決方案

xhr.open("post", "/carrots-admin-ajax/a/login",true);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xhr.send("name=" + name + "&pwd=" + code);

Content-type要作為要求標頭放在open和send之間

5.編碼實戰

var xhr = new XMLHttpRequest();function ip() {    var name = $("#name").val();    var code = $("#code").val();// 指定通訊過程中狀態改變時的回呼函數    xhr.open("post", "/carrots-admin-ajax/a/login",true);    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");    xhr.send("name=" + name + "&pwd=" + code);    xhr.onreadystatechange = function () {        if (xhr.readyState == 4) {            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {                if (JSON.parse(xhr.responseText).code >= 0) {                    window.location.href = "http://dev.admin.carrots.ptteng.com/";                } else {                    $(".alert").html("該使用者不存在或密碼不正確");                }            }        }    };}$(function () {    $("#summit").click(function () {        var name = $("#name").val();        var code = $("#pwd").val();        $.ajax({            type: "POST",            url: "/carrots-admin-ajax/a/login",            data: {                "name": name,                "pwd": code            },            // beforeSend: function(xhr){xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");},            datatype:"json",            success: function (data) {                console.log(data);                if (JSON.parse(data).code==0) {                    alert(JSON.parse(data).message);                }                else {                    alert(JSON.parse(data).message)                }            }        })    })});

6擴充思考

Ajax有什麼優點和缺點？

參考文獻

jqury ajax方法

菜鳥教程

更多討論

1. 請求體是什嗎？

請求體將一個頁面表單中的組件值通過param1=value1¶m2=value2的索引值對形式編碼成一個格式化串，它承載多個請求參數的資料。不但報文體可以傳遞請求參數，請求URL也可以通過類似於“/chapter15/user.html? param1=value1¶m2=value2”的方式傳遞請求參數。

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

application/x-www-form-urlencoded代表什麼意思？

form的enctype屬性為編碼方式，常用有兩種：application/x-www-form-urlencoded和multipart/form-data，預設為application/x-www-form-urlencoded。

x-www-form-urlencoded

當action為get時候，瀏覽器用x-www-form-urlencoded的編碼方式把form資料轉換成一個字串（name1=value1&name2=value2…），然後把這個字串append到url後面，用?分割，載入這個新的url。

3.jQuery如何設定接受的資料類型？

使用datatype:"json",裡面寫自己想要接受的資料類型

本篇文章到這就結束了（想看更多就到topic.alibabacloud.comAJAX使用手冊欄目中學習），有問題的可以在下方留言提問。