用JS實(shí)現(xiàn)post和get兩種方式異步刷新

1，Ajax是個(gè)啥玩意？

Ajax 即"Asynchronous JavaScript And XML", 指一種創(chuàng)建交互式，快速動(dòng)態(tài)網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，無(wú)需加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)。

2，異步刷新？是個(gè)啥玩意？

用js里面的XMLHttpRequest對(duì)象來(lái)和servlet交互，來(lái)實(shí)現(xiàn)數(shù)據(jù)的交換，這里只講js的實(shí)現(xiàn)方式。

3，為什么要有異步刷新

提交表單內(nèi)容到j(luò)sp頁(yè)面，再jsp轉(zhuǎn)發(fā)重定向，這樣會(huì)把整個(gè)頁(yè)面都給查一遍，是整個(gè)頁(yè)面哦。所以不讓整個(gè)頁(yè)面刷新，就用了ajax，讓頁(yè)面局部刷新。

4，用一個(gè)使用電話號(hào)碼注冊(cè)的小demo來(lái)解釋
后臺(tái)servlet

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

get方式

前臺(tái)頁(yè)面

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

post方式

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

總結(jié)

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

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