AJAX Servlet實現(xiàn)數(shù)據(jù)異步交互的方法

更新時間：2017年07月06日 14:25:02 作者：Loger丶

本篇文章主要介紹了AJAX Servlet實現(xiàn)數(shù)據(jù)異步交互的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在慕課網(wǎng)上看了AJAX的一些教程，自己參考著實現(xiàn)一下！

首先，導(dǎo)入json所需要的6個包

下載鏈接：JSONObjectjar_jb51.rar

總的目錄：

前端頁面：

首先是一個輸入框：

<input type="text" id="keyword" name="keyword" onkeyup="getContents()">

onkeyup表示按下鍵盤時的操作

javascript：

<script type="text/javascript">
  
  //全局xmlHttp對象
  var xmlHttp;

  //獲得xmlHttp對象
  function createXMLHttp() {
    //對于大多數(shù)瀏覽器適用
    var xmlHttp;
    if (window.XMLHttpRequest) {
      xmlHttp = new XMLHttpRequest();
    }
    //考慮瀏覽器的兼容性
    if (window.ActiveXObject) {
      xmlHttp = new ActiveXOject("Microsoft.XMLHTTP");
      if (!xmlHttp) {
        xmlHttp = new ActiveXOject("Msxml2.XMLHTTP");
      }
    }
    return xmlHttp;
  }
  
  //回調(diào)函數(shù)
  function callback() {
    //4代表完成
    if(xmlHttp.readyState == 4){
      //200代表服務(wù)器響應(yīng)成功，404代表資源未找到，500服務(wù)器內(nèi)部錯誤
      if(xmlHttp.status == 200){
        //交互成功獲得響應(yīng)的數(shù)據(jù)，是文本格式
        var result = xmlHttp.responseText;
        //解析獲得的數(shù)據(jù)
        var json = eval("("+ result +")");
        //獲得數(shù)據(jù)之后，就可以動態(tài)的顯示數(shù)據(jù)了，把數(shù)據(jù)顯示到輸入框下面
        alert(json);
      }
    }
  }
  
  //獲得輸入框的內(nèi)容
  function getContents(){
    //首先獲得用戶的輸入內(nèi)容，這里獲得的是一個結(jié)點
    var content = document.getElementById("keyword");
    if(content.value ==""){
      return;
    }
    
    //向服務(wù)器發(fā)送內(nèi)容，用到XmlHttp對象
    xmlHttp = createXMLHttp();
    //給服務(wù)器發(fā)送數(shù)據(jù)，escape()不加中文會有問題
    var url = "search?keyword=" + escape(content.value);
    //true表示js的腳本會在send()方法之后繼續(xù)執(zhí)行而不會等待來自服務(wù)器的響應(yīng)
    xmlHttp.open("GET",url,true);
    //xmlHttp綁定回調(diào)方法，這個方法會在xmlHttp狀態(tài)改變的時候調(diào)用,xmlHttp狀態(tài)有0-4，
    //我們只關(guān)心4，4表示完成
    xmlHttp.onreadystatechange=callback;
    xmlHttp.send(null);
  }
</script>

總的index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
  
  //全局xmlHttp對象
  var xmlHttp;

  //獲得xmlHttp對象
  function createXMLHttp() {
    //對于大多數(shù)瀏覽器適用
    var xmlHttp;
    if (window.XMLHttpRequest) {
      xmlHttp = new XMLHttpRequest();
    }
    //考慮瀏覽器的兼容性
    if (window.ActiveXObject) {
      xmlHttp = new ActiveXOject("Microsoft.XMLHTTP");
      if (!xmlHttp) {
        xmlHttp = new ActiveXOject("Msxml2.XMLHTTP");
      }
    }
    return xmlHttp;
  }
  
  //回調(diào)函數(shù)
  function callback() {
    //4代表完成
    if(xmlHttp.readyState == 4){
      //200代表服務(wù)器響應(yīng)成功，404代表資源未找到，500服務(wù)器內(nèi)部錯誤
      if(xmlHttp.status == 200){
        //交互成功獲得響應(yīng)的數(shù)據(jù)，是文本格式
        var result = xmlHttp.responseText;
        //解析獲得的數(shù)據(jù)
        var json = eval("("+ result +")");
        //獲得數(shù)據(jù)之后，就可以動態(tài)的顯示數(shù)據(jù)了，把數(shù)據(jù)顯示到輸入框下面
        alert(json);
      }
    }
  }
  
  //獲得輸入框的內(nèi)容
  function getContents(){
    //首先獲得用戶的輸入內(nèi)容，這里獲得的是一個結(jié)點
    var content = document.getElementById("keyword");
    if(content.value ==""){
      return;
    }
    
    //向服務(wù)器發(fā)送內(nèi)容，用到XmlHttp對象
    xmlHttp = createXMLHttp();
    //給服務(wù)器發(fā)送數(shù)據(jù)，escape()不加中文會有問題
    var url = "search?keyword=" + escape(content.value);
    //true表示js的腳本會在send()方法之后繼續(xù)執(zhí)行而不會等待來自服務(wù)器的響應(yīng)
    xmlHttp.open("GET",url,true);
    //xmlHttp綁定回調(diào)方法，這個方法會在xmlHttp狀態(tài)改變的時候調(diào)用,xmlHttp狀態(tài)有0-4，
    //我們只關(guān)心4，4表示完成
    xmlHttp.onreadystatechange=callback;
    xmlHttp.send(null);
  }
</script>
</head>
<body>
  <input type="text" id="keyword" name="keyword" onkeyup="getContents()">
</body>
</html>

后端：

AjaxServlet.java

package com.loger.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

/**
 * Servlet implementation class AjaxServlet
 */
@WebServlet("/search")
public class AjaxServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;
  
  static List<String> list = new ArrayList<>();
  static{
    list.add("chenle");
    list.add("陳樂");
  }
    
  /**
   * @see HttpServlet#HttpServlet()
   */
  public AjaxServlet() {
    super();
    // TODO Auto-generated constructor stub
  }

  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //設(shè)置編碼
    request.setCharacterEncoding("utf-8");
    response.setCharacterEncoding("utf-8");
    
    //首先獲得客戶端發(fā)送來的數(shù)據(jù)
    String keyword = request.getParameter("keyword");
    System.out.println(keyword);
    
    
    
    //返回json數(shù)據(jù)
    response.getWriter().write(JSONArray.fromObject(list).toString());
  }

  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
  }

}

運行結(jié)果：