简易的ajax,史上最简单AJAX例子 - - ITeye技术网站

AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 国内通常的读音为“阿贾克斯”。

下面是一个最简单的AJAX验证用户名是否存在的例子。

JSP页面

//下面这个不理解没关系,反正就是为了不同的浏览器创建不同的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";

}

}

}

}

AjaxTest

用户姓名:

web.xml配置

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/j2eehttp://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

index.jsp

user

chenlh.UserAction

user

/user.do

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");

}

}

结果(当输入用户名后,鼠标移出输入框)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值