使用JavaScript编写原生态的Ajax

介绍

Ajax的底层是如何实现，这里只研究了post和get的实现方式。这里的代码比较简单，主要是编写JavaScript模仿Ajax异步实现请求数据，加深对Ajax的理解，有需要的会注释上。欢迎一起交流。:-)

内容

jsp表单

<form action="" method="post" onsubmit="return checkDB()">
name:<input id="name" name="name" type="text">
<br/>
password:<input id="pass" name="pass" type="text">
<br/>
<br/>
<input type="submit" onclick="check()" value="submit">
<br/>
<p style="visibility: hidden" id="putError">用户名或密码错误</p>
<br/>
</form>

解释函数的作用：check()检查用户名或密码是否为空（即是否未输入数据），checkDB()通过JavaScript原生态Ajax和后端进行校验，用户名和密码是否正确。

JavaScript实现

<script type="text/javascript">
var Ajax={
get:function (url,fun) {
var obj = new XMLHttpRequest();
obj.open('GET', url, true);
obj.onreadystatechange = function () {
if(obj.status==200 && obj.readyState==4) {
fun.call(this, obj.responseText)
}
};
obj.send(null);
},
post : function (url,data,fun) {
var obj = new XMLHttpRequest();
obj.open('POST', url, true);
obj.onreadystatechange = function() {
if(obj.status==200 || obj.readyState==4) {
fun.call(this, obj.responseText)
}
};
obj.send(data);
}
};
</script>
<script type="text/javascript">
function check() {
var name = document.getElementById("name").value;
var pass = document.getElementById("pass").value;
alert(name);
if(name == ""|| name==null || pass==null || pass == ""){
alert("用户名或密码没有输入！");
return false;
}
}

function checkDB(){
var name = document.getElementById("name").value;
var pass = document.getElementById("pass").value;
var data = {"name": name, "pass": pass};
Ajax.post('demo',data,putError);
}
function putError(data) {
if(data=="error"){
document.getElementById("putError").style.visibility = "visible";
return false;
}
}
</script>

请求的demo会被MyServlet类拦截。这里var  Ajax定义为一个数组，这个数组是一个键值对，键是get post 而值是一个函数，这个函数先一步，对数据进行校验。

Servlet实现

public class MyServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
User user = new User("xiaoming", "666");
String name = request.getParameter("name");
String pass = request.getParameter("pass");
if (user.getName().equals(name) && user.getPass().equals(pass)){
response.getWriter().write("succ");
}
else{
response.getWriter().write("error");
}
}
}

上面的Servlet没有使用到doGet，所以没有贴出来。