XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。
Jquery实现ajax比原生ajax要简单方便，减少冗余代码。不需要记住太多的属性，类型。操作简单。
ajax常用的属性有：URL （请求路径） Type(请求方式) data（请求需要的数据）
页面代码:
<%--
Created by IntelliJ IDEA.
User: 秀清风
Date: 2018/12/28
Time: 12:18
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<title>Title</title>
</head>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" >
$(function () {
$("[name=uname]").blur(function () {
$.ajax({
url:"${pageContext.request.contextPath}/ajaxServlet",//目标路径
type:"post",//请求格式
data:"uname="+$("[name=uname]").val(),//请求的数据
dataType:"text",//请求数据的类型
success:function(data){
uname=$("[name=uname]").val();
if (data=="true"){
$("#msg").html("用户名已被注册");
$("#msg").css(‘color‘,‘red‘);
} else if(data=="false"&&uname!=""){
$("#msg").html("用户名可以使用");
$("#msg").css(‘color‘,‘green‘);
}else {
$("#msg").html("用户名不可为空");
$("#msg").css(‘color‘,‘red‘);
}
}
});
});
});
</script>
<body>
<form method="post" >
用户名：<input type="text" id="uname" name="uname" ><span id="msg"></span><br>
密码： <input type="text" id="upwd" name="upwd">
</form>
</body>
</html>
servlet代码：
package cn.happy.Servlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String action=request.getParameter("uname");//获取到用户输入框
System.out.println(action);
if (action.equals("admin")){//输入框的值为admin,显示用户名已被注册
response.getWriter().write("true");//使用响应的写入功能
}else{
response.getWriter().write("false");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
效果：
原文地址：https://www.cnblogs.com/java-263/p/10191552.html
时间： 2024-08-30 11:45:39