Ajax底层

最新推荐文章于 2022-06-25 14:56:06 发布

平安相守就好

最新推荐文章于 2022-06-25 14:56:06 发布

阅读量85

点赞数 1

分类专栏： ajax

本文链接：https://blog.csdn.net/weixin_43358395/article/details/99718962

版权

ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

reg.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
function sendName(){
   //1.获取用户名
    var $username = $('#userName').val();

    //2.创建ajax对象
    var xhr;

    //判断ActiveXObject是IE浏览器的话，就创建IE对象
    if(window.ActiveXObject){

        xhr = new ActiveXObject("Microsoft.XMLHTTP");

    }else{
        //不是IE就用XMLHttpRequest
        xhr = new XMLHttpRequest();

    }

    //3.发送请求
    //xhr.open("GET","/web_day10/AjaxRegServlet2?name="+$username);

    xhr.open("POST","/web_day10/AjaxRegServlet2");
    //post提交，模拟表单
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

    //传递数据 send主要用于post ，get不需要传
    //get 给null xhr.send(null);
    xhr.send("name="+$username);

    //4.监听响应
    xhr.onreadystatechange = function(){
        //判断readyState是4 status响应码 200是不报错
        if(xhr.readyState==4&&xhr.status==200){

            //xhr.responseText 拿到响应内容，内容是服务器端给的

            $('#sp').text(xhr.responseText);
        }
    }

}

</script>
</head>
<body>

<h1>User Register</h1>
<form action="">
<table>
<tr>
<td>User Name</td>
<td><input type="text" id="userName" name="userName" οnblur="sendName();">
<span id="sp"></span>
</td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pass" id="pass"/></td>
</tr>
<tr>
<td>confirm</td>
<td><input type="text" name="c" id="c"/></td>
</tr>
<tr>
<td>email</td>
<td><input type="text" name="m" id="m"/></td>
</tr>
<tr>
<td>phone</td>
<td><input type="text" name="p" id="p"/></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value=" user register "/>
</td>
</tr>
</table>
</form>
</body>
</html>

AjaxRegServlet2 ：

package com.zr.controller;

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 AjaxRegServlet2 extends HttpServlet {
private static final long serialVersionUID = 1L;

public AjaxRegServlet2() {
super();
}

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   request.setCharacterEncoding("utf-8");
   response.setCharacterEncoding("utf-8");

   System.out.println("sssssssss");

   String name = request.getParameter("name");
   System.out.println(name);

   PrintWriter out = response.getWriter();

   if(name.equals("admin")) {

       out.print("用户名不可用");
   }else {
       out.print(" is ok ");
   }

   out.flush();
   }

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       doGet(request, response);
   }

}
reg.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
function sendName(){
   //获取用户名
   var $userName = $('#userName').val();
   //发送请求
   location.href="${pageContext.request.contextPath}/RegServlet?name="+$userName;
}
</script>

</head>
<body>

<h1>User Register</h1>
<form action="">

<table>
<tr>
<td>UserName</td>
<td><input type="text" id="userName" name="userName" οnblur="sendName()" value="${name }"/>${requestScope.m }</td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" id="pass" name="pass" /></td>
</tr>
<tr>
<td>confirm</td>
<td><input type="text" id="c" name="c" /></td>
</tr>
<tr>
<td>email</td>
<td><input type="text" id="e" name="e" /></td>
</tr>
<tr>
<td>phone</td>
<td><input type="text" id="p" name="p" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value=" user register " />
</td>
</tr>
</table>

</form>

</body>
</html>

regServlet:

package com.zr.controller;

import java.io.IOException;
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 RegServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

public RegServlet() {
super();
}

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   request.setCharacterEncoding("utf-8");

   String name = request.getParameter("name");

   try {
           Thread.currentThread().sleep(6000);
       } catch (InterruptedException e) {
           e.printStackTrace();
       }

   if(name.equals("admin")) {
       request.setAttribute("m", "用户名不可用");
   }else {
       request.setAttribute("m", " is ok");
   }

   request.setAttribute("name", name);
   request.getRequestDispatcher("reg.jsp").forward(request, response);
   }

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       doGet(request, response);
   }

}

平安相守就好

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax底层

reg.html<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.8.2.js">...
复制链接

扫一扫

专栏目录