ajax用法笔记

08220170928

1、代码如下：参考w3school编写

2、难点：服务器返回数据到前台的方式：response.getWriter().write("<font color=\"#FF0000\">此身份证号已存在!</font>");

3、在输入框中加入这个：onkeyup="showHint(this.value)，其中showHint()时js中的函数

4、在前台写一个span作为占位符：<span id="txtHint"></span>

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
身份证号 

 
添加取消
package com.tiger.controller;import java.io.*;import javax.servlet.*;import javax.servlet.annotation.*;import javax.servlet.http.*;import com.tiger.bean.*;import com.tiger.service.*;import com.tiger.service.impl.*;/** * 接受ajax提交url的服务器 * @author tiger * @time 2017年9月28日 */@WebServlet(name="CardController",urlPatterns= {"/emp_card"})public class CardController extends HttpServlet {private static final long serialVersionUID = 1L;EmployeeService empService = new EmployeeServiceImpl();public CardController2() {  }protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");String uri=request.getRequestURI();String action=uri.substring(uri.lastIndexOf("/")+1, uri.length());if("emp_card".equals(action)){Employee emp= card(request);if (emp !=null) {response.getWriter().write("此身份证号已存在!");}}}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}private Employee card(HttpServletRequest request){//获取前台输入的信息String card = request.getParameter("card_code");return empService.findEmployeeByCard(card);}}function showHint(str){  if (str.length === 0)    {     document.getElementById("txtHint").innerHTML="";    return;    }  xmlHttp=GetXmlHttpObject()    if (xmlHttp === null)    {    alert ("您的浏览器不支持AJAX！");    return;    }var url="emp_card";url=url+"?card_code="+str;url=url+"&sid="+Math.random();xmlHttp.onreadystatechange=stateChanged;xmlHttp.open("GET",url,true);xmlHttp.send(null);}function GetXmlHttpObject(){  var xmlHttp=null;  try    {    // Firefox, Opera 8.0+, Safari    xmlHttp=new XMLHttpRequest();    }  catch (e)    {    // Internet Explorer    try      {      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");      }    catch (e)      {      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");      }    }  return xmlHttp;}function stateChanged() {   if (xmlHttp.readyState==4)  {   document.getElementById("txtHint").innerHTML=xmlHttp.responseText;  }}