`
xixian
  • 浏览: 211123 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

ajax+jsp入门例子

    博客分类:
  • ajax
阅读更多
看看以下例子你会发现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>
分享到:
评论

相关推荐

    Mysql + jsp +javabean+ jquery +ajax+servlet等的例子综合

    ajax入门例子。还有之前上传的实现从数据库读取数据传到前台,实现单选多选,从控制台读取选中的数据

    Jsp与Ajax从入门到精通的一些例子源码打包

    Jsp与Ajax从入门到精通的一些例子源码打包 Jsp与Ajax从入门到精通的一些例子源码打包

    JSP+Ajax的一些经典实例源代码

    一些运行于JSP+Ajax的经典实例,大部分都是在JSP/HTML文件,附有JAVA源代码文件及数据库文件,内有调试说明,例子很多,适合新手朋友练习。这些实例主要有文件上传、无刷新回帖、电子商务应用、动态加载数据、网页...

    Jsp与Ajax从入门到精通随书实例集.rar

    Jsp与Ajax从入门到精通随书实例集,例子中包括了Ajax上传、ajax留言本,OA系统等,是学习的好资料。

    在jsp中运用ajax(简单入门)

    由于Ajax为我们带来太多的好处,所以在很多应用中我们都会优先选择这种技术,于是我也为之所吸引,现跟大家分享下一个简单的入门例子。

    《ajax入门经典》源代码

    ajax入门经典源代码,一共12章关于ajax和相关php,asp,jsp服务器端代码,全面完整,最后一章通过一个完整的例子说明,很适合学习。

    ajax基础,初学者必看,八个例子,上手快

    程序用Jsp作为客户端,发送异步请求到Servlet,Servlet模拟数据库操作,返回结果,客户端解析,利用JavaScript的dom技术动态创建标签,加以显示。程序内容涵盖ajax基础知识,详细讲解xmlHttpRequest对象,还介绍了...

    dwr简单入门例子

    最近发现了一个java框架,这个框架已经...这个框架叫dwr,它可以在jsp页面编写js直接调用java的类的方法。原理其实就是它把你的java类发布成了接口服务,js的调用也是ajax的一些封装,有些地方使用这个框架真的很方便。

    jsp+javabean+servlet版留言本(J2EE例子)

    mvc版留言本,采用jsp+javabean+servlet编写,即model2版 eclipse项目,可以直接导入,数据库类型mysql,支持分页,ajax验证码.代码内有详细注解,一看就明白,本人一直坚持简单易懂原则,帮助更多的初学者更快的掌握j2ee技术...

    1、熟悉ASP、PHP、JSP网站的搭建。告诉你网站是如何被架构的,进而为后面分析脚本程序漏洞时,测试漏洞所用。

    1、熟悉ASP、PHP、JSP网站的搭建。告诉你网站是如何被架构的,进而为后面分析脚本程序漏洞时,测试漏洞所用。 2、常见的各种脚本攻击技术。全面、细致的介绍脚本...所以介绍了Web 2.0的核心技术XML和Ajax的安全问题。

    用案例学Java Web整合开发 源码

    《用案例学JavaWeb整合开发:Java+Eclipse+Struts2+Ajax》可以作为菜鸟级读者的入门教程。我们从系统环境的安装、配置、创建工程、调试、编译,到系统的发布和部署,一步步、手把手地教你实现。而对于有经验的程序员...

    JAVA上百实例源码以及开源项目

    1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context…… ftp文件传输 2个目标文件,FTP的目标是:(1)提高...

    EXT教程EXT用大量的实例演示Ext实例

    3.6. jsp的例子是一定要有的 3.7. 让你知道树都可以做些什么 3.7.1. 检阅树形的事件 3.7.2. 右键菜单并非单纯的事件 3.7.3. 默认图标好单调,改一下撒 3.7.4. 偷偷告诉你咋从节点弹出对话框 3.7.5. 小小提示 ...

    EXT2.0中文教程

    3.6. jsp的例子是一定要有的 3.7. 让你知道树都可以做些什么 3.7.1. 检阅树形的事件 3.7.2. 右键菜单并非单纯的事件 3.7.3. 默认图标好单调,改一下撒 3.7.4. 偷偷告诉你咋从节点弹出对话框 3.7.5. 小小提示 3.7.6. ...

    Ext 开发指南 学习资料

    3.6. jsp的例子是一定要有的 3.7. 让你知道树都可以做些什么 3.7.1. 检阅树形的事件 3.7.2. 右键菜单并非单纯的事件 3.7.3. 默认图标好单调,改一下撒 3.7.4. 偷偷告诉你咋从节点弹出对话框 3.7.5. 小小提示 3.7.6. ...

    JAVA上百实例源码以及开源项目源代码

    1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context…… ftp文件传输 2个目标文件,FTP的目标是:(1)提高...

    XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解

    分别是XML快速入门,XML的概念,XML的术语,XML的实现,XML的实例分析。最后附录介绍了XML的相关资源。作者站在普通网页设计人员的角度,用平实生动的语言,向您讲述XML的方方面面,帮助你拨开XML的神秘面纱,快速...

    Java项目开发与毕业设计指导

    安装JDK,并正确配置环境变量(如果有疑问,可以参考任何一本java入门书籍)。打开Eclipse(可以到http://www.eclipse.org/现在官方最新版,Eclipse本身是免费软件),导入ch01下的java项目,然后保存、运行game....

Global site tag (gtag.js) - Google Analytics