前端部分———原生Ajax和JQuery中Ajax分步解析

Ajax请求和相应图示

• 创建XHR对象（XMLHttpRequest)

XML对象是一个javascript对象，可以在用户没有感觉的情况下，像背后运行的一根小线程一样，悄悄和服务器进行数据交互，AJAX就是通过它做到无刷新效果的。

    var xmlhttp = new XMLHttpRequest();
    document.write(xmlhttp);

• 设置响应函数

XHR对象作用是和服务器进行交互，所以即会发消息给服务器也会接受服务器返回的响应。通过

xml.onreadystatechange = checkResult

就可以指定用checkResult函数进行处理。

• 设置并发出请求

通过open函数设置背后的这个小线程，将要访问的页面url通过send函数进行实际的访问。

xmlhttp.open("GET",url,true);
xmlhttp.send(null);

处理响应信息null表示没有参数，因为参数已经通过get方式放在url中了，只有在用post并且需要发送数据的时候才会用到send这种形式：

xmlhttp.send("user="+username+"&password="+password)

• 处理响应信息

在checkResult函数中处理响应

function checkResult(){
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
        document.getElementById('checkResult').innerHTML = xmlhttp.responseText;
}

xmlhttp.readyState 4 表示请求已完成，响应已就绪(0：请求未初始化；1：服务器连接已建立；2：请求已接收；3：请求处理中）
xmlhttp.status 200 表示响应成功（404：未找到页面）
xmlhttp.responseText; 用于获取服务端传回来的文本
document.getElementById('checkResult').innerHTML 设置span的内容为服务端传递回来的文本

---

完整示例

<span>输入账号:</span>
<input type = "text" name = "name" id ="name" onkeyup = "check()">
<span id = "checkResult"></span>

<script>
   var xmlhttp;
    function check(){
        var name = document.getElementById("name").value;
        var url = "checkName.jsp?name="+name;
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = checkResult;
        xmlhttp.open("GET",url,true);
        xmlhttp.send(null);
    }
    function checkResult(){
        if(xmlhttp.readyState == 4 && xmlhttp.status==200)
            document.getElementById('checkResult').innerHTML = xmlhttp.responseText;
    }
</script>

checkName.jsp

<%@ page language="java" contentType = "text/html; charset = utf-8"
    pageEncoding="utf-8" isELIgnored="false"%>

<%
    String name = request.getParameter("name");
    if("abc".equals(name))
        out.print("<font color = 'red'>已经存在</font>");
    else
        out.print("<font color = 'green'>可以使用</font>");

%>

---

JQuery中也有对ajax的支持，使得其对ajax的操作简化了很多。

• 提交Ajax请求

与之前的例子达到相同的效果。$.ajax参数比较复杂，常用的调用方式如下：

$.ajax({
    url:page,
    data:{"name":value},
    success:function(result){
        $("#checkResult").html(result);
    }
});

第一个参数url表示访问的是page页面，第二个参数data表示提交的参数，第三个参数表示服务器成功返回后对应的响应函数。 

<script src="jquery.min.js"></script>
 
<div id="checkResult"></div>
  
输入账号 :<input id="name" type="text">
  
<script>
$(function(){
   $("#name").keyup(function(){
     var page = "checkName.jsp";
     var value = $(this).val();
        $.ajax({
            url: page,
            data:{"name":value},
            success: function(result){
              $("#checkResult").html(result);
            }
        });
   });
});
 
</script>

• 使用get方式提交ajax

$.get是$.ajax的简化版，专门用于发送get请求

$.get(
    page,
    {"name":value},
    function(result){
        $("#checkResult").html(result);
    }
);

三个参数含义同上，其中只有第一个参数是必须的，其他参数都是可选的。

<script src="jquery.min.js"></script>
 
<div id="checkResult"></div>
  
输入账号 :<input id="name" type="text">
  
<script>
$(function(){
   $("#name").keyup(function(){
     var page = "checkName.jsp";
     var value = $(this).val();
 
        $.get(
            page,
            {"name":value},
            function(result){
              $("#checkResult").html(result);
            }
        );
   });
});
 
</script>

• 使用post方式提交ajax

$.post是$.ajax的简化版，专门用于发送post请求

$.post(
    page,
    {"name":value},
    function(result){
        $("#checkResult").html(result);
    }    
);

参数同上。

<script src="jquery.min.js"></script>
  
<div id="checkResult"></div>
   
输入账号 :<input id="name" type="text">
   
<script>
$(function(){
   $("#name").keyup(function(){
     var page = "checkName.jsp";
     var value = $(this).val();
  
        $.post(
            page,
            {"name":value},
            function(result){
              $("#checkResult").html(result);
            }
        );
   });
});
  
</script>

• 最简单的调用ajax的方式

load比起$.get,$.post就更简单了，$("#id").load(page,[data]);

id用于显示ajax服务端文本的元素id,page:服务端页面；data提交的数据，可选。

<script src="jquery.min.js"></script>
   
<div id="checkResult"></div>
    
输入账号 :<input id="name" type="text">
    
<script>
$(function(){
   $("#name").keyup(function(){
     var value = $(this).val();
     var page = "checkName.jsp?name="+value;
     $("#checkResult").load(page);
   });
});
   
</script>

• 格式化form下的输入数据

serialize():格式化form下的输入数据，有的时候form下输入的内容比较多，一个一个取比较麻烦，就可以使用serialize()把输入数据格式化成字符串。

<script src=jquery.min.js"></script>
    
<div id="checkResult"></div>
<div id="data"></div>
<a href="checkName.jsp">checkName.jsp</a>
 
<form id="form">   
输入账号 :<input id="name" type="text" name="name"> <br>
输入年龄 :<input id="age" type="text" name="age"> <br>
输入手机号码 :<input id="mobile" type="text" name="mobile"> <br>
     
</form>
 
<script>
$(function(){
   $("input").keyup(function(){
      var data = $("#form").serialize();
      var url =checkName.jsp";
      var link = url+"?"+ data;
      $("a").html(link);
      $("a").attr("href",link);
   });
});
    
</script>