當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

ajax后台重定向会返回什么_第三十五天JavaScript中的ajax

發(fā)布時間：2024/9/19 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 ajax后台重定向会返回什么_第三十五天JavaScript中的ajax 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

AJAX

1.ajax的簡介

本小結參考：https://blog.csdn.net/caoxuecheng001/article/details/81290643

? Ajax 即“Asynchronous Javascript *And* X**ML”（異步 JavaScript 和 XML），是指一種創(chuàng)建交互式網頁應用的網頁開發(fā)技術。

這并不是一種新的技術，而是好多舊的技術融合在了一起，而產生了一種新的思想。它包含的技術有：JavaScript、xml、HTML 、dom、XMLHttpRequest等。

在這種技術還沒有出來之前，JavaScript一直不被人們所重視。人們普遍認為它只能去驗證用戶輸入或者彈個框什么的。人們都認為這是一種低級的語言。直到ajax出現，做出來了令人驚艷的效果，簡直到了不可思議的地步。舉兩個代表性的例子分別代表ajax兩大特性：局部刷新和異步提交。

1、百度地圖。我們都知道百度地圖不是一下子就把所有的地圖都加載進來，而是局部刷新。你拖到那個地方，網站就開始動態(tài)加載那個城市。這就用到了ajax局部刷新的功能，這個功能很是成功，讓當時人們大吃一驚。因為沒有ajax，你只要稍微動一下鼠標，網頁立刻全部重新繪制，網頁就會閃爍，你就得等待。那種情況用戶體驗是多么差啊。所以，沒有ajax就沒有地圖軟件的普及。

2、百度搜索。百度的搜索功能十分強大，令人稱奇。你只要輸入一個字或一個詞，然后搜索框的下面就會有幾個提示，關于這個字或詞的比較熱的搜索建議。你并沒有點提交按鈕，服務器就已經獲取了文本框的內容。這就叫異步提交。當然了，它不能時時刻刻都在監(jiān)控你的輸入框，它會有個延遲，比如2s或3s后就給你服務器端的幾個關于這個字的搜索建議。這個功能是沒有ajax前，人們想都不敢想的功能。

2.Ajax最大的優(yōu)點

? 1). 能在不刷新整個頁面的情況下維持與服務器通信

2). 使用異步的方式與服務器通信，不打斷用戶的操作

使用局部刷新技術會讓頁面現實的效率更高,同時又不破壞其他內容的顯示,這就是Ajax的主要用處

3.先來介紹原生ajax操作模擬驗證登錄時，當輸入的用戶名已注冊時，就會立刻提示該注冊用戶名已注冊過。

用戶名: <input type="text" name="uname"><span id="sp"></span>

這個是jsp頁面中一個簡單的輸入框。用來模擬用戶注冊，當用戶名已注冊過時，旁邊的span標簽中會添加內容來提示用戶。

整個ajax請求的代碼如下，以get請求方式說明

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>原生get方式ajax請求</title><script src="js/jquery.min.js"></script> </head> <body>用戶名: <input type="text" name="uname"><span id="sp"></span><script>var $sp = $("#sp");var $inp = $("input[name='uname']")[0];$($inp).blur(function () {//1.創(chuàng)建XMLHttpRequest對象var xml = new XMLHttpRequest();//2.配置請求信息/*open方法參數做說明open(method,url,[async])method get|postasync默認是true異步請求， false為同步請求可選*/xml.open('get','${pageContext.request.contextPath}/myServlet?uname='+$($inp).val(), true);//3.發(fā)送請求xml.send();//4.監(jiān)聽該請求事件xml.onreadystatechange = function () {/*readyState 狀態(tài)碼當狀態(tài)碼發(fā)生改變的時候觸發(fā)0：表示請求還沒有建立1：表示請求已經建立2: 表示請求已經發(fā)送3: 請求處理部分完成，部分數據可用4: 請求處理完成,所有的數據都可以使用*/if (xml.readyState === 4) {//http協議中的狀態(tài)碼，200表示正常完成一次請求，//404表示訪問的地址不存在，500表示內部服務器錯誤if (xml.status === 200) {//5.處理返回的相關數據，實現局部刷新alert(xml.responseText);//通過后臺返回的布爾值,來判定該用戶名是否存在var data = xml.responseText;if (data === "false") {$sp.html("可以注冊");$sp.css("color","#ff0");} else {$sp.html("用戶名已經存在");$sp.css("color","red");}}}}});</script> </body> </html>

后臺使用servlet來模擬查詢用戶名

@WebServlet("/myServlet") public class MyServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String name = req.getParameter("uname");System.out.println(name);if("李四".equals(name)){resp.getWriter().write("true");} else {resp.getWriter().write("false");}}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);} }

通過一個李四來模擬數據庫已存在，如果和李四同名則說明數據庫中該用戶已存在。

來說明一下get和post方法請求的不同：

post方法因為不能在url后面通過？把數據發(fā)送到后臺，所有post請求必須在open方法后面設置請求頭

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

xmlHttp為XMLHttpRequest對象名，

在send()方法中通過key=value&key1=value2...的方式來向后臺方式數據。

xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");

ajax請求post方式代碼如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>原生post方式ajax請求</title><script src="js/jquery.min.js"></script> </head> <body>用戶名: <input type="text" name="uname"><span id="sp"></span><script>var $sp = $("#sp");var $inp = $("input[name='uname']")[0];$($inp).blur(function () {var xml = new XMLHttpRequest();//xml.open("post", '${pageContext.request.contextPath}/myServlet', true);//post方式必須設置請求頭格式xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xml.send("uname="+$($inp).val());xml.onreadystatechange = function () {if (xml.readyState === 4) {if (xml.status === 200) {//responseText 獲取響應內容// alert(xml.responseText);var data = xml.responseText;if (data === "false") {$sp.html("可以注冊");$sp.css("color","#ff0");} else {$sp.html("用戶名已經存在");$sp.css("color","red");}}}}});</script> </body> </html>

ajax請求同步和異步的區(qū)別

同步:

當執(zhí)行當前AJAX的時候會停止執(zhí)行后面的JS代碼，直到AJAX執(zhí)行完畢后時，才能繼續(xù)執(zhí)行后面的JS代碼。

當把async設為false時，這時ajax的請求時同步的，也就是說，這個時候ajax塊發(fā)出請求后，他會等待，知道ajax請求執(zhí)行完，再接著執(zhí)行下main的js代碼。

異步:

當ajax發(fā)送請求后，在等待server端返回的這個過程中，前臺會繼續(xù) 執(zhí)行ajax塊后面的腳本，直到server端返回正確的結果才會去執(zhí)行回調函數(ajax相應的結果會返回到回到函數中來)

總結

以上是生活随笔為你收集整理的ajax后台重定向会返回什么_第三十五天JavaScript中的ajax的全部內容，希望文章能夠幫你解決所遇到的問題。

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