AJAX

第一章：AJAX與jQuery

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

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

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

回顧歷史：

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

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

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

1.Ajax核心 XMLHttpRequest

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

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

1.1 對象的創(chuàng)建

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層的頁面要提交到服務(wù)器的請求，一般是Servlet

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

方法描述

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

1.3 onreadystatechange 事件

當請求被發(fā)送到服務(wù)器時，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。

每當 readyState 改變時，就會觸發(fā) onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。

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

屬性描述

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

1.4 服務(wù)器的響應(yīng)

如需獲得來自服務(wù)器的響應(yīng)，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

屬性描述

responseText	獲得字符串形式的響應(yīng)數(shù)據(jù)。
responseXML	獲得 XML 形式的響應(yīng)數(shù)據(jù)。

2.使用步驟

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

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

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

• 創(chuàng)建XMLHttpRequest對象
• 設(shè)置請求信息open(get|post,url,true|false)
• 向服務(wù)器發(fā)送請求
• 讓XmlHttpRequest對象接受服務(wù)器的響應(yīng)數(shù)據(jù)，通過創(chuàng)建的回調(diào)函數(shù)
• 編寫服務(wù)器端處理客戶端請求

步 驟請求方式實 現(xiàn) 代 碼

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

get代碼實現(xiàn)：

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

post代碼實現(xiàn)：

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

//2.2設(shè)置請求行open,請求后臺的Servlet,客戶端向服務(wù)器發(fā)送了一個參數(shù)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.發(fā)送請求,get的時候不加?xùn)|西；//xhr.send(null);get 沒東西;xhr.send("name="+name);

問題：

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

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

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

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

總結(jié)一下：

1.了解異步對象XmlHttpRequest

2.了解其四大步驟；

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

總結(jié)

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

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