Ajax介绍
全称：Asynchronous JavaScript And XML（异步 JavaScript 及 XML）
Ajax的作用：实现异步请求的技术。
什么是同步请求？
当用户点击一个a标签之后，浏览器，发送请求，服务器给出响应。（用户的操作和浏览器服务器动作，都是一致的。）
什么是异步（不同步）请求?
当用户在注册的时候，用户输入完用户名，之后，继续输入注册的其他信息，与此同时，浏览器发送了请求（包含用户名），服务器获取请求之后，查询数据，给出响应（重复，可用，服务器忙） （用户的操作，和浏览器服务器请求和响应，没关系）
Ajax原始使用方式
1.获取XMLHttpRequest对象（ajax核心对象，引擎对象）
2.向服务器发送请求使用open方法和send方法
3.设置onreadystatechange事件执行函数（等待服务器响应）
4.接收服务器响应
以验证用户名是否重复为例：
前端页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@taglib prefix="c" ?uri="http://java.sun.com/jsp/jstl/core"%><c:set var="root" value="${pageContext.request.contextPath}"/><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> ?<head> ???????<title>My JSP ‘index.jsp‘ starting page</title> ???<meta http-equiv="pragma" content="no-cache"> ???<meta http-equiv="cache-control" content="no-cache"> ???<meta http-equiv="expires" content="0"> ???????<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> ???<meta http-equiv="description" content="This is my page"> ???<script type="text/javascript"> ???????function getXHR(){ ???????????var xmlhttp; ???????????if (window.XMLHttpRequest){ ???????????????// code for IE7+, Firefox, Chrome, Opera, Safari ???????????????xmlhttp=new XMLHttpRequest(); ???????????}else{ ???????????????// code for IE6, IE5 ???????????????xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); ???????????} ???????????return xmlhttp; ???????} ???????function _checkName(value){ ???????????var xhr = getXHR(); ???????????xhr.open("post","${root}/checkUsername",true); ???????????xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); ???????????xhr.send("username="+value); ???????????xhr.onreadystatechange = function(){ ???????????????//请求已经完成，而且响应已经就绪 ???????????????if (xhr.readyState == 4 && xhr.status == 200){ ???????????????????//获取响应的数据 ???????????????????var data = xhr.responseText; ???????????????????alert(data); ???????????????????var _msg=document.getElementById("msg"); ???????????????????var _form=document.getElementById("form"); ???????????????????if(data==1){ ???????????????????????_msg.innerHTML="用户名已存在"; ???????????????????????form.onsubmit = function(){ ???????????????????????????return false; ???????????????????????}; ???????????????????}else if(data==2){ ???????????????????????_msg.innerHTML="用户名非法"; ???????????????????????form.onsubmit = function(){ ???????????????????????????return false; ???????????????????????}; ???????????????????}else{ ???????????????????????form.onsubmit = function(){ ???????????????????????????return true; ???????????????????????}; ???????????????????} ???????????????} ???????????}; ???????} ???</script> ?</head> ???<body> ???<form action="${root}/checkUsername" id="form" > ???<input type="text" name="username" id="username" onblur="_checkName(this.value)"/>请输入用户名 ???<span id="msg"></span> ???<input type="submit" value="注册"/> ???</form> ?</body></html>后台处理
package com.learn.ajax;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * Servlet implementation class ReceiveAjaxServlet */public class CheckNameServlet extends HttpServlet { ???private static final long serialVersionUID = 1L; ???????????protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ???????String username = request.getParameter("username"); ???????System.out.println(username); ???????response.setContentType("text/html;charset=utf-8"); ???????if("zhangsan".equals(username)){ ???????????response.getWriter().write("3"); ???????????System.out.println(1111); ???????}else if("xuweiwen".equals(username)){ ???????????response.getWriter().write("1"); ???????}else{ ???????????response.getWriter().write("2"); ???????} ???????????} ???????protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ???????doGet(request, response); ???}}效果：
鼠标失焦后即发起用户校验
Ajax
原文地址：https://www.cnblogs.com/xuww-blog/p/9655157.html