ajax+jsp入门例子

最新推荐文章于 2023-12-01 14:18:38 发布

xixian87

最新推荐文章于 2023-12-01 14:18:38 发布

阅读量145

点赞数

分类专栏： ajax 文章标签： JSP Ajax 浏览器 JavaScript Firefox ViewUI

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

看看以下例子你会发现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>

xixian87

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax+jsp入门例子

看看以下例子你会发现ajax真的好简单首先准备两个jsp页面1.index.jsp 代码如下（可直接copy，测试过是通过的）[code="java"]var httpRequest;//下面这个函数可以返回一个适合任何浏览器的httpRequest，步子如下：//1.试着创建一个XMLHttpRequest()示例，该示例可适合于除...
复制链接

扫一扫

专栏目录