- chenlh
- 等级: 初级会员
 - 性别:
 - 文章: 17
- 积分: 60
- 来自: 福建
|
此篇也是
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 国内通常的读音为“阿贾克斯”。
下面是一个最简单的AJAX验证用户名是否存在的例子。
JSP页面
<%@ page language="java" pageEncoding="utf-8"%>
<script type="text/javascript" language="javascript">
//下面这个不理解没关系，反正就是为了不同的浏览器创建不同的XMLHttpRequest对象,照抄
function createXmlHttpRequest()
{
var xmlreq = false;
if (window.XMLHttpRequest) {
xmlreq = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try { //创建较新版本的对象
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
}
}
}
return xmlreq;
}
function userNameCheck()
{
var username = document.all.username.value;//获得text的值
var request = createXmlHttpRequest();//创建request 对象
request.open("post","user.do?username="+username);//建立到服务器的新请求
request.send();//向服务器发送请求
request.onreadystatechange=function()//指定当readyState属性改变时的事件处理句柄
{
if (request.readyState==4)//提取当前HTTP的就绪状态,状态4表示：响应已完成，可以访问服务器响应并使用它
if (request.status==200)//HTTP状态,我们期望的状态码是 200，它表示一切顺利。
//如果就绪状态是 4 而且状态码是 200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据
{
var value = request.responseText;//服务器返回响应文本
if (value=="true")
{
document.all.unc.innerHTML="该用户名已存在";
}
else
{
document.all.unc.innerHTML="OK";
}
}
}
}
</script>
<html>
<head>
<title>AjaxTest</title>
</head>
<body>
用户姓名： <input type="text" name="username" onblur="userNameCheck()"/><font color="red" size="-1" id="unc"></font>
</body>
</html>
web.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
http://java.sun.com/xml/ns/j2ee">http://java.sun.com/xml/ns/j2ee"
xmlns:http://www.w3.org/2001/XMLSchema-instance">http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLhttp://java.sun.com/xml/ns/j2ee">http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>user</servlet-name>
<servlet-class>chenlh.UserAction</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>user</servlet-name>
<url-pattern>/user.do</url-pattern>
</servlet-mapping>
</web-app>
servlet
package chenlh;
import java.io.IOException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class UserAction extends HttpServlet{
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
String username=request.getParameter("username");
if(username.equals("chenlh"))
response.getWriter().print("true");
else
response.getWriter().print("false");
}
}
结果(当输入用户名后，鼠标移出输入框)
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
|
| 返回顶楼 |
|
|
- shuaijie506
- 等级: 初级会员
 - 性别:
- 文章: 20
- 积分: 77
- 来自: 郑州
|
这还简单？最简单的是用隐藏IFRAME做数据异步提交和验证！
|
| 返回顶楼 |
|
|
- 若水上善
- 等级: 初级会员
 - 性别:
- 文章: 4
- 积分: 30
- 来自: 上古
|
iframe不是所有的浏览器都支持的。
|
| 返回顶楼 |
|
|
- Emiya_wang
- 等级: 初级会员
- 性别:
- 文章: 17
- 积分: 0
- 来自: 大连
|
这个应该算是简单的了
我也是拿验证用户名开始学习AJAX的
呵呵
|
| 返回顶楼 |
|
|
- iaimstar
- 等级:
 - 性别:
- 文章: 2619
- 积分: 450
- 来自: 北京
|
看楼主表情对人世间还有依恋啊
|
| 返回顶楼 |
|
|
- duben
- 等级: 初级会员
 - 性别:
- 文章: 7
- 积分: 10
- 来自: 武汉
|
我也是这样学过来的，第一例子也是这个。
|
| 返回顶楼 |
|
|
- xici_magic
- 等级: 初级会员
 - 性别:
- 文章: 286
- 积分: 0
- 来自: 北京
|
图片看不到了 我以前学的时候第一个好像和这个也很相似
|
| 返回顶楼 |
|
|
- qinglintan
- 等级: 初级会员
 - 性别:
- 文章: 107
- 积分: 10
- 来自: 湖南
|
有兴趣到我哪看看ajax入门吧
|
| 返回顶楼 |
|
|