Day01Ajax异步请求编码思路（get请求,验证用户名是否重复）

最新推荐文章于 2022-03-01 09:49:40 发布

ZZZ___bj

最新推荐文章于 2022-03-01 09:49:40 发布

阅读量635

点赞数

分类专栏： javaweb ajax 文章标签： javaweb ajax

本文链接：https://blog.csdn.net/ZZZ___bj/article/details/76383177

版权

javaweb 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

ajax

6 篇文章 0 订阅

订阅专栏

1.AJAX引言

Ansynchronized JavaScript And XML (异步 javacript 和 xml)
异步请求

2.异步请求与同步请求

同步请求（地址栏超级链接表单 location href）
问题：用户的交互体验差
现象：同步请求响应给client是一张新的页面
同步请求必须等待server的响应，才可以进行后续操作，否则操作无异议（因为会重新加载页面，填写的数据会丢失）
异步请求（XMLHttpRequest）
好处：用户的交互体验好
现象：异步请求响应给client不是一张新的页面，而是页面的一个局部（字符串）
异步请求无需等待server的响应，可以直接进行后续操作（操作不会丢失）

3.异步请求的编码思路

异步请求对象 XMLHttpRequest是一个javascript对象，存在浏览器差异，简称xhr
a）创建xhr对象(根据浏览器不同，创建的xhr对象不同)
Webkit： var xhr = new XMLHttpRequest();
IE: var xhr = new ActiveXObject("Microsoft.XMLHTTP");
一般写法：

//判断是哪种浏览器，如果是Webkit，则返回true
var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

b）xhr对象发送请求并传递参数
xhr.open(“method”,”url”); 作用：发送请求
eg:xhr.open("get","/ajax/checkAjaxServlet");
xhr.send() 作用：往服务器端传递参数，括号内可写null
c）xhr处理响应

//响应监听
xhr.onreadystatechange=function(){
    if(xhr.readyState == 4  && xhr.status == 200){//代表响应回来了且正常响应，要进行处理
        处理代码
    }
}

xhr.readyState
0—4
readyState == 0 说明 xhr 对象未创建
readyState == 1 说明 xhr发送请求
readyState == 2 说明说明服务器端得响应到达client
readyState == 3 说明服务器端得响应开始解析
readyState == 4 说明响应完毕
xhr.status
200 正常
404 路径问题
500 服务器端程序错误

4.注册中验证用户名是否重复

编码思路

编码思路
代码
reg.jsp

//首先需要引入jquery-1.8.3.js插件,放在WebContent下面

<%@ 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">
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
            //当name丢失焦点时调用此函数
            $("#name").blur(function(){

                //1.获得文本框中的内容
                var name = $(this).val();

                //2.发送ajax异步请求
                var xhr;
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else{
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }

                xhr.open("get","CheckName?name="+name);
                xhr.send(null);

                //xhr处理相应
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4 && xhr.status == 200){
                        /* alert(xhr.responseText); */
                        $("#msg").text(xhr.responseText);
                        }       
                    });
                });
            });
</script>

<title>注册</title>
</head>
<body>
    <table>
        <tr>
            <td>UserName</td>
            <td><input type="text" name="name" id="name"/><span id="msg"></span></td>
        </tr>
        <tr>
            <td>UserPassword</td>
            <td><input type="text" name="password" id="password"/><span id="msg"></span></td>
        </tr>
        <tr>
            <td>UserEmail</td>
            <td><input type="text" name="email" id="email"/><span id="msg"></span></td>
        </tr>
        <tr>
            <td><input type="button" value="注册"/></td>
        </tr>
    </table>
</body>
</html>

Day1CheckNameServlet.java

package com.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;


public class Day1CheckNameServlet extends HttpServlet{

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //收集数据
                String name = request.getParameter("name");
                //zbj名字判断
                System.out.println(name);
                PrintWriter out = response.getWriter();
                if("zbj".equals(name)){
                    //输出流输出正确提示语句
                    out.println("your name was already used");
                }else{
                    //输出流输出错误提示语句
                    out.println("your name is ok");
                }

                out.flush();

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }

}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
    id="WebApp_ID" version="3.0">
    <display-name>AJAX</display-name>

    <servlet>
        <servlet-name>CheckName</servlet-name>
        <servlet-class>com.ajax.Day1CheckNameServlet</servlet-class>
    </servlet>  

    <servlet-mapping>
        <servlet-name>CheckName</servlet-name>
        <url-pattern>/CheckName</url-pattern>
    </servlet-mapping>


</web-app>

ZZZ___bj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day01Ajax异步请求编码思路（get请求,验证用户名是否重复）

1.AJAX引言Ansynchronized JavaScript And XML (异步 javacript 和 xml) 异步请求 2.异步请求与同步请求同步请求（地址栏超级链接表单 location href）问题：用户的交互体验差现象：同步请求响应给client是一张新的页面同步请求必须等待server的响应，才可以进行后续操作，否则操作无异
复制链接

扫一扫

专栏目录