前言：在上篇中，我们使用ajax技术，以get方式发起请求，达到了网页端局部刷新的效果。这次，我们使用post方式来实现局部刷新。


在上篇的基础上，.jsp/web.xml/servlet三个部分都要改动或新写



步骤核心(就是修改index.jsp文件)：

第一步：在js中创建XMLHttpRequest对象

第二步：获取用户在id="username"的input元素中输入的信息

第三步：通过XMLHttpRequest对象发起post请求
要点
(1)ajax发起post请求，需要先设置好请求头(就得按下面那样写)
 xhr.setRequestHeader(
 "content-type","application/x-www-form-urlencoded");

(2)向XMLHttpRequest对象中放入请求

(3)发送请求时，xhr.send方法的参数不再是null了，需要传入我们在第二步中获取到的用户名。代码为：

xhr.send("name="+name);


注意：send方法中，写入的参数的形式必须是："参数名="+参数值



第四步：

(1)设置触发请求的事件(本例中的是onblur，光标离开事件)


(2)设置服务器返回响应的内容在浏览器的哪个位置局部刷新出来



第五步：创建回调函数，检测readyState属性的值


第六步：当readyState值为4且status值为200时，服务器返回相应完毕，从响应中获取返回的内容，显示到浏览器上指定的位置


一、index.jsp文件

<%@ page language="java"  pageEncoding="utf-8"%>
<html>
  <head>  
  </head>

 ......(上篇的代码部分)

 <script type="text/javascript">
 //检查用户名是否可用
 function checkname(){
 
 //这次发起请求时，还要将用户输出的用户名也发给服务器
 //获取请求参数
  var name = document.getElementById("username").value;
 
 //获取XMLHttpRequest对象
 var xhr = new XMLHttpRequest();
  
 //将post请求放到XMLHttpRequest对象中
 xhr.open("post","/ajax01/check.do")
 //ajax发起post请求，需要先设置好请求头(就得按下面那样写)
 xhr.setRequestHeader(
 "content-type","application/x-www-form-urlencoded");
 
 //注册回调函数
 xhr.onreadystatechange = function(){
 
 //1、readyState状态码为4表示服务器返回响应完毕
 //2、XMLHttpRequest对象的status属性：
 //(1)该属性值可为：404/500/200/...
 //(2)当xhr.status==200时，表示请求处理成功
 //如果请求处理完毕
 if(xhr.readyState == 4 && xhr.status == 200 ){
 
 //获取响应的内容信息
 var msg = xhr.responseText;
 
 //将该信息追加到指定的网页位置
  document.getElementById("username_msg").innerHtml = msg;
 }
 };
 
 //发送请求(必须是("参数名="+参数值)的形式)
 xhr.send("name="+name);
 
 //发起请求后，显示正在检测
 document.getElementById("username_msg").innerHtml = "正在检测...";
 };
 
 </script>
  <body>

 ......(上篇的代码部分)

 <hr/>
    <table>

      <tr>
        <td>新闻标题</td>
        <td>时间</td>
      </tr>

      <tr>
        <td>×××和英九在新加坡相会</td>
        <td>2015-11-11</td>
      </tr>

      <tr>
        <td>经济指数有所改观</td>
        <td>2015-11-10</td>
      </tr>

      <tr>
        <td>大宗商品价格下跌</td>
        <td>2015-11-10</td>
      </tr>

    </table>
    <hr/>

<!-- onblur属性：鼠标失去焦点事件(就是鼠标的光标离开了文本框) -->
<input type="text" id="username" οnblur="checkname()">
 
//服务器返回的信息在这里局部刷新出来
<span id="username_msg"></span>
  </body>
  
</html>
二、创建一个servlet,用于检查浏览器端发来的用户名是否可用
package org.tarena.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 CheckServlet 
 extends HttpServlet{
 
 public void service(
 HttpServletRequest request,
 HttpServletResponse response)
 throws ServletException, IOException{
 System.out.println(1);
 //模拟实际请情况，延迟3s后返回结果(延迟时显示请求正在处理)
 try {
 Thread.sleep(3000);
 } catch (InterruptedException e) {
 e.printStackTrace();
 }
 System.out.println(2);
 //设置返回的文件类型和编码集
 response.setContentType("text/plain;charset=utf-8");
 
 //获取一条输出流，用于向浏览器端显示信息
 PrintWriter out = response.getWriter();
 System.out.println(3);
 //对于请求带过来的数据，用utf-8来解码
 request.setCharacterEncoding("utf-8");
 System.out.println(4);
 //获取请求中name参数的值
 String name = request.getParameter("name");
 System.out.println(5);
 //检测name值是否可用
 if("scott".equals(name)){
 out.println("用户名已被占用");
 }else{
 out.println("用户名可用");
 }
 System.out.println(6);
 out.flush();
 out.close();
 }
 
}

三、在web.xml文件中为CheckServlet这个servlet设置接收的请求，我们设置该servlet接收的请求是"/check.do"(代码就不赘述了)

操作：

(1)发起请求，进入index.jsp页面

请求为：http://localhost:8080/ajax01/index.jsp