您的位置:首页 > Web前端 > JavaScript

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("注册成功");
}

}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: