[JQuery]原生态Javascript与JQuery调用Ajax之比较
做动态网页时经常要局部更新数据或画面布局，这个时候要用到Ajax，不然通过跳转的方式更换页面，代码量会急剧上升，用户体验也差，因为刷新页面的时候页面会闪一下。
Ajax的工作原理是浏览器内部生成一个XmlHttpRequest对象，我们向这个对象发Get请求或者Post请求，然后XmlHttpRequest对象跟服务器侧的Servlet通信，根据Servlet的返回信息，回调我们所写的Javascript函数，更新页面数据或画面布局。
原理放一边，我们还是通过代码来看看，实际项目中是怎么使用Ajax的。
设想一个用户登陆的场景，用户输入用户ID和密码，点击“Login”按钮，登陆成功的话切换到欢迎页面，登陆失败的话弹出失败提示对话框。
验证用户是否合法的过程就是通过Ajax发请求给Servlet，Servlet进行逻辑判断后返回结果给Ajax，Ajax再根据结果作出不同响应。
（友情提示：为方便大家阅读和理解，以下代码做了最大限度的精简，实际应用中大家要加上各种检查，防止出错。）
■原生态Javascript调用Ajax
1.首先要有一个login.jsp文件。
![[JQuery]原生态Javascript与JQuery调用Ajax之比较_第1张图片](http://img.e-com-net.com/image/info8/2fe0be1a2a2847b2a03ff91711e64ab0.jpg)
login.jsp的代码如下：
<html>
<script>
var XMLHttpReq=false;
function doAjax(){
XMLHttpReq = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
var userId = document.getElementsByTagName("input")[0].value;
var password = document.getElementsByTagName("input")[1].value;
XMLHttpReq.open("GET","/TestAjax/Login?userid="+userId+"&password="+password,true);
XMLHttpReq.onreadystatechange=ajaxLoginResponse;
XMLHttpReq.send();
}
function ajaxLoginResponse(){
if(XMLHttpReq.readyState==4){
if(XMLHttpReq.status==200){
var res=XMLHttpReq.responseText;
if(res == "success"){
document.body.innerText = "Welcome to our site!";
}else{
alert("Login failed!");
}
}else{
alert("Page exception!");
}
}
}
script>
<body>
UserId:<input name="userid" type="text" />
Password:<input name="password" type="text" />
<input type="button" value="Login" onclick="doAjax()">
form>
body>
html>2.生成LoginServlet.java进行逻辑处理。
package test.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
String userId = request.getParameter("userid");
String password = request.getParameter("password");
System.out.println(userId);
if ("Sunny".equals(userId) && "123456".equals(password)) {
out.write("success");
} else {
out.write("failed");
}
}
}3.web.xml配置。让系统知道页面请求对应的Servlet是哪个。
<web-app>
<servlet>
<servlet-name>LoginServletservlet-name>
<servlet-class>test.servlet.LoginServletservlet-class>
servlet>
<servlet-mapping>
<servlet-name>LoginServletservlet-name>
<url-pattern>/Loginurl-pattern>
servlet-mapping>
web-app>↓执行结果
[登陆成功]
![[JQuery]原生态Javascript与JQuery调用Ajax之比较_第2张图片](http://img.e-com-net.com/image/info8/9fc98d8292c14cffab67f5bea3b34ee8.jpg)
[登陆失败]
![[JQuery]原生态Javascript与JQuery调用Ajax之比较_第3张图片](http://img.e-com-net.com/image/info8/b1289e96f80a491bb1b67ffd34626190.jpg)
■JQuery调用Ajax
也是需要login.jsp、LoginServlet.java和web.xml三个文件，不过后两个文件不用改动，只需要改动login.jsp文件就可以了。
对比一下两个Login.jsp文件，可以看出JQuery调用Ajax的代码是有多简洁。
<html>
<script language=JavaScript src="js/jquery.min.js" type=text/javascript>script>
<script>
function doAjax(){
$.ajax({
type:"GET",
url:"/TestAjax/Login?userid="+$("input:eq(0)").val()+"&password="+$("input:eq(1)").val(),
success:function(data){
if(data == "success"){
document.body.innerText = "Welcome to our site!";
}else{
alert("Login failed!");
}
}
});
}
script>
<body>
UserId:<input name="userid" type="text" />
Password:<input name="password" type="text" />
<input type="button" value="Login" onclick="doAjax()">
form>
body>
html>结论：程序员天生是爱偷懒的，为了以后少写点代码，我们花多点时间学习JQuery语法显然是非常值得的。