Ajax的作用、快速了解及应用

1.实例：

比如在用户名校验过程中，checkName.jsp，abc存在，def不存在

checkName.jsp?name=abc

checkName.jsp?name=def

未使用Ajax，需要刷新、提交才能看到效果

<form action="https://how2j.cn/study/checkName.jsp">

输入账号 <input name="name" type="text" value="abc"> 

<input type="submit" value="验证账号是否存在">

</form>

使用Ajax，直接可以看到效果

<span>输入账号 :</span>
<input id="name" name="name" onkeyup="check()" type="text"> 
<span id="checkResult"></span>
 
<script>
var xmlhttp;
function check(){
  var name = document.getElementById("name").value;
  var url = "https://how2j.cn/study/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>

2.Ajax请求过程

cli——server
1.创建XMLHttpRequest
2.设置响应函数
3.设置访问界面
4.执行访问

server——cli
1.调用响应函数
2.判断响应是否成功
3.获取响应文本
4.显示文本

3.实现过程

1.创建XMLHttpRequest

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

<script>
var xmlhttp =new XMLHttpRequest();
document.write(xmlhttp);
</script>

效果如下：

[object XMLHttpRequest]

2.设置响应函数
XHR对象的作用是和服务器进行交互，所以既会发消息给服务器，也能接受服务器返回的响应。
当服务器响应回来的时候，调用怎么处理呢？
通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。

3.设置并发出请求
通过open函数设置背后的这个小线程，将要访问的页面url ，在本例中就是/study/checkName.jsp

xmlhttp.open(“GET”,url,true);

通过send函数进行实际的访问

xmlhttp.send(null);

null表示没有参数，因为参数已经通过“GET" 方式，放在url里了。
只有在用"POST"，并且需要发送参数的时候，才会使用到send。
类似这样：
xmlhttp.send(“user=”+username+“&password=”+password)

4.处理响应信息
在checkResult 函数中处理响应

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

xmlhttp.readyState 4 表示请求已完成 xmlhttp.status 200 表示响应成功
xmlhttp.responseText; 用于获取服务端传回来的文本
document.getElementById(‘checkResult’).innerHTML 设置span的内容为服务端传递回来的文本

5.完整的代码

1. 创建XHR对象
2. 设置响应函数
3. 设置要访问的页面
4. 发出请求
5. 当服务端的响应返回，响应函数被调用。
6. 在响应函数中，判断响应是否成功，如果成功获取服务端返回的文本，并显示在span中。

<span>输入账号 :</span>
<input id="name" name="name" onkeyup="check()" type="text"> 
<span id="checkResult"></span>
  
<script>
var xmlhttp;
function check(){
  var name = document.getElementById("name").value;
  var url = "https://how2j.cn/study/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>");
     
%>