jsp代码：


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <form action="/servlet/getFromServlet" method="post">
        用户名：<input type="text" name="username" id="username" onblur="ckname()"> <span id="msg"></span> <br/>
        密码：<input type="password" name="password" id=""> <br/>
        <input type="submit" value="提交">
    </form>

<script type="text/javascript">
    function ckname() {
        var username = document.getElementById("username").value;
        var msg = document.getElementById("msg");
        if(username==""){
            msg.innerHTML = "用户名不能为空";
            return;
        }
        
        var xhr;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else if(window.ActiveXObject){
            xhr = new XMLHttpRequest("Microsoft.XMLHTTP");
        }

        xhr.onreadystatechange = function () {

            if(xhr.readyState==4){
                if(xhr.status==200){

                
                   if(xhr.response){
                       msg.innerHTML = "用户名可用";
                   }
                }
            }
        }

        //建立连接
        xhr.open("get","${pageContext.request.contextPath}/servlet/getFromServlet?name="+username+"&time="+new Date().getTime());
        //发送请求
        xhr.send(null);
    }
</script>
</body>
</html>

servlet代码：

package com.mypage.servlet;

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 java.io.IOException;
import java.io.PrintWriter;

/**
 * Created by 44693 on 2018/10/15.
 */
@WebServlet(name = "getFromServlet")
public class getFromServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        PrintWriter out = response.getWriter();
        String user = request.getParameter("username");
        if("tom".equals("user")){
            out.print(true);
        }else{
            out.print(false);
        }
    }
}

一、什么是Ajax

Ajax：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML

不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法

Ajax：只刷新局部页面的技术

JavaScript：更新局部的网页
XML：一般用于请求数据和响应数据的封装
XMLHttpRequest对象：发送请求到服务器并获得返回结果
CSS：美化页面样式
异步：发送请求后不等返回结果，由回调函数处理结果

JavaScript中XMLHttpRequest对象是整个Ajax技术的核心，它提供了异步发送请求的能力

构造方法

不同浏览器，甚至相同浏览器的不同版本，获取该对象的方式是不同的。

方法：

open() "get|post" ，"url?name=tom" ，"true|false"

send() 发送请求。可以带参数或 null

setRequestHeader()

属性

readyState：类型short；只读

responseText：类型String；只读

responseXML：类型Document；只读

status：类型short；只读

事件处理器

onreadystatechange

二、常用方法

方法名	说明
open(method,URL,async)	建立与服务器的连接 method参数指定请求的HTTP方法,典型的值是GET或POST URL参数指请求的地址 async参数指定是否使用异步请求，其值为true或false
send(content)	发送请求 content参数指定请求的参数
setRequestHeader(header,value)	设置请求的头信息

三、常用属性

onreadystatechange：指定回调函数
readyState: XMLHttpRequest的状态信息

就绪状态码	说明
0	XMLHttpRequest对象没有完成初始化即：刚刚创建。
1	XMLHttpRequest对象开始发送请求调用了open方法，但还没有调用send方法。请求还没有发出
2	XMLHttpRequest对象的请求发送完成 send方法已经调用，数据已经提交到服务器，但没有任何响应
3	XMLHttpRequest对象开始读取响应，还没有结束收到了所有的响应消息头，但正文还没有完全收到
4	XMLHttpRequest对象读取响应结束一切都收到了

status：HTTP的状态码

状态码	说明
200	服务器响应正常
400	无法找到请求的资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误

responseText：获得响应的文本内容
responseXML：获得响应的XML文档对象 documednt

注：就绪状态是4而且状态码是200，才可以处理服务器数据

使用Ajax验证用户名是否存在实现步骤：

使用文本框的onBlur事件
使用Ajax技术实现异步交互
1. 创建XMLHttpRequest对象
2. 通过 XMLHttpRequest对象设置请求信息
3. 向服务器发送请求
4. 创建回调函数，根据响应状态动态更新页面

js ajax原生写法

一、什么是Ajax

二、常用方法

三、常用属性

猜你喜欢