ajax+jsp入门例子

看看以下例子你会发现ajax真的好简单

首先准备两个jsp页面

1.index.jsp 代码如下(可直接copy,测试过是通过的)

<%@ page language="java" contentType="text/html; charset=utf-8" import="java.util.*"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<title></title>
<script language="javascript" >
var httpRequest;
//下面这个函数可以返回一个适合任何浏览器的httpRequest,步子如下:
//1.试着创建一个XMLHttpRequest()示例,该示例可适合于除了微软以外的所有浏览器
//2.增加错误判断,如果当前浏览器是微软的,那么就创建适用于微软的浏览器
//3.但微软的浏览器又有两个版本之分,不过据说微软已经在7.0中增加对XMLHttpRequest()的支持
//4.但这样也需要对原来的浏览器支持,否则你写出来的程序那些用老版本浏览器的用户就是看不到效果的。
function createRequest()
{
    try{
     httpRequest=new XMLHttpRequest();
    }catch(trymicrosoft)
    {
        try{
         httpRequest=new ActiveXObject("Msxml2.XMLHTTP");
        }catch(othermicrosoft)
        {
            try{
             httpRequest=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(failed)
            {
             httpRequest=false;
            }
        }
    }
    if(!httpRequest)
    {
       alert("err Happend!");
       return null;
    }       
    return httpRequest;
}
//这个函数就是用户的动作所有触发的函数,如下面的onblur()时,就会调用该函数
//经过的步骤如下:
//1.从HTML页面得到你需要的数据,可以采有document.getElementById("")方法。
//2.建立需要的URL,该URL就和在FORM里面的method为get时并采用submit提交在地址栏里面到的一样
//3.打开与服务器的连接,这里面有三个必要的参数,虽然文档规定只有两个,但是我个人觉得最好用三个,
// 第一个可以是GET,POST或者是POST,但常用的就是前面的两个,并且最好都用大写,因为有些浏览器如FireFox可能会报错,
// 第二个就是打报的URL,这肯定你是必须的。
// 第三个就是下面的看到的true,这里可以是false。true表示同步处理,你提交后可以做其它的事情,
// 这就是AJAX里面的A,即asynchronous;如是false,那就得等到服务器的返回才能够做其它的事情。
//4.等到服务器完成,并且确定返回执行了正确执行的提示,我们就可以做下面我们想做的事情。这些后面的事情就必须通过
// Javascript去完成了,因为XMLHttpRequest的唯一用途就是发送请求及接收服务器的响应结果。
//5.上面都完成了后,就可以采用send()方法向服务器发送你需要发送的信息了,它的参数可以是任何类型,发送的数据格式必须为
// 这样的格式:name=value&anothername=othervalue&so=on,如果你想传送数据,你必须更改MIME类型:
// httpRequest.setRequestHeader('Content-type','application/x-www-form-urnlencoded');
// 否则服务器将会丢弃发送的数据。
function getBackInfo()
{
    var username=document.getElementById("username").value;
    var url='server.jsp?username='+username;//服务器页面
    createRequest();
    httpRequest.open("GET",url,"true");
    //下面相当于是一个隐性的循环,在函数中规定只有都接收完毕数据后才做处理
    //onreadystatechange有5个值:
    // 0:未初始化
    // 1:初始化
    // 2:发送数据
    // 3:接收数据中
    // 4:数据接收完毕
    //另外还要注意就是在注册回调函数onreadystatechange时,后面的函数不能够带参数
    //如下disResult是一个函数,不能够带参。
    httpRequest.onreadystatechange=disResult;//隐性的循环
    httpRequest.send(null);
}
function disResult()
{
    //1.一定要确定readystate==4的完成状态才做下面的事,否则会在建立连接即readystate==1的时候就开始,
    // 然后会在readystate==2,readystate==3,readystate==4的时候都会执行,不信你可以alert("")一个
    // 提示信息试试。
    //2.服务器通知完成了,并且还要保证是正确完成的,得到的是我们需要的结果才能够继续,这里常用响应码有:
    // 200:成功执行
    // 401:未授权
    // 403:禁止
    // 404:没有找到文件
    if(httpRequest.readystate==4)
    {
        if(httpRequest.status==200)
        {
            //一切都OK了,那就该用Javascript去执行你想要的动作了。
            document.getElementById("disCheckResult").innerHTML=httpRequest.responseText;
            alert(document.getElementById("disCheckResult").innerHTML);
        }
        else
        {
            alert('Something Wrong has Happend!');
        }
    }
}
</script>
</head>
<body>
<form>
    <table>
        <tr>
            <td>
                <input type=text id="username" onblur="getBackInfo();"/>
            </td>
            <td id="disCheckResult"> 我会改变!
            
            </td>

            <td>
               我不会改变!
            </td>
        </tr>
                <tr>
        </tr>
    </table>
</form>
</body>
</html>




2 服务器处理页面server.jsp(这名字一定要和前面页面设置的服务器页面一样里)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=GBK"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
    <title>checkUser</title>
</head>
<body>
<%
    String username=request.getParameter("username");
    if(username.equals("sehan"))//输入sehan则提示存在
        out.println("用户名已经存在!");//这个信息就是发送到前台去显示的信息,即服务器返回的信息
    else
        out.println("可以继续!");
%>
</body>
</html>

你可能感兴趣的:(JavaScript,jsp,Ajax,浏览器,firefox)