用JS實現post和get兩種方式異步刷新

1，Ajax是個啥玩意？

Ajax 即"Asynchronous JavaScript And XML", 指一種創建交互式，快速動態網頁應用的網頁開發技術，無需加載整個網頁的情況下，能夠更新部分網頁的技術。

2，異步刷新？是個啥玩意？

用js里面的XMLHttpRequest對象來和servlet交互，來實現數據的交換，這里只講js的實現方式。

3，為什么要有異步刷新

提交表單內容到jsp頁面，再jsp轉發重定向，這樣會把整個頁面都給查一遍，是整個頁面哦。所以不讓整個頁面刷新，就用了ajax，讓頁面局部刷新。

4，用一個使用電話號碼注冊的小demo來解釋
后臺servlet

protected void service(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {// 設置編碼req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("utf-8");// 文本類型 resp.setContentType("text/html; charset=utf-8");String mobile = req.getParameter("mobile");System.out.println(mobile);PrintWriter out = resp.getWriter();if ("19999999999".equals(mobile)) {// 存在號碼out.write("true");} elseout.write("false");out.close();}

get方式

前臺頁面

電話號碼：<input type="text" id = "mobile"/> <br/><button onclick = "getRegister()">注冊</button><script type="text/javascript">function getRegister() {// get 方式實現異步var mobile = document.getElementById("mobile").value;xmlHttp = new XMLHttpRequest();// 打開連接xmlHttp.open("get","jsServlet?mobile=" + mobile, true);// xmlHttp.setRequestHeader("", ""); get不用設置頭信息// get發送null post 發送key = valuexmlHttp.send(null);xmlHttp.onreadystatechange = rollBack;}function rollBack() {// 服務器響應是否有此號碼 true/falsevar result = xmlHttp.responseText;// status = 200 是服務器正常響應 readyState = 4是xmlhttp將響應信息全部讀取完畢if (xmlHttp.status = 200 && xmlHttp.readyState == 4) {alert(result);if (result == "true") alert("注冊失敗，號碼存在");else alert("注冊成功。");}} </script>

post方式

電話號碼：<input type="text" id = "mobile"/> <br/><button onclick = "postRegister()">注冊</button><script type="text/javascript">function postRegister() { var mobile = document.getElementById("mobile").value; xmlHttp = new XMLHttpRequest();// 打開服務器連接xmlHttp.open("post", "jsServlet", true);// 設置頭信息，有兩種，是否上傳文件的區別xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");// xmlHttp.setRequestHeader("Content-Type", "multipart/form-data");// 發送數據 key = value 的方式xmlHttp.send("mobile=" + mobile);// 回調函數，執行完這段js后，在調用的函數xmlHttp.onreadystatechange = rollBack;}function rollBack() {var result = xmlHttp.responseText;if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {alert(result);if (result == "true")alert("注冊失敗，號碼已經存在！");elsealert("注冊成功。");}}</script>

總結

以上是生活随笔為你收集整理的JS实现Ajax异步刷新的全部內容，希望文章能夠幫你解決所遇到的問題。

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