當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Ajax后端极简笔记

發布時間：2024/1/23 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ajax后端极简笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

AJAX

第一章：AJAX基礎

概念：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-b2zn4Crx-1595717644137)(E:\政通路\課堂筆記\S2\Ajax\assets\image-20200509143743804.png)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-M9fByRhC-1595717644139)(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-6K4fNd27-1595717644143)(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代碼來實踐一下。這個是重點，看視頻，一步一步走；

第二章 jQuery實現Ajax

傳統方式實現Ajax的不足

步驟繁瑣
方法、屬性、常用值不好記憶
處理復雜數據（如XML）比較麻煩
瀏覽器兼容問題

jQuery Ajax將Ajax相關操作進行了封裝。$.ajax() 方法通過 HTTP 請求加載遠程數據。

該方法是 jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get(), $. p o s t () 等。$ .ajax() 返回其創建的 XMLHttpRequest 對象。

$. a j a x () 它包括：$ .get(),$.post()

2.1 語法格式

();小括號里面包括了{}。

在{}里面，寫了type,url,data,success,dataType這樣幾個key關鍵字的，給這幾個關鍵字賦值的時候，使用的是:"值"的方式。

$.ajax({

type: ‘POST’, //請求方式，默認為get

url: url ,

data: data ,

success: success ,

dataType: dataType

});

參數

參數描述

url	必需。規定把請求發送到哪個 URL,Servlet\|Controller
data	可選。映射或字符串值。規定連同請求發送到服務器的數據，客戶端向服務器的數據
success(result, textStatus, jqXHR)	可選。請求成功時執行的回調函數。
dataType	可選。規定預期的服務器響應的數據類型。默認執行智能判斷（xml、json、script 或 html）。

昨天else之后的代碼替換：

$.ajax({type:"get",url:"userServletByName",//data:"name="+name, //是客戶端向服務器的請求數據//按照json格式傳遞;data:{"name":name}, //""里面的是key,不帶"的是value。datatype:"text",success:function(result) { //成功的時候，執行的匿名函數;對比昨天的onreadyStatechangeconsole.log(result);if(result=='true'){$("#nameinfo").html("用戶名已經注冊").addClass("nameinfo");}else{$("#nameinfo").html("用戶名可以注冊").addClass("gre");}}});

代碼量非常簡練。

第三章 JSON

概念：是一種輕量級的數據交換格式，采用完全獨立于編程語言的文本格式來存儲和表示數據。英文：JavaScript Object Notation

3.1語法格式

{key1：value1, key2：value2, …} 的鍵值對結構，當值為字符串的時候，需要使用"",引起來。

let str={“name”:“張三”,“age”:18,“address”:“河南鄭州”}

json數組,數組的格式：

[],這個[]里面放多個{}對象或字符串

[

? {}, 這些都是json格式

? {},

? {}

]

json對象讀取：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>ajax</title><script src="js/jquery-1.12.4.min.js"></script><script>//1.定義一個簡單的json對象//這個json對象，前面的key，id name age,這些是不是數據庫里面的字段呢？？？//將來，我們的數據庫的數據，可以轉換為json數據,python,go,java都可以使用let user={"id":1,"name":"張三","age":22};//let user='{"id":1,"name":"張三","age":22}';//json字符串，字符串以""或'',包括起來;//console.log(user);//下面將這個json的數據拿到html元素里面;$(function(){//加載的時候，追加到span里面//訪問json對象的時候，格式：對象名.key,對象是user$("#cont").append("編號:"+user.id+"<br/>"+"姓名:"+user.name+"<br/>"+"年齡:"+user.age+"<br/>");})</script></head><body><span id="cont" style="display:block;border: 1px solid #2A65BA;"></span></body> </html>

json數組讀取：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>json數組的格式</title><script src="js/jquery-1.12.4.min.js"></script><script>//1.定義json數組格式;強調，不加''或""的都是對象格式;let users=[{"id":1,"name":"張三","age":22},{"id":2,"name":"李四","age":12},{"id":3,"name":"盧本偉","age":33}];console.log(users);//json對象數組;//目標：將name放到下拉框里面？？？$(function(){//針對users左一個遍歷;for(let i=0;i<users.length;i++){//將name放到select元素里面;value的好處，可以將來給后臺傳遞id，name做顯示。$("#sel").append("<option value="+users[i].id+">"+users[i].name+"</option>");}})</script></head><body><select id="sel"></select></body> </html>

第四章 Ajax和Json

案例 Ajax實現搜索框自動補全

因為Ajax技術異步請求和無刷新特性，使得在客戶端用戶體驗越來越豐富。最典型的一個案例是各大搜索引擎都應用的搜索關鍵字自動聯想功能，當打開Google或者百度，在搜索欄中輸入關鍵字時，會自動彈出很多和關鍵字相關的信息。

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

思路

1.當用戶松開鍵盤（輸入內容）時向服務器發送請求，處理事件是onkeyup;

2.服務器得到客戶端的請求數據之后，去數據庫查詢結果，返回查詢結果到客戶端；

3.客戶端得到響應數據之后，自動填充到自動提示區域；

4.在選中內容上，光標懸停會有背景突出顯示；

5.當我們單擊某個內容的時候，內容顯示到搜索框，整個提示區域關閉；

步驟

1.構建頁面，onkeyup事件

搜索框的onkeyup事件;

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>ajax自動補全</title><style>@import url("css/news.css");</style><script src="js/jquery-1.12.4.min.js"></script><script>//1.2 搜索框onkeyup事件$(function () {$("#key").keyup(function () {//首選還是先判斷文本框內容是否為空;let key=$(this).val();if(key==null||key==''){$("#tips").css("display","none");return;}else{//其他，就是搜索框有內容，ajax操作；}});});</script> </head> <body><form action="" method="get"><input type="text" name="key" id="key" placeholder="請輸入新聞標題"><button id="search" type="button">搜索</button><br/><div id="tips"></div></form> </body> </html>

2.客戶端請求服務器的數據

$.ajax({})–>Servlet–>業務層對象–>dao層對象–sql數據；

NewsDaoImpl容易出錯的代碼，sql語句的模糊查詢，再次強調！！！

可以先填坑！！！

// String sql="select * from news where title like ?"; // //預編譯語句對象賦值，？% key % // Object[]params={"%"+key+"%"};String sql="select * from news where title like concat('%',?,'%')";Object[]params={key};return BaseDao.findList(sql,News.class,params);

補充：fastjons jar

Servlet代碼

坑1：xml問題，需要設置編碼；

坑2：json,修改text/json,務必有json

//1.服務器端的Servlet,接受客戶端的數據；String key=request.getParameter("key");//2.調用業務層的對象；業務層的對象，又需要去調用dao層對象;NewsService newsService=new NewsServiceImpl();//業務層對象，根據關鍵字來查找新聞;List<News> newsList = newsService.selNewsByKey(key);//System.out.println(newsList);response.setContentType("text/html;charset=utf-8");response.setCharacterEncoding("utf-8");//向客戶端發送數據;PrintWriter writer = response.getWriter();//注意：此處有變化，使用到了新的jar：fastjson//之前輸出的是List<News>對象;writer.print(JSON.toJSON(newsList)); //fastJson直接將我們的對象集合轉換為json數據;writer.flush();writer.close();

3.填充數據到顯示區域

這時候已經得到數據了：

[{}] 是json數組;

//測試json數組的長度//console.log(result.length);//如何顯示2條json數組的數據；思路：循環；let content=""; //定義變量，接受title的內容;for(let i=0;i<result.length;i++){content+="<div>"+result[i].title+"</div>";}//填充到提示區域;$("#tips").html(content).show();

4.5 剩下功能

//4.背景突出顯示;利用hover(a,b):相當于mouseover,mouseout$(".list_link").hover(function(){$(this).addClass("hover");},function () {$(this).removeClass("hover");});//5.單擊選中內容的時候，提示區域沒有了，選中內容到了搜索框；$(".list_link").click(function () {$("#key").val($(this).html());$("#tips").html("").hide();//清空，并隱藏;});

作業：如何顯示新聞標題新聞作者,模仿天貓的自動補全；

},function () {$(this).removeClass("hover");});//5.單擊選中內容的時候，提示區域沒有了，選中內容到了搜索框；$(".list_link").click(function () {$("#key").val($(this).html());$("#tips").html("").hide();//清空，并隱藏;}); 作業：如何顯示新聞標題新聞作者,模仿天貓的自動補全；[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-SlrYvPTS-1595717644153)(E:\政通路\課堂筆記\S2\Ajax\assets\image-20200519182905566.png)]

總結

以上是生活随笔為你收集整理的Ajax后端极简笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Node.js 极简笔记
下一篇： C# 三层级架构问题之能加载文件或程