使用Ajax方式发送请求

最新推荐文章于 2023-06-22 15:36:11 发布

you4580

最新推荐文章于 2023-06-22 15:36:11 发布

阅读量312

点赞数

文章标签： ajax servlet javascript

本文链接：https://blog.csdn.net/you4580/article/details/129701747

版权

文章介绍了AJAX技术用于创建异步请求的核心步骤，包括创建XMLHttpRequest对象、设置回调函数、开启请求及发送数据。通过示例展示了如何在JavaScript中验证用户名的可用性，利用AJAX向后台Servlet发送请求并处理响应，从而实现在不刷新页面的情况下更新局部内容。

摘要由CSDN通过智能技术生成

AJAX技术可以帮助开发人员管理浏览器中异步请求对象
1.开发步骤：

在浏览器内存中，创建一个脚本对象，这个脚本对象就是异步请求对象
为异步请求对象添加工作状态监听器，帮助开发人员确认何时从异步请求对象身上得到服务端返回响应数据
初始化异步请求对象
通知异步请求对象采用何种方式发送请求协议包
通知异步请求对象本次要访问的资源文件地址
通知异步请求对象在工作期间，浏览器是否要等他[同步请求，异步请求]
命令通知异步请求对象代替浏览器发送请求
2.AJAX命令：

如何创建一个异步请求对象
var xmlHttp = new XMLHttpRequest();
如何为异步请求对象绑定工作监听状态
xmlHttp.onreadystatechange=function(){}
如何初始化异步请求对象
xmlHttp.open("post/get","/myweb/oneServlet?uname=smith",true);
如何命令异步请求对象代替浏览器发送请求
xmlHttp.send()
3.异步请求对象工作状态：
readyState属性：存储当前的工作状态

4.如何从异步响应对象身上得到响应数据，进行局部刷新：

xmlHttp.onreadystatechange=function(){
	if(xmlHttp.readyState==4 && xmlHttp.status==200){
		var s = xmlHttp.responseText();
	}
}

Ajax编程四步：

创建Ajax核心对象
注册回调函数
开启通道
发送请求

index.jsp文件：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  <script type="text/javascript">
    function checkUsername(username) {
      //发送Ajax请求，验证用户名是否可用
      var xhr = new XMLHttpRequest();
      //回调函数
      xhr.onreadystatechange=function () {
        if(xhr.readyState==4){
          if(xhr.status==200){
            var nameTigMag = document.getElementById("nameTipMsg");
            nameTigMag.innerHTML=xhr.responseText;
          }else{
            alert(xhr.status);
          }
        }
      }
      //建立浏览器和服务器之间的通道
      xhr.open("GET","/03/checkusername.do?username="+username,true);
      //发送请求
      xhr.send();
    }
  </script>
  用户名：<input type="text" name="username" onblur="checkUsername(this.value);"><span id="nameTipMsg"></span><br>
  密码：<input type="password" name="password">
  </body>
</html>

web.xml文件：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>checkusername</servlet-name>
        <servlet-class>com.hh.CheckUserNameServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>checkusername</servlet-name>
        <url-pattern>/checkusername.do</url-pattern>
    </servlet-mapping>
</web-app>

CheckUserNameServlet.java文件

package com.hh;

import java.io.IOException;
import java.io.PrintWriter;

public class CheckUserNameServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter writer = response.getWriter();
        String username = request.getParameter("username");
        if("admin".equals(username)){
            writer.print("用户名不可用");
        }else{
            writer.print("用户名可以使用");
        }
    }
    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        this.doPost(request, response);
    }
}

you4580

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Ajax方式发送请求

为异步请求对象添加工作状态监听器，帮助开发人员确认何时从异步请求对象身上得到服务端返回响应数据。通知异步请求对象在工作期间，浏览器是否要等他[同步请求，异步请求]在浏览器内存中，创建一个脚本对象，这个脚本对象就是异步请求对象。通知异步请求对象采用何种方式发送请求协议包。通知异步请求对象本次要访问的资源文件地址。命令通知异步请求对象代替浏览器发送请求。如何命令异步请求对象代替浏览器发送请求。如何为异步请求对象绑定工作监听状态。如何创建一个异步请求对象。如何初始化异步请求对象。创建Ajax核心对象。
复制链接

扫一扫