javascript
ajax后台重定向会返回什么_第三十五天JavaScript中的ajax
AJAX
1.ajax的簡介
本小結參考：https://blog.csdn.net/caoxuecheng001/article/details/81290643
? Ajax 即“Asynchronous Javascript *And* X**ML”（異步 JavaScript 和 XML），是指一種創建交互式網頁應用的網頁開發技術。
這并不是一種新的技術，而是好多舊的技術融合在了一起，而產生了一種新的思想。它包含的技術有：JavaScript、xml、HTML 、dom、XMLHttpRequest等。
在這種技術還沒有出來之前，JavaScript一直不被人們所重視。人們普遍認為它只能去驗證用戶輸入或者彈個框什么的。人們都認為這是一種低級的語言。直到ajax出現，做出來了令人驚艷的效果，簡直到了不可思議的地步。舉兩個代表性的例子分別代表ajax兩大特性：局部刷新和異步提交。
1、百度地圖。我們都知道百度地圖不是一下子就把所有的地圖都加載進來，而是局部刷新。你拖到那個地方，網站就開始動態加載那個城市。這就用到了ajax局部刷新的功能，這個功能很是成功，讓當時人們大吃一驚。因為沒有ajax，你只要稍微動一下鼠標，網頁立刻全部重新繪制，網頁就會閃爍，你就得等待。那種情況用戶體驗是多么差啊。所以，沒有ajax就沒有地圖軟件的普及。
2、百度搜索。百度的搜索功能十分強大，令人稱奇。你只要輸入一個字或一個詞，然后搜索框的下面就會有幾個提示，關于這個字或詞的比較熱的搜索建議。你并沒有點提交按鈕，服務器就已經獲取了文本框的內容。這就叫異步提交。當然了，它不能時時刻刻都在監控你的輸入框，它會有個延遲，比如2s或3s后就給你服務器端的幾個關于這個字的搜索建議。這個功能是沒有ajax前，人們想都不敢想的功能。
2.Ajax最大的優點
? 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.創建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.發送請求xml.send();//4.監聽該請求事件xml.onreadystatechange = function () {/*readyState 狀態碼 當狀態碼發生改變的時候觸發0：表示請求還沒有建立1：表示請求已經建立2: 表示請求已經發送3: 請求處理部分完成，部分數據可用4: 請求處理完成,所有的數據都可以使用*/if (xml.readyState === 4) {//http協議中的狀態碼，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后面通過？把數據發送到后臺，所有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的時候會停止執行后面的JS代碼，直到AJAX執行完畢后時，才能繼續執行后面的JS代碼。
當把async設為false時，這時ajax的請求時同步的，也就是說，這個時候ajax塊發出請求后，他會等待，知道ajax請求執行完，再接著執行下main的js代碼。
異步:
當ajax發送請求后，在等待server端返回的這個過程中，前臺會繼續 執行ajax塊后面的腳本，直到server端返回正確的結果才會去執行回調函數(ajax相應的結果會返回到回到函數中來)
總結
以上是生活随笔為你收集整理的ajax后台重定向会返回什么_第三十五天JavaScript中的ajax的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 散光加老花如何配镜？
- 下一篇： 打印出所有的水仙花数javascript