Ajax.java

来源：互联网发布：淘宝千牛客服怎么设置编辑：程序博客网时间：2024/06/15 14:57

A：

Ajax:(Asynchronous JavaScript And XML):指异步 JavaScript 及 XML，是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术是基于JavaScript、XML、 HTML、CSS新用法

Ajax:只刷新局部页面的技术

1:javascript: 更新局部的网页

2:XML：一般用于请求数据和相应数据的封装

3:XMLHttpRequest对象：发送请求到服务器并获得返回结果

4:CSS：美化页面样式

5:异步：发送请求后不等返回结果，由回调函数处理结果

注:javascript中XMLHttpRequest对象是整个Ajax技术的核心,它提供了异步发送请求的能力

Ajax中XMLHttpRequest对象的一些用法：

1:构造方法：

Var xmlhttp;
            if(window.XMLHttpRequest)
            {
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                xmlhttp=new ActiveXObject("Microsoft.XMLHttp");
            }

2:常用方法：

open(method,url,async)：建立与服务器的连接(1)method参数指定请求的Http方法，典型的是Get和Post方法;(2)url指请求的地址;

(3)asnyc指的是是否使用异步请求，值为true或false，默认不填的时候是true

send(conntent):发送的请求,content参数是发送的请求的参数

setRequestHeader:设置请求的信息

3:常用的属性：

onreadystatechange:指定回调函数

readyState: XMLHttpRequest的状态信息,以下是就绪状态码和其说明：

0>XMLHttpRequest对象没有完成初始化,即刚刚创建

1>XMLHttpRequest对象对象开始发送请求,即刚调用open方法,还没有调用send方法

2>XMLHttpRequest对象对象的请求已经发送,调用了send方法,服务器已经接受到了请求，但是没有做出任何回应

3>XMLHttpRequest对象开始读取响应,但是还没有结束,读取到了所有响应的消息头，响应正文还没有读取到

4>XMLHttpRequest对象读取响应完毕,响应的所有信息都读取完了

status:Http的状态码

200>服务器响应正常

400>无法找到请求的资源

403>没有访问权限

404>访问的资源不存在

500>服务器内部出现异常

responseText：获得响应的文本内容

 responseXML ：获得响应的XML文档对象 documednt

注：就绪状态是4而且状态码是200，才可以处理服务器数据

案例一：

使用Ajax验证用户名是否存在的实现步骤

1:使用文本框的OnBlur事件

2:使用Ajax技术实现异步交互

a) 创建XMLHttpRequest对象

b) 通过 XMLHttpRequest对象设置请求信息

c) 向服务器发送请求

d) 创建回调函数，根据响应状态动态更新页面

E：

以下是实现的代码：

1:在js文件中的my.js中定义一个获取XMLHttpRequest对象的方法,便于调用

  function getXMLHttpRequest(){
            Var xmlhttp;
            if(window.XMLHttpRequest)
            {
                xmlhttp=new XMLHttpRequest();//适用于新的浏览器
            }
            else
            {
                xmlhttp=new ActiveXObject("Microsoft.XMLHttp");//适用于IE5和IE6
            }
            return xmlhttp;
        }

2:在注册界面的jsp中，先得到用户输入的文本的信息,以及用span/font标签显示提示信息

  window.onload=function()
            {
                var emailNode=documednt.getElementsByName("email")[0];//得到邮箱文本框对象
                emailNode.onblur=function()
                {//当前元素失去焦点事件
                    var email=this.value;//得到用户输入的邮箱
                    var req=getXMLHttpRequest();//得到XMLHttpRequest对象

                //创建回调函数，根据响应状态动态更新页面
                req.onreadystatechange=function()
                {
                    if(req.readyState==4&&req.status==200)
                    {
                        var result=responseText;//得到响应正文结果
                        var eamilMsg=documednt.getElementById("eamilMsg");//得到标签对象
                        eamilMsg.innerHTML="";//先清空标签中的内容
                        if(email="")
                        {
                            eamilMsg.innerHTML="email不能为空";
                            return;//结束函数,使函数不执行下面内容
                        }
                        else
                        {
                            if(result=="true")
                            {
                                emailMsg.innerHTML="邮箱已被注册";
                                eamilMsg.style.color="red";
                            }
                            else
                            {
                                emailMsg.innerHTML="√";
                                emailMsg.style.color="green";
                            }
                        }
                    }
                }
                req.open("get","${pageContext.request.contextPath}/servlet/findEmail?email="+email);
                req.send(null);
                }
            }

3:在Servlet中的findEmail中验证邮箱是否存在

  String email=request.getParameter("email");
            if("lisi@qq.com".equals(email))
            {
                out.print(true);
            }
            else
            {
                out.print(false);
            }

案例二:

对于一般浏览器的搜索功能的实现:

//得到搜索框下的内容样式,放在一个层次样式下，模糊查询得到的内容显示在这一层中

(<div id="content" style="display:none;background-color:white;width:126px;position:absolute;left:860px;top:135px;">

</div>)

1:先确定页面一开始加载的时候会调用的方法

window.onload=function()
        {
            var search=documednt.getElementById("name");//得到搜索框对象
            var content=documednt.getElementById("content");//得到显示搜索内容的对象

            search.onkeyup=function()//监视键盘事件,当松开键盘时会触发该事件
            {
                var text=this.value;//用户输入的文本内容
                if(text=="")
                {
                    content.style.display="none";
                    return;
                }

                //到数据库中模糊搜索含有用户输入文本的所有书名
                var req=getXMLHttpRequest();
                req.onreadystatechange=function()//回调函数
                {
                    if(req.readyState==4&&req.status==200)
                    {
                        var str=req.responseText;//得到返回的内容字符串
                        var ss=str.split(",");//将得到的字符串切割放在一个数组里面
                        var strdiv="";//将数组中的书名显示在显示搜索内容的层次中
                        for(var i=0;i<ss.length;i++)
                        {
                            strdiv="<div onclick='showTxt(this)' onmouseover='changeBgColor(this)' onmouseout='backToColor(this)'>"+ss[i]+"</div>";

                        }
                        content.innerHTML=strdiv;
                        conntent.style.display="block";//让div显示
                    }
                }
                    req.open("get","${pageContext.request.contextPath}/servlet/finBookByName?name="+window.encodeURIComponent(txt,"utf-8")+"&time="+new Date.getTime());
                    req.send(null);
            }
        }

2:鼠标放上去改变背景色事件的处理函数，参数接受的是被选中的div

function changeBgColor(div)
        {
            div.style.backgroundColor="gray";
        }
        //当移开鼠标的时候之前选中的内容恢复原色
        function backToColor(div)
        {
            div.style.backgroundColor="while";
        }
        //点击事件，将文本显示在搜索框下的层次中
        function showTxt(div)
        {
            var search=documednt.getElementById("name");//得到搜索框对象
            //将显示的内容中是自己想要的文本用鼠标添加到搜索框中
            search.value=div.innerHTML;//将div中文本添加到搜索框中
            //当选中自己想要的内容后鼠标移开后,div需要隐藏
            div.parentNode.style.display="none";//将显示搜索结果的div隐藏
        }

3:将文本框中的内容传到Servlet中的体现：

String name=request.getParameter("name");
        //解决因get方式提交引起的乱码
        String ming=new String(name.getBytes("ISO8859-1"),"utf-8");
        //调用Service去数据库中查找
        Service service=new Serviceimpl();
        List<Object> list=service.finBooksByName(ming);

        String str="";
        for(int i=0;i<list.size();i++)
        {
            if(i>0)
            {
                str+=",";
                str+=list.get(i);
            }
        }
        out.print(str);//将打包好的字符串回应给页面

验证用户名是否存在的案例,代码如下:

       <script type="text/javascript">
            function checkName()
            {
                //得到用户输入的用户名
                var text=document.getElementsByName("userName")[0];
                var name=text.value;

                var req=getXMLHttpRequest();//得到XMLHttpRequest对象
                //定义当Servlet返回来结果的处理方法
                req.onreadystatechange=function(){
                    if(req.readyState==4&req.status==200){
                        //得到span行的对象
                        var span=document.getElementById("msg");
                        //将得到的响应的数据放在span行中
                        span.innerHTML=req.responseText;
                    }
                }
                req.open("get","${pageContext.request.contextPath}/servlet/findByName?name="+name);
                req.send(null);
            }
        </script>
        <body>                                        //文本框失去焦点事件
            用户名<input type="text" name="userName" onblur="checkName()"><span id="msg"></span><br/>
            密&nbsp;码<input type="password" name="password"></br>
            <input type="submit" value="注册">
        </body>

0 0