1.login.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>登录</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="login.js"></script>
</head>
<body>
用户名：<input type="text" id="username"/><br />
<input type="button" value="校验" onclick="check()"/>
<div id="result" style="color:red"></div>
</body>
</html>
2.login.js
/* 传统的Ajax */
function check(){
//获取请求参数
var username=document.getElementById("username").value;
//创建XmlHttpRequest对象
var xmlHttp=createXmlHttpRequest();
//注册回调函数
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200 || xmlHttp.status==304){
//获取服务器传回来的数据(文本数据)
var data=xmlHttp.responseText;
//显示服务器传回来的数据
document.getElementById('result').innerHTML=data;
}
}
}
/* get方式 */
//设置连接信息
//xmlHttp.open('get','servlet/LoginServlet?username='+username+'&timeStamp='+new Date().getTime(),true);
//发送数据
//xmlHttp.send(null);
/* post方式 */
//设置连接信息
//给地址加上时间戳为了不读取缓存
xmlHttp.open('post','servlet/LoginServlet?timeStamp='+new Date().getTime(),true);
//POST需要设置请求头信息
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送数据
xmlHttp.send('username='+username);
}
//XMLHttpRequest对象初始化
function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}
/**********************************************************************************************************/
/* 使用JQuery */
function check2() {
//获取提交的数据
var username = $("#username").val();
/* get方式 */
/*
$.get("servlet/LoginServlet", {"username":username}, function (data) {
//alert(data); //传回来的数据
$("#result").html(data);
});
*/
/* post方式 */
$.post("servlet/LoginServlet",{"username":username},function (data){
$("#result").html(data);
});
}
3.LoginServlet
package org.monday.web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = -899354411233903986L;
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("请求方式：" + request.getMethod());
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String username = request.getParameter("username");
if (null == username || "".equals(username.trim())) {
out.print("用户名不能为空");
} else {
if ("monday".equals(username.trim())) {
out.print("该用户名已经存在");
} else {
out.print("该用户名可以使用");
}
}
}
}
相关推荐
一个简单的例子可能包括一个按钮和一个用于显示服务器响应的区域： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <button id="ajaxButton">点击我 <div id="result">...
通常，一个简单的Ajax请求由以下几个部分组成： 1. **创建XMLHttpRequest对象**：这是Ajax的核心，它负责与服务器进行通信。 ```javascript var xhr = new XMLHttpRequest(); ``` 2. **设置回调函数**：当服务器...
【Ajax示例】中的知识点主要涉及使用Ajax技术实现动态数据加载和页面局部更新，特别是针对中国省份、城市、城镇联动选择列表框的应用。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况...
Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分...这个示例提供了一个基础的Ajax请求流程，实际应用中，可能需要考虑更多的细节，如错误处理、数据序列化、缓存策略等。
下面是一个简单的jQuery AJAX请求示例，从服务器获取JSON数据并显示在页面上： ```html <!DOCTYPE html> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <button id="loadData">Load ...
AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX ...
**Ajax.Net 简单示例** Ajax（Asynchronous JavaScript and XML）技术是现代Web开发中的重要组成部分，它允许网页部分更新，无需整个页面重新加载，显著提升了用户体验。在ASP.NET框架下，Microsoft提供了Ajax.Net...
此外，"MyAjax"可能是作者编写的一个简单Ajax示例代码，供学习参考。通过深入研究这两个资源，你可以更好地理解和掌握Ajax的基础知识。对于初学者，推荐结合实践项目，多动手操作，以加深理解。
ASP.NET Ajax是Microsoft提供的一个用于构建富客户端Web应用的框架，它集成了JavaScript库（ScriptManager、UpdatePanel等）与服务器端控件，简化了Ajax开发。例如： - **ScriptManager**：管理客户端脚本资源，...
总结来说，"简单的AJAX示例(JSP+servlet)"是一个演示了如何利用AJAX、JSP和Servlet来实现异步用户名验证的应用。它涉及到前端的交互设计、后端的数据处理以及web服务器的配置，是一个典型的前后端分离的开发模式实例...
以下是一个简单的Ajax调用流程： 1. **创建 XMLHttpRequest 对象**：在JavaScript中，我们首先需要创建一个XMLHttpRequest对象，这是Ajax的核心组件。 ```javascript var xhr = new XMLHttpRequest(); ``` 2. **...
HTML部分包含一个简单的用户注册表单，用户名输入框触发Ajax验证。当用户离开输入框，`checkUserName`函数被调用，它会检查用户名是否可用。验证结果会显示在`<span id="userSpan">`中。 6. **兼容性处理**： ...
MyEclipse 中 Ajax简单示例
**简单Ajax示例：** ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'data.json', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data ...
上述示例展示了如何使用jQuery发起Ajax请求并处理服务器响应，对于初学者来说是一个很好的起点。随着技术的发展，虽然Ajax的原始形式可能逐渐被Fetch API等新技术所取代，但其核心理念——异步通信——仍然是现代Web...
一个简单的示例可能是使用Spring MVC或Servlet来处理AJAX请求，返回JSON格式的数据，如： ```java @GetMapping("/get_data") public ResponseEntity<String> getData(@RequestParam int page, @RequestParam int ...
在这个无刷示例中，可能包含一个简单的HTML页面，一个JavaScript文件用于实现AJAX逻辑，以及一个返回数据的服务器接口。用户触发一个事件（如点击按钮），JavaScript通过XMLHttpRequest发送请求到服务器，服务器返回...
这个“ajax示例java版本”应该是一个Java实现的Ajax应用，用于演示如何在后台处理和前端交互。 在Java中实现Ajax通常涉及到以下关键知识点： 1. **JavaScript库**：虽然Ajax的核心是JavaScript，但实际开发中我们...
在压缩包文件"ajaxBasicJavaScript"中，可能包含了一些基础的Ajax示例代码，这些代码可能涵盖了上述步骤的实现，用于展示如何使用JavaScript进行Ajax请求。通过学习和分析这些示例，你可以更好地理解Ajax的工作原理...
以下是一个简单的Ajax GET请求示例： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'AjaxHelloWorld.json', true); xhr.setRequestHeader('Content-type', 'application/json'); xhr....