js原生ajax请求代码示例
2017-12-30 14:04
555 查看
一、前端html页面编写
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="/ajax/ajax.js"></script> <title>ajax的测试</title> </head> <body> <form action="/register" method="post" id="registerForm"> 用户名: <input type="text" id="username" name="username" /> <span id="usernameTip" style="color: red"></span> <br /> 密 码: <input type="password" id="password" name="password"> <span id="passwordTip" style="color: red"></span> <br /> <input id="submit" type="button" value="朕要注册"> </form> </body> </html>
二、原生ajax的js写法
var xmlHttp; window.onload = function() { // 监听用户名失去焦点事件 var usernameEle = document.getElementById("username"); usernameEle.onblur = function() { if (usernameEle.value.length == 0) { document.getElementById("usernameTip").innerHTML = "亲,你的用户名不能为空!"; return; } else { sendXmlHttp(this.value); } } // 监听密码失去焦点事件 var passwordEle = document.getElementById("password"); passwordEle.onblur = function() { if (passwordEle.value.length == 0) { document.getElementById("passwordTip").innerHTML = "亲,你的密码不能为空!"; return; } else { document.getElementById("passwordTip").innerHTML = ""; } } // 监听提交按钮操作 var submitBtn = document.getElementById("submit"); submitBtn.onclick = function() { if (usernameEle.value && passwordEle.value) { xmlHttp = GetXmlHttpObject(); var url = "/register"; url = url + "?username=" + usernameEle.value + "&password=" + passwordEle.value; url = url + "&sid=" + Math.random(); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { alert(xmlHttp.responseText); } }; xmlHttp.open("post", url, true); xmlHttp.send(null); } else { alert("请把信息填完整"); } } } // 发送ajac请求 function sendXmlHttp(username) { xmlHttp = GetXmlHttpObject(); var url = "/register"; url = url + "?username=" + username; url = url + "&sid=" + Math.random(); xmlHttp.onreadystatechange = stateChanged; xmlHttp.open("post", url, true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { document.getElementById("usernameTip").innerHTML = xmlHttp.responseText; } } // 获取ajax请求 function GetXmlHttpObject() { var xmlHttp = null; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } if (xmlHttp == null) { alert("您的浏览器不支持AJAX!"); return; } return xmlHttp; }
三、Servlet后台模拟注册功能。
@WebServlet("/register") public class register extends HttpServlet { private static final long serialVersionUID = 1L; @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String[] names = { "小明", "小红" }; req.setCharacterEncoding("utf-8"); resp.setContentType("text/html; charset=UTF-8"); String username = req.getParameter("username"); PrintWriter writer = resp.getWriter(); String password = req.getParameter("password"); for (String name : names) { if (name.equals(username)) { System.out.println(username); writer.print("亲,用户名已经存在!"); return; } } if (StringUtil.hasLength(username) && StringUtil.hasLength(password)) { writer.print("注册成功"); } } }
相关文章推荐
- 原生 JS Ajax,GET和POST 请求实例代码
- 原生 JS Ajax,GET和POST 请求实例代码
- 原生js的ajax请求兼容写法
- JS 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
- Ajax中通过JS代码自动获取表单元素值的示例代码
- 原生JS写Ajax的请求函数
- 原生JavaScript实现ajax异步请求代码
- 原生JS发送ajax请求
- 原生JS封装AJAX请求
- 原生js实现Ajax请求
- Ajax请求内嵌套Ajax请求示例代码
- Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
- js基本ajax写法示例代码
- 原生js封装ajax,实现跨域请求
- 原生JS简单实现ajax的方法示例
- Ajax请求内嵌套Ajax请求示例代码
- 使用$.getJSON实现跨域ajax请求示例代码
- 使用$.getJSON实现跨域ajax请求示例代码
- 使用$.getJSON实现跨域ajax请求示例代码