编写一个简单的 AJAX 程序(原生方式)我们简单的模拟一个表单校验的程序
- index.html
<input type="text" id="username">
<input type="button" onclick="ajaxFunction()" value="向后台判断用户名是否存在"></br>
<div id="msgError">校验显示区域</div>
- JavaScript 代码
<script language="javascript" type="text/javascript">
function ajaxFunction() {
var ajaxRequest;
try {
// 兼容 IE7+, Firefox, Chrome, Opera, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// 兼容 Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
return false;
}
}
}
//准备请求
ajaxRequest.open("POST", "loginServlet", true);
//由于是POST提交方式,所以添加 HTTP 头
ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//获取到表单中输入的值
var name_input = document.getElementById("username").value;
//发送请求
ajaxRequest.send("username=" + name_input);
ajaxRequest.onreadystatechange = function () {
//判断readyState就绪状态是否为4,判断status响应状态码是否为200
if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
//获取服务器的响应结果
var responseText = ajaxRequest.responseText;
var div = document.getElementById("msgError");
div.innerText = responseText;
}
}
}
</script>
- loginServlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
//此语句仅为方便判断是否后端正常收到了前端的数据,可选择删除
System.out.println("接收到的数据:" + username);
try {
if (username.equals("admin")) {
Thread.sleep(5000);
response.getWriter().print("该用户名已经存在");
} else {
Thread.sleep(5000);
response.getWriter().print("该用户名可以注册");
}
} catch (InterruptedException e) {
e.printStackTrace();
}
}
我们这样就在无需重新加载整个网页的情况下 就可以实现与客户端与服务器的异步通讯,我们为了演示,同时在后台主动设置 延时5秒响应的情况下,但我们用户仍然可以在此期间进行操作,具体情况,可以自行简单模拟试验
JQuery 实现方式
使用原生的 JavaScript 实现 AJAX 确实比较麻烦,而 使用 Jquery 也可以帮助我们实现这样一种需求,而且也会让我们的代码更加简洁,直观
<script language="javascript" type="text/javascript">
function ajaxFunction() {
var name_input = document.getElementById("username").value;
$.ajax({
url: "loginServlet",
type: "POST",
data: {"username": name_input},
success: function (data) {
var div = document.getElementById("msgError");
div.innerText = data;
},
error: function () {
alert("发生错误");
}
});
}
</script>
url:请求路径
type:请求方式
date:请求参数,想对应于原生JS实现的,data: “username=admin&age=20”
success:响应成功后的回调函数
error:果请求响应出现错误,会执行的回调函数
dateType:设置接受到的响应数据的格式
当然它的参数和设置选项不止这些,在这里只选择了一些相对简单或者说必须的,详情可以参考 JQuery API 文档
举个例子:
<script language="javascript" type="text/javascript">
function ajaxFunction() {
var name_input = document.getElementById("username").value;
$.ajax({
url: "loginServlet",
type: "POST",
data: {"username": name_input},
success: function (data) {
var div = document.getElementById("msgError");
div.innerText = data;
},
error: function () {
alert("发生错误");
}
});
}
</script>
经过测试结果是一样的:
JQuery确实极大的简化了我们的代码,但是如果你只是想快速的实现这一种需求,JQuery 其实还提供了两个更为简单的方式,以取代复杂 $.ajax
总结:
AJAX 的的基本知识,以及使用 JavaScript 和 JQuery 这两种实现方式,我们就已经介绍完了,到现在为止,如何发起并且接收响应已经不在话下了,并且我们对 AJAX 有了一定的认识,但是 AJAX 的一些应用场景,以及AJAX 如何搭配 常见的 如 JSON 等数据格式,实现前后端的交互,并没有提到,我们就放到后面说,将全部的内容挤到一起,无论是从篇幅或者说内容的针对性都是不够强的,不过AJAX 也确实是我们成长路上不可不学的一门技术。