1、Ajax简介
AJAX即“AsynchronousJavascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
2、异步交互和同步交互
同步：
1)发出一个请求、就要等待服务器的响应结束、然后才能发出第二个请求！
2)刷新是整个页面刷新！
异步：
1)发出一个请求之后、无需等待服务器的响应、然后就可以发出第二个请求！
2)可以使用js接收服务器的响应、然后使用js来局部刷新！
3、Ajax优缺点
优点：
lAJAX使用Javascript技术向服务器发送异步请求；
lAJAX无须刷新整个页面；
l 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；
缺点：
lAJAX并不适合所有场景，很多时候还是要使用同步交互；
lAJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
l因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；
4、ajax发送异步请求（四步操作）
1. 第一步（得到XMLHttpRequest）
1)ajax其实只需要学习一个对象：XMLHttpRequest
2)如果掌握了它，就掌握了ajax！！！
3)得到XMLHttpRequest
1)大多数浏览器都支持：var xmlHttp = new XMLHttpRequest();
2)IE6.0：var xmlHttp = newActiveXObject("Msxml2.XMLHTTP");
3)IE5.以更早版本的IE：var xmlHttp = newActiveXObject("Microsoft.XMLHTTP");
2. 第二步（打开与服务器的连接）
* xmlHttp.open()：用来打开与服务器的连接，它需要三个参数：
> 请求方式：可以是GET或POST
> 请求的URL：指定服务器端资源，例如；/day23_1/AServlet
> 请求是否为异步：如果为true表示发送异步请求，否则同步请求！
* xmlHttp.open("GET","/day23_1/AServlet", true);
3. 第三步（发送请求）
* xmlHttp.send(null)：如果不给可能会造成部份浏览器无法发送！
> 参数：就是请求体内容！如果是GET请求，必须给出null。
4. 第四步（回调函数）
* 在xmlHttp对象的一个事件上注册监听器：onreadystatechange
* xmlHttp对象一共有5个状态：
> 0状态：刚创建，还没有调用open()方法;
> 1状态：请求开始：调用了open()方法，但还没有调用send()方法
> 2状态：调用完了send()方法了；
> 3状态：服务器已经开始响应，但不表示响应结束了！
> 4状态：服务器响应结束！（通常我们只关心这个状态！！！）
* 得到xmlHttp对象的状态：
> var state = xmlHttp.readyState;//可能是0、1、2、3、4
* 得到服务器响应的状态码
> var status = xmlHttp.status;//例如为200、404、500
* 得到服务器响应的内容1
> var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
> var content = xmlHttp.responseXML;//得到服务器的响应的xml响应的内容，它是Document对象了！
例子：注册表单之校验用户是否注册！
Servlet类：
package com.ajax.data;
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;
/**
* Servlet implementation class AjaxServlet
*/
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
/*
* 1. 获取参数username
* 2. 判断是否为itcast
* 5. 如果为空：响应2
* 3. 如果是：响应1
* 4. 如果不是：响应0
*/
String username = request.getParameter("username");
if(username.equalsIgnoreCase("chen")) {
response.getWriter().print("1");
}else if(username.equalsIgnoreCase("")) {
response.getWriter().print("2");
}else {
response.getWriter().print("0");
}
}
}
显示页面与处理：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>演示用户名是否被注册</title>
<script type="text/javascript" src="ajax_createXMLHttpRequest/createXMLHttpRequest.js"></script>
<script type="text/javascript">
window.onload = function() {
// 获取文本框，给它的失去焦点事件注册监听
var userEle = document.getElementById("usernameEle");
userEle.onblur = function() {
//1.得到异步对象
var xmlHttp = createXMLHttpRequest();
//2.打开连接
xmlHttp.open("POST", "<c:url value='/AjaxServlet'/>", true);
//3.设置请求头：Content-Type
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.发送请求，给出请求体
xmlHttp.send("username=" + userEle.value);
//5.给xmlHttp的onreadystatechange事件注册监听
xmlHttp.onreadystatechange = function() {
//双重判断
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//获取服务器的响应，判断是否为1
// 是：获取span，添加内容：“用户名已被注册”
var text = xmlHttp.responseText;
var span = document.getElementById("errorSpan");
if(text == "1"){
span.innerHTML = "很抱歉！用户名已被注册！";
}else if(text == "2") {
//得到span元素
span.innerHTML = "请输入用户名！";
}else if(text == "0"){
span.innerHTML = "恭喜您！该用户名可以注册哦！";
}else {
span.innerHTML = "";
}
}
};
};
};
</script>
</head>
<body>
<h1>演示用户名是否被注册</h1>
<form action="" method="post">
用户名：<input type="text" name="username" id="usernameEle"/><span id="errorSpan"></span><br/>
密 码：<input type="password" name="password"/><br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>
分享到：
相关推荐
在Web开发中，Ajax被广泛应用于实现页面的异步交互，提高用户体验，例如实时验证用户输入，如本例中的“检测用户名是否存在”。下面我们将深入探讨如何使用Ajax来实现这一功能，并结合Eclipse开发环境进行详细讲解。...
"基于ASP的Ajax 无刷新检测用户名是否占用"这一标题指的是一个使用Active Server Pages (ASP)技术和Asynchronous JavaScript and XML (Ajax)技术实现的功能，该功能允许在用户输入用户名时，无需刷新整个网页即可...
在这个例子中，我们将使用 Ajax 实现客户端验证，检查用户名是否已经存在于数据库中。如果用户名已经存在，系统将返回一个提示信息，提示用户该用户名已经被占用。如果用户名不存在，系统将返回一个提示信息，提示...
这个Ajax小例子通过实际的代码演示了如何结合JavaScript和服务器端脚本实现异步交互，提高Web应用的响应速度和用户体验。它展示了Ajax的核心特性——局部更新页面，以及如何处理异步数据交换，这些都是现代Web开发中...
Ajax登录是一种常见的网页交互技术，它允许用户在不刷新整个页面的情况下与服务器进行异步通信。这个"Ajax登录例程（内存判定账号密码）"是一个简单的实现，它演示了如何在客户端通过Ajax发送请求到服务器端，然后由...
- Ajax可以用于动态地校验用户输入的用户名是否有效。 - 例如，可以在用户输入用户名后，通过Ajax请求发送到服务器端进行校验，并返回校验结果。 6.Ajax请求乱码处理 - 在使用Ajax发送和接收数据时，经常遇到...
接收到POST请求后，获取用户名和密码，使用SHA1算法进行哈希加密，然后查询数据库（在这个例子中是MySQL数据库）来检查是否存在匹配的记录。如果不存在，返回"1"表示用户名或密码错误；否则，表示登录成功。 ```...
总结来说，"简单的AJAX示例(JSP+servlet)"是一个演示了如何利用AJAX、JSP和Servlet来实现异步用户名验证的应用。它涉及到前端的交互设计、后端的数据处理以及web服务器的配置，是一个典型的前后端分离的开发模式实例...
这个"Ajax无刷新例子下载"是一个示例项目，它演示了如何使用Ajax实现用户登录功能，使得用户在输入用户名和密码后，无需等待页面整体刷新就能验证其登录信息。这种技术极大地提升了用户体验，因为页面的其他部分可以...
这个小例子是关于如何利用Ajax实现一个带有表单验证和遮罩等待效果的交互式用户体验。下面我们将深入探讨其中涉及的技术和知识点。 首先，`ajax.php`和`login.php`是处理后台请求的PHP脚本。`ajax.php`通常用于接收...
这个示例演示了基本的前端验证流程，它提高了用户体验，因为用户在提交表单前就能立即看到用户名是否可用，而无需等待完整的页面刷新。然而，为了增强安全性，通常还需要在服务器端进行用户名验证，防止恶意用户绕过...
在这个例子中，jQuery将用于监听表单的提交事件，然后使用$.ajax方法发起异步请求。$.ajax方法接收多个参数，包括URL、数据类型、请求类型等，以定义如何与服务器通信。 PHP是一种服务器端脚本语言，用于处理后端...
当用户离开输入用户名的文本框（通过`onblur`事件触发`checkUserName`函数）时，Ajax请求被发起。请求的URL包含了要传递的参数（用户名），方法是POST。`xhr.open`用于配置请求，`xhr.send(null)`发送请求。 3. **...
在这个例子中，服务器端检查传入的用户名是否存在于一个预设的数组中，如果存在则返回1，否则返回0。 ### 知识点七：客户端如何处理响应 在客户端JavaScript代码中，处理从服务器返回的响应是通过XMLHttpRequest...
这是给学生演示Ajax的一个例子。 后台是Servlet，数据库是MSSQLServer2005，数据量是从AdventureWorks中拷贝过来的。 虽然是演示，但是并不是HelloWorld那种不实用的例子，而是包含两个经典的应用：用户名检测和...
这个示例项目可能演示了如何使用Maven、SpringMVC和Hibernate来创建一个基础的用户注册和登录功能。首先，开发者会定义User实体类，该类包含用户名、密码等属性，并使用Hibernate注解进行ORM配置。接着，创建一个...
这是一个基于PHP、MySQL、jQuery UI和Ajax技术构建的后台管理系统登录演示项目。在这个项目中，开发者使用了常见的Web开发技术来实现一个具有用户管理、部门管理和公告管理功能的后台系统。接下来，我们将深入探讨...
为了更好地理解和应用Mootools中的Ajax功能，下面给出一个简单的实例演示如何使用Ajax获取远程数据并更新DOM元素。 ```javascript // HTML结构 <div id="result"></div> // JavaScript var myRequest = new ...
总结来说，这个例子展示了如何使用jQuery的load()方法和post()方式实现Ajax无刷新验证用户。通过这种方式，可以实现高效、流畅的用户体验，同时减少服务器与客户端之间的通信开销。在实际开发中，还需要考虑错误处理...
在这个名为"Ext2.0一些小例子"的压缩包中，可能包含了若干个演示Ext2.0功能和用法的示例代码。 首先，让我们来看看Ext2.0的核心特性： 1. **组件化**：Ext2.0提供了大量的UI组件，如表格（Grid）、面板（Panel）、...