什么是AJAX异步提交
传统的web中，用户触发一个事件（比如点击一个按钮），服务器做出回应，返回一个HTML页面给用户。
好比当当（其实现在当当的搜索也已经实现了AJAX异步提交），你在输入一本书的名字，点击搜索按钮后，服务器返回一个该书名的页面给用户
最先实现AJAX异步提交的当属各种搜索引擎，当你在搜索输入框中输入某个关键字，例如JAVA，还没有点击搜索按钮时，搜索引擎已经就返回给你了许多结果，比如JAVA学习，JAVA论坛等等
同样的例子还体现在一些注册页面上，输入某个用户名之后，不用点击该用户名是否被使用按钮（这个按钮根本就不会出现），页面在你输入完成后（我猜是在切换到下一个输入框后），就会提示该用户名能不能被使用
现在有一个AJAX异步提交的例子，用于验证输入的用户名和密码是否正确
<script type="text/javascript">
var request;
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
}
//用以拿到输入框的帐号和密码以及后台Servlet地址
function toLogin(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var url = "servlet/adminLoginServlet?username="+username+"&password="+password;
createRequest();
request.open("post",url,true);
request.onreadystatechange = processResponse;
request.send(null);
}
function MyLogin(){
document.getElementById("login").style.visibility="visible";
}
function processResponse(){
var res=request.responseText;
if (request.readyState == 4) { // 判断对象状态
if (request.status == 200) { // 信息已经成功返回，开始处理信息
//由后台Servlet传过来的信息
if(res=="登陆成功"){
//进入登录成功后的页面
window.location.href="../admin/welcome.jsp";
}else{
//在原登录页面显示登录失败的信息
window.alert(res);
}
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
</script>
<body>
<h2 aling="center">Ajax 异步请求</h2><hr>
账号：<input type="text" name="username" ><br>
密码：<input type="password" name="password" ><br>
<input name="submit" type="submit" class="buttom"
value="登 录" onClick="toLogin();return false;"/>
<input name="exit" type="reset" class="buttom"
value="重 置" />
</body>
后台servlet代码
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 Login extends HttpServlet {
public void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
response.setContentType("text/xml; charset=utf-8");
PrintWriter out = response.getWriter();
if(username==null||password==null){
out.print("账号和密码不能为空！");
return;
}
if(username.equals("ajax")&&password.equals("java")){
out.print("登陆成功！");
return;
} else {
out.print("账号或密码错误！");
return;
}
}
}
这就是一个最基本的AJAX异步提交，可以在此基础上进行修改，实现可以完成自己需求功能的AJAX异步提交
分享到：
相关推荐
### AJAX异步提交表单知识点解析 #### 一、AJAX技术概述 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以...
本文将深入探讨Ajax异步提交的核心概念，并通过两个示例——一个使用纯JavaScript与Servlet交互，另一个利用Prototype JS框架与Action通信——来阐述其实现过程。 首先，让我们理解Ajax的基本原理。Ajax工作流程...
单纯的ajax 异步提交共，直接调用就行了
**Ajax异步提交获取信息详解** 在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。本示例主要讲解如何利用...
本文将深入探讨“GridView DropDowList Ajax异步提交”的实现原理和步骤。 ### 1. GridView控件 GridView是ASP.NET中用于显示数据表格的强大控件，它可以动态地从数据库或其他数据源填充数据，并提供排序、分页、...
Java Web中的Ajax异步提交方式上传文件是一种常见且高效的用户交互技术，它允许用户在不刷新整个页面的情况下发送数据到服务器并接收响应。本项目利用Maven构建，前端使用jQuery库以及jQuery-form插件，后端则采用...
本文将详细介绍一个简单的AJAX异步提交实例，旨在帮助初学者理解AJAX的工作原理及其在实际应用中的基本操作。 首先，AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，与服务器交换...
Ajax存在问题就是在异步情况下无法控制什么时候完成记录显示，本人根据回调方法封装了个类，能够将回调方法用参数方式指定，使ajax调用结束后调用回调方法，吧内容传回。ajaxSubmitToDivCallback（显示内容div，提交...
**Ajax异步提交详解** Ajax（Asynchronous JavaScript and XML）技术是现代Web开发中的关键组成部分，它允许在不刷新整个页面的情况下与服务器进行数据交互，从而提升了用户体验。本篇文章将基于MyEclipse项目原...
本集合提供的jar文件是为了实现AJAX异步提交数据并将其转换为JSON格式，以进行无刷新验证。 首先，理解AJAX的基本工作原理：通过JavaScript创建XMLHttpRequest对象，该对象是浏览器内置的，用于与服务器进行通信。...
本文将详细讲解使用ASP.NET MVC2进行Ajax异步提交的三种方法，并通过源代码实例进行说明。 ### 第一种方式：原始的Ajax调用 原始的Ajax调用通常涉及创建XMLHttpRequest对象，然后手动设置请求头，发送HTTP请求，并...
ajax的异步提交语法格式说明 源代码截图
对于一个典型的AJAX异步提交表单的示例，如登录页面的登录操作，我们可以看到以下步骤： 1. 用户填写表单并点击登录按钮。 2. 使用jQuery库监听登录按钮的点击事件。 3. 当按钮被点击时，阻止默认的表单提交行为，...
这里我们将详细探讨异步提交的核心概念、工作原理以及如何使用Ajax进行表单异步提交。 ### 1. 异步提交简介 异步提交是基于HTTP的异步通信技术，主要通过JavaScript来实现。它使得前端与后端服务器之间的数据交换...
jQuery.form插件正是为了满足这种需求而设计的，它扩展了jQuery库，使表单异步提交变得更加简单、灵活且强大。本文将详细介绍如何使用jQuery.form插件，实现完美的表单异步提交。 首先，我们需要了解jQuery.form...
总的来说，实现Ajax异步提交和用户名验证需要结合前端JavaScript和后端API，通过合理的逻辑设计和交互反馈，可以提供流畅且高效的用户体验。同时，确保兼容不同浏览器，考虑错误处理和安全性也是开发中不可忽视的...
2. **异步提交**：Ajax的优势在于异步性，这意味着页面不会因为等待服务器响应而冻结。当用户输入用户名并点击检查按钮时，JavaScript会启动一个异步请求，同时用户可以继续在页面上进行其他操作。 3. **发送请求**...
本篇将深入探讨Ajax异步提交数据时遇到的返回值换行问题及其解决方法。 在描述的场景中，我们有一个下拉菜单用于选择分类，用户选择后，通过Ajax异步向服务器发送请求，服务器根据所选分类返回相应成员的名称，这些...
这个实例对于学习AJAX异步提交和服务器端数据验证非常有用。它强调了如何通过AJAX实时检查用户输入的有效性和可用性，避免了不必要的页面刷新，提高了用户体验。同时，这也是一种常见的防止重复用户名注册的前端验证...