[摘录]ajax如何后台交互


摘录地址 :http://www.xrss.cn/Info/13658.Html


AJAX全称为“Asynchronous JavaScript and Xml”(异步JavaScript和Xml),是指一种创建交互式网页应用的网页开发技术。AJAX技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合。AJAX以一种崭新的方式来使用所有的这些技术,使得古老的B/S方式的Web开发焕发了新的活力。
AJAX技术之中,最核心的技术就是XmlHttpRequest,它最初的名称叫做XmlHTTP,是微软公司为了满足开发者的需要,1999年在IE5.0浏览器中率先推出的。后来这个技术被上述的规范命名为XmlHttpRequest。它正是AJAX技术之所以与众不同的地方。简而言之,XmlHttpRequest为运行于浏览器中的JavaScript脚本提供了一种在页面之内与服务器通信的手段。页面内的JavaScript可以在不刷新页面的情况下从服务器获取数据,或者向服务器提交数据。XmlHttpRequest的出现为Web开发提供了一种全新的可能性,甚至整个改变了人们对于Web应用由什么来组成的看法。它可以使我们以一种全新的方式来做Web开发,为用户提供更好的交互体验。
与传统的Web开发不同,AJAX并不是以一种基于静态页面的方式来看待Web应用的。从AJAX的角度看来,Web应用应由少量的页面组成,其中每个页面其实是一个更小型的AJAX应用。每个页面上面都包括有一些使用JavaScript开发的AJAX组件。这些组件使用XmlHttpRequest对象以异步的方式与服务器通信,从服务器获取需要的数据后使用DOM API来更新页面中的一部分内容。因此AJAX应用与传统的Web应用的区别主要在三个地方:
1. 不刷新整个页面,在页面内与服务器通信。
2. 使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的的响应能力。
3. 应用仅由少量页面组成。大部分交互在页面之内完成,不需要切换整个页面。
由此可见,AJAX使得Web应用更加动态,带来了更高的智能,并且提供了表现能力丰富的AJAX UI组件。这样一类新型的Web应用叫做RIA(Rich Inte.Net Application)应用。
前面是本人在网上找的一些关于AJAX介绍的资料,以帮助不了解AJAX技术的读者尽快了解AJAX技术,下面本人将会把自己在实际开发过程中用到的一些AJAX技术及技巧给大家介绍一下.
使用AJAX技术最重要的就是创建XmlHttpRequest对象,关于如何创建该对象网上有很多资料.本人最常用的一个方法是
function createXmlHttpRequest() {
    var Xmlhttp;
    try {
        Xmlhttp = new ActiveXObject('MsXml2.XmlHTTP');
    } catch(e) {
        try {
            Xmlhttp = new ActiveXObject('Microsoft.XmlHTTP');
        } catch(e) {
            try {
                Xmlhttp = new XmlHttpRequest();
            } catch(e) {
                alert("创建XmlHttpRequest对象失败!");
            }
        }
    }
    return Xmlhttp;
}
下面本人将列出一些例子及一些通过这些例子可以学到的东西.
下面一段代码是本人在做新增特定物品时,做验证以判断该物品是否已在数据库中存在的例子.
<input type="text" style="width:100%" class="noEmptyInput" name="segment10" value="<%=segment10%>" maxlength="16" onblur="do_verify();">
function do_verify() {
    var segment10 = document.mainFrm.segment10.value;
    var inventoryItemId = document.mainFrm.inventoryItemId.value;
    //    alert(segment10)
    XmlHttp = createXmlHttpRequest();
    var url = "/servlet/com.sino.ies.inv.maintenance.servlet.ItemMaintainServlet?forward=doVerify&segment10=" + segment10 + "&inventoryItemId=" + inventoryItemId;
    XmlHttp.onreadystatechange = handleReadyStateChange;
    XmlHttp.open("post", url, true); //传递数据的方法同样有GET和POST两种,但是当方法为POST时下面的一句话就必须写
    XmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    XmlHttp.send(null);
}
function handleReadyStateChange() {
    if (XmlHttp.readyState == 4) {
        if (XmlHttp.status == 200) {
            if (XmlHttp.responseText == 'Y') {
                document.mainFrm.isExist.value = 'Y';
                document.getElementById("flag").style.display = "block"
                document.mainFrm.segment10.focus();
            } else {
                document.mainFrm.isExist.value = 'N';
                document.getElementById("flag").style.display = "none"
            }
        } else {
            alert(XmlHttp.status);
        }
    }
}
后台代码为:
                boolean success = itemDAO.doVerifyItem();  //doVerifyItem为验证指定物品是否在数据库中存在的主要方法,如果该物品已存在该方法将返回TRUE
                PrintWriter out = res.getWriter();
                if (success) {
                    out.print("Y");
                }
                out.flush();
                out.close();
            }

 



欢迎大家访问我的个人网站 萌萌的IT人

posted on 2007-07-19 16:07 见酒就晕 阅读(152) 评论(0)  编辑  收藏 所属分类: J2EE文章


只有注册用户登录后才能发表评论。


网站导航:
 
<2024年4月>
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

导航

统计

常用链接

留言簿(3)

我参与的团队

随笔分类

随笔档案

文章分类

文章档案

收藏夹

BLOG

FRIENDS

LIFE

搜索

最新评论

阅读排行榜

评论排行榜