AJAX设计策略（三）

你会发现程序代码的主要部分是客户端JavaScript代码。例如，这里有一些bookstore2程序的JavaScript代码，它们创建和并配置了一个XMLHttpRequest对象，并用它向服务端组件创建了一个异步的请求。

bpui.alone.showPopupInternal=function(popupx, bookId) {

 

    bpui.alone.req=bpui.alone.initRequest();

    ...

 

    url="../PopupServlet?bookId=" + escape(bookId);

    bpui.alone.req.onreadystatechange = bpui.alone.ajaxReturnFunction;

    bpui.alone.req.open("GET", url, true);

    bpui.alone.req.send(null);

}

 

...

 

bpui.alone.initRequest=function() {

    if (window.XMLHttpRequest) {

        return new XMLHttpRequest();

    } else if (window.ActiveXObject) {

        return new ActiveXObject("Microsoft.XMLHTTP");

    }

}

 

这里有JavaScript回调函数，处理异步请求响应的数据。注意，回调函数使用类似getElementsByTagName()的DOM API方法来提取XML中的数据。inner.HTML属性被用来更新页面的DOM呈现。

bpui.alone.ajaxReturnFunction=function() {

    // statically setup popup for simple case

    var componentId="pop0";

    // check return of the call to make sure it is valid

    if (bpui.alone.req.readyState == 4) {

        if (bpui.alone.req.status == 200) {

            // get results and replace dom elements

            var resultx=bpui.alone.req.responseXML.getElementsByTagName("response")[0];

            document.getElementById(componentId + "_title").innerHTML=

              resultx.getElementsByTagName("title")[0].childNodes[0].nodeValue;

            document.getElementById(componentId + "_message").innerHTML=

              resultx.getElementsByTagName("message")[0].childNodes[0].nodeValue;;

            // show popup with the newly populated information

            document.getElementById(componentId).style.visibility='visible';

        } else if (bpui.alone.req.status == 204){

            alert("204 returned from AJAX call");

        }

    }

}

AJAX bookstore2程序同样需要包含服务端组件的代码，例如servlet－处理XMLHttpRequest并返回适当的响应。"Creating an AJAX-Enabled Bookstore Application"这篇文章同样分析servlet代码，和其他关于弹出式气球文件里的代码。
简言之，do-it-yourself方式需要编写很大数量的AJAX相关代码来实现bookstore2程序的弹出式气球－其中有一些相当复杂。

Do-It-Yourself方法的正面和反面
do-it-yourself approach方法的确是将AJAX置入web应用的一种方法，但是它是最适合你的方法吗？这里有一些使用这种方法的优势（正面）和劣势（反面）。
正面
在AJAX处理上提供细密的控制，当你宁愿编写所有的AJAX相关代码而不使用JavaScript库或者其他能提供AJAX功能的方法，你可以明确的控制AJAX相关处理。你可以包含库没有提供或定制的功能，可以通过最适合你的方法使你的AJAX代码最优化。例如，你可以添加安全性控制或为性能而优化代码。
反面
需要很多的AJAX相关代码。如果你分析bookstore2里的代码，你将发现它需要很少的AJAX相关代码。如果其他方法提供你需要的AJAX功能并且需要很少代码，根据感觉使用这些方法。例如，类似在Dojo工具箱中的客户端JavaScript库，封装了一些类似创建和配置XMLHttpObject的AJAX操作，它们将减少你所需要编写的代码。如果库可以提供你需要的AJAX功能，使用它会比编码实现功能简单很多。请查阅本文的Design Strategy 2: Use a Client-Side JavaScript Technology Library部分。
需要若干种语言和技术的知识。AJAX代码需要你懂得JavaScript，CSS，和DOM－这些对Java工程师来说并不是必须要懂的。其他方法，例如使用jMaki技术，允许你使用基于Java的技术整合AJAX功能。请看Design Strategy 4: Do the Wrap Thing部分。
需要开发者与浏览器的不兼容性斗争。尽管现在大多数的浏览器可以处理AJAX代码，不是所有的浏览器使用同一种方法处理AJAX代码。特别的，很多浏览器处理JavaScript代码的方式不同。值得注意的，对象XMLHttpRequest并不是JavaScript标准的一部分。事实上，IE现在并不支持XMLHttpRequest对象。而是用ActiveX控件同服务器进行AJAX通信。这就是bpui.alone.initRequest()函数为什么包含下面的测试：

另外，你必须考虑浏览器不支持AJAX的所有可能性，例如一些老版本的浏览器。另一种办法，例如使用客户端JavaScript库，jMaki, Direct Web Remoting (DWR), 和 the Google Web Toolkit (GWT)会处理浏览器的不兼容性。请看本文的Design Strategy 5: Go Remote部分。
需要开发者与UI问题做斗争。AJAX web应用引入了许多UI问题。例如，你怎样为一个AJAX网页支持书签，如果他的内容经常改变但URL不会。你怎样为一个页面的特定状态做书签。另外，你怎样支持后退按钮？另一个简单的应用，开发者必须考虑这些UI问题并编写处理它们的代码。客户端JavaScript库，例如那些在Dojo toolkit, Prototype, 和 Script.aculo.us中提供的，包含了处理那些问题的特性。
难以调试。由于AJAX代码分配在客户端和服务端之间， JavaScript, DOM, CSS 等的多种类型代码的结合，调试AJAX代码会很困难。