JS实现Ajax异步刷新

用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异步刷新的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。