AJAX

第一章：AJAX與jQuery

概念：AJAX = Asynchronous JavaScript And XML（異步的 JavaScript 和 XML）。阿賈克斯

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

AJAX 是與服務器交換數據并更新部分網頁的藝術，在不重新加載整個頁面的情況下。簡言之：是局部刷新技術。異步刷新。

回顧歷史：

• Web 1.0 sina sohu 用戶被動接受新聞
• Web 2.0 社區，web群 互動 環節增加，用戶和服務器交互
• Web 3.0 自媒體，突出客戶的實現，客戶也可以成為中心，其他人訂閱 參與 討論等
• Web 4.0 物聯網時代 自媒體 人 服務器 +機器交互，機器本身也是參與者。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-As9291jx-1589017347355)(E:\政通路\課堂筆記\S2\Ajax\assets\image-20200509143743804.png)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-rjD07pgw-1589017347359)(E:\政通路\課堂筆記\S2\Ajax\assets\image-20200509143807384.png)]

1.Ajax核心 XMLHttpRequest

所有現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后臺與服務器交換數據。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

1.1 對象的創建

let xmlhttp; if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

1.2 對象的方法

method：http請求的方法有倆get/post,選擇就是get/post。

url：就是View層的頁面要提交到服務器的請求，一般是Servlet

async:true：異常請求；false:同步請求

方法描述

open(method,url,async)	創建一個請求
send(string)	將請求發送到服務器。 string：僅用于 POST 請求

1.3 onreadystatechange 事件

當請求被發送到服務器時，我們需要執行一些基于響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

下面是 XMLHttpRequest 對象的三個重要的屬性：

屬性描述

onreadystatechange	存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 0: 請求未初始化 1: 服務器連接已建立 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
status	200: "OK"404: 未找到頁面；500：服務器問題

1.4 服務器的響應

如需獲得來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

屬性描述

responseText	獲得字符串形式的響應數據。
responseXML	獲得 XML 形式的響應數據。

2.使用步驟

如何使用ajax，使用有兩種：一種是前端的純粹的使用，node+ajax；一種是后臺的，我們關注的是后臺。

我們之前增加用戶的時候，假設用戶名(賬戶)不能重復，我們之前是沒有判斷的。

當數據庫服務器存在某用戶的時候，文本框離開，則報已經存在該用戶了；否則，顯示可以注冊。

• 創建XMLHttpRequest對象
• 設置請求信息open(get|post,url,true|false)
• 向服務器發送請求
• 讓XmlHttpRequest對象接受服務器的響應數據，通過創建的回調函數
• 編寫服務器端處理客戶端請求

步 驟請求方式實 現 代 碼

初始化組件	GET	xmlHttpRequest.open( “GET”,url, true );
POST	xmlHttpRequest.open( “POST”,url, true ); xmlHttpRequest.setRequestHeader( “Content-Type”, “application/x-www-form-urlencoded” );
發送請求	GET	xmlHttpRequest.send( null );
POST	xmlHttpRequest.send(“key=xxx&type=12&year=2016” );

get代碼實現：

//1.創建XmlHttpRequest對象,封裝一下，封裝到一個函數;function createXhr() {if(window.XMLHttpRequest)return new XMLHttpRequest();//如果有，則創建其對象;elsereturn new ActiveXObject("Microsoft.XMLHTTP");}//2.開始實現我們的目標；離開的事件是blur$(function () {//離開的時候，先判斷一下；用戶名不能為空，實際上應該是正則驗證;$("#name").blur(function () {let name=$("#name").val();if(name==null||name==''){//后續使用正則實現$("#nameinfo").html("用戶不能為空!").addClass("nameinfo");/*剛才的錯誤是style里面加了一個html的注釋，虧!!!*/}else{//否則，就是輸入的不是空了，有值，那這個值就要看看是否存在于數據庫了。//2.1 這時候要得到XmlHttpRequest對象;xhr=createXhr();//2.2設置請求行open,請求后臺的Servlet,客戶端向服務器發送了一個參數name，值namexhr.open("get","userServletByName?name="+name,true);//2.3.發送請求,get的時候不加東西；xhr.send(null);//2.4當事件改變Ok的時候，響應的函數；xhr.onreadystatechange=function () {//readyState==4;并且狀態為200的時候，才OK。if(xhr.readyState==4 && xhr.status==200){//定義變量data，接受異步對象xhr的服務器的響應數據;由Servlet來返回let data=xhr.responseText;console.log(data);//暫停一下;//下面就是根據data響應的數據值做出判斷;//服務器端響應給我們，true|false了.data-->文本;我們把它當成了booleanif(data=='true'){$("#nameinfo").html("用戶名已經注冊").addClass("nameinfo");}else{$("#nameinfo").html("用戶名可以注冊");$("#nameinfo").css("color","green");}}}}});})

post代碼實現：

修改get的2. 3.步驟即可;

//2.2設置請求行open,請求后臺的Servlet,客戶端向服務器發送了一個參數name，值name//xhr.open("get","userServletByName?name="+name,true);xhr.open("post","userServletByName",true);xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); //必須有;//2.3.發送請求,get的時候不加東西；//xhr.send(null);get 沒東西;xhr.send("name="+name);

問題：

1.[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-sSltRVVd-1589017347367)(E:\政通路\課堂筆記\S2\Ajax\assets\image-20200509155731042.png)]

//向客戶端發響應，編碼要一致;response.setContentType("text/html;charset=UTF-8");response.setCharacterEncoding("UTF-8");

2.出來2行的問題是需要加判斷,并且&&符號；

if(xhr.readyState==4 && xhr.status==200){代碼}

總結一下：

1.了解異步對象XmlHttpRequest

2.了解其四大步驟；

3.通過javaweb代碼來實踐一下。這個是重點，看視頻，一步一步走；

總結

以上是生活随笔為你收集整理的第一章：AJAX与jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。