前言：在上篇中，我们使用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

浏览器显示如图：

0069tu18zy7a156bmMOd2&690

(2)在文本框中输入用户名，显示为：

0069tu18zy7a15gVAMg18&690
0069tu18zy7a15kLrJkce&690