一直在使用这方面的技术，收集了几篇相关的文章。
from ：csdn 感谢原作者
如果你曾参与过网络开发，那么对你来说，利用远程脚本调用能力、通过AJAX（Asynchronous JavaScript + XML）来开发应用软件的最新趋势也就不足为奇了。毕竟，这一技术多年前就已出现，只是与浏览器不兼容罢了。微软一直宣称ActiveX为解决方案，但随着AJAX技术的不断升温，这一情况已经改变。现在让我们深入探究AJAX革命，以及微软的参与和方案。
AJAX是什么？
定义AJAX可不象指向W3C网页那样简单，因为它是几种技术的组合。它包括如下技术：
* XHTML 和 CSS 的标准表示；
* 使用文档对象模型DOM（Document Object Model）实现动态显示及用户交互；
* 使用 XML 、XSLT和XMLHttpRequest进行数据交换及操作；
* 使用 JavaScript 将所有技术绑定在一起。
AJAX与传统网络开发的最大不同在于采用了远程脚本调用技术。远程调用技术允许用户方的JavaScript语言向服务器发送数据请求，而不用刷新网页。这一任务是通过JavaScript语言与XMLHttpRequest对象来实现的。远程脚本调用将一部分处理过程转移到客户（浏览器），这大大减少了向网络服务器的呼求数目。
微软首次将XMLHttpRequest对象作为一个ActiveX对象应用在Windows IE5中。与这个ActiveX组件一同首次开发的还有Outlook Web Access。研发Mozilla计划的工程师推出了Mozilla 1.0（及Netscape 7）的兼容本地版，苹果公司也在他们的Safari 1.2中增加了这一支持。在一份提议的W3C标准中也包含了类似的功能。与此同时，XMLHttpRequest对象实际上已成为技术标准。
“中间人”
传统的网络应用软件首先向HTTP服务器触发一个用户行为或请求的呼求。反过来，服务器执行某些任务，再向发出请求的用户返回一个HTML页面。这是一种不连贯的用户体验，服务器在处理请求的时候，用户多数时间处于等待的状态。
AJAX则不同。它通过在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。
AJAX不断升温
AJAX正受到大型公司Google及Amazon的关注。Google已将AJAX广泛应用于其开发的Gmail、Google Suggest和Google Maps等网络应用软件中。（确实，在最近所有开发或改进的主要产品中，Google在AJAX方面投入了大量资金。）同样，Amazon也推出了应用AJAX技术的A9搜索引擎。每天都有许多类似的例子涌现。
微软的AJAX
当然，微软也在着手开发更为完善的AJAX。它即将推出代号为Atlas的AJAX工具。Atlas的功能超越了AJAX本身，包括整合Visual Studio的调试功能。另外，新的ASP.NET控件将使客户端控件与服务器端代码的捆绑更为简便。Atlas客户脚本框架（Atlas Clent Script Framework）也使与网页及相关项目的交互更为便利。但Visual Studio 2005中并不包含此项功能。
微软最近宣布Atlas客户脚本框架将包含如下内容（详细资料请访问Atlas计划网站）：
* 一个可扩展的核心框架，它添加了JavaScript功能：如生命同时期管理、继承管理、多点传送处理器和界面管理。
* 一个常见功能的基本类库，有丰富的字符串处理、计时器和运行任务。
* 为HTML附加动态行为的用户界面框架。
* 一组用来简化服务器连通和网络访问的网络堆栈。
* 一组丰富的用户界面开发控件，如：自动完成的文本框、动画和拖放。
* 处理浏览器脚本行为差异的浏览器兼容层面。
上述内容只是一个初步的框架。在确切的产品发布之前，这些内容很可能会有所改变。如果你等不及微软的产品，可以先试用一下免费的微软.NET框架Ajax.NET库。
AJAX的缺点
AJAX要求用户的浏览器支持JavaScript语言。尽管这并不是主要的问题，不过也要加以考虑。同样，这些应用软件必须经过严格的测试来适应不同的浏览器及平台。但是,这种情形只对基于浏览器的应用软件而言,并不包括目标浏览器可被控制的局域网在内。
用户对AJAX的抱怨主要集中在浏览器后退功能的失效上，因为在AJAX下，页面的动态更新并不被浏览器认为是进入另一个网页。不过，用IFRAME中的一个常用方法就可以解决该问题。
AJAX面对的另一个批评让我觉得很有趣，有人认为AJAX不过是为了推销旧技术而引入的新名词而已。这也许是对的，但至少它所包含的技术是成熟且经过测试的。
旧瓶装新酒
AJAX技术在网络开发界并不新奇，但总的来说，它对所有主流浏览器的广泛支持使其更易于为网络开发界所接受并加以应用。AJAX所应用的技术成熟而稳定。利用它你能够开发出丰富的应用软件，从而减少服务器的响应时间，这样用户的等待时间也相应减少。
Ajax using XMLHttpRequest and Struts
author: Frank W. Zammetti
About five years ago I worked on a web app project where one of the primary requirements was that it should look, work and feel like a Windows-based fat client. Now, ignoring the question of why it was not in fact done as a Windows-based fat client in the first place, that can be a rather tough requirement in the world of web development, certainly it was five years ago when not very many examples of such a thing existed.
As a result of a number of proof-of-concepts, I stumbled upon some techniques for doing things that were at the time rather atypical approaches to web development. The end result was an application that, to this day, many people cannot even tell is web-based, aside from the fact that you access it with a browser! Little did I know that only a few years later the basic concepts behind what I had done would re-emerge in the world as something called Ajax.
Ajax is a term coined by the folks at Adaptive Path and is shorthand for Asynchronous Javascript + XML.
This just goes to show, patenting every idea you ever have is indeed a good way to riches! If only I would have thought what I did was anything special! But I digress… Google is doing it. So are many others. But what is it? In a nutshell, the Ajax concept, which is not a concrete technology implementation but rather a way of thinking and a set of techniques that go along with the mindset, is concerned with the idea that rebuilding a web page for every user interaction is inefficient and should be avoided. For instance, say you have a web page with two
All you Microsoft haters get ready to yell because this was a Microsoft creation! Yes, Microsoft got something right, and did so before anyone else! Microsoft first implemented the XMLHttpRequest object in Internet Explorer 5 for Windows as an ActiveX object (ok, so they didn't get it QUITE right!). The Mozilla project later implemented a native version with the release of Mozilla 1.0, and by extension, Netscape 7. Apple has now done the same as of Safari 1.2. Opera is now following suite with their version 7.60. All released versions of Firefox contain it as well. Let's just cut to the chase and get to some code, shall we? The XMLHttpRequest component, being a client-side component, must be instantiated via scripting before it can be user.
Thankfully, the process is as simple as can be… For IE, use the following Javascript: var req = new ActiveXObject("Microsoft.XMLHTTP"); …for any other browser, use: var req = new XMLHttpRequest(); You will of course want to perform some branching logic in your code. There are a couple of ways to do it, but I prefer a simple approach, which to me is just an object existence check: var req;
if (window.XMLHttpRequest)
{ // Non-IE browsers
req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{ // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
}
However you choose to do it, after this code executes you will find that the variable req is now a reference to an XMLHttpRequest object. This object has a number of properties and methods, which are summarized below:
Property Description onreadystatechange Event handler for an event that fires at every state change readyState Status: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete responseText Data returned from server in string form responseXML DOM-compatible document object of data returned status
HTTP status code (i.e., 200, 404, 500, etc.)
statusText String message associated with the status code Method
Description abort() Stops the current request getAllResponseHeaders() Returns all headers (name and value) as a string getResponseHeader( Returns the value of the specified header " ")
open(" ", "URL"[, Opens a connection and retrieves response from the specified URL. asyncFlag[, " "[, Can also specify optional values method ( GET/POST), username and " "]]]) password for secured sites send(content) Transmits request (can include postable string or DOM object data) setRequestHeader
Assigns values to the specifed header (" ", " ") Before we go any further I highly suggest checking out the webapp referenced at the end of this article. If you haven't already done so, download the sample webapp at the URL referenced at the end of this article. Install it into your servlet container of choice. It is supplied in exploded format, so just copying the directory created when unzipping it should work. For instance, if you are using Tomcat, simply copy the xhrstruts directory into / webapps. That should be all you need to do. Start up your app server and give it a shot! Access the application using http://localhost:8080/xhrstruts (replacing 8080 with whatever port your app server is listening on). This sample shows a number of different usage situations including a sortable table, a dropdown changing the contents of another as described above, and an RSS feed parser. This example is Struts-based, as the title of this article implies! Although Ajax can be used completely independent of Struts, or any other back-end technology, I generally work in Java, and with Struts, hence my choice. All of the examples in the webapp work with a chunk of script in the of the document. Although each version has some minor differences, the all come from the same basic code. Here it is:
var req;
var which;
function retrieveURL(url ) {
if (window.XMLHttpRequest) {
// Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange ;
try {
req.open ("GET", url, true);
}
catch (e) {
alert(e);
}
req.send(null);
}
else if (window.ActiveXObject) {
// IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processStateChange ;
req.open(" GET", url, true);
req.send();
}
}
}
function processStateChange() {
if (req.readyState == 4) {
// Complete
if (req.status == 200) {
// OK response
document.getElementById ("urlContent").innerHTML = req.responseText;
}
else {
alert("Problem: " + req.statusText );
}
}
}
The basic idea of this code is simple… You call the retrieveURL() function, passing it the URL you wish to access. It instantiates the XMLHttpRequest object appropriately depending on browser, and then opens a request to the supplied URL. Note the try…catch block in the portion of the code for non-IE browsers. This is due to the fact that some browsers (Firefox as an example) will not allow any request via XMLHttpRequest that is to a domain other than the domain the page is served from. In other words, if you access www.omnytex.com/test.htm and it tries to access www.cnn.com, the browser will not allow it. But, accessing www.omnytex.com/whatever.htm will work just fine. IE will allow this cross-site scripting, but with a user verification required. One important line is the req.onreadystatechange = processStateChange; line. This line of code is setting up an event handler. When the state of the request changes, the processStateChange() function will be called. You can then interrogate the state of the XMLHttpRequest object and do whatever is appropriate. The previous table given lists all the possible values. All we particularly care about here is when the request is complete. The next thing we need to do is check the HTTP response code that was received. Anything other than 200 (HTTP OK) will just result in an alert with the error information displayed. In this example, when we get a complete response back and it was OK, we insert the text we received back into the urlContent span, which appears later on in the page. That is literally all there is to using XMLHttpRequest! A slightly more interesting example is the second example in the webapp, dynamic sorting of a table. Here is the complete page involved: <script type="text/javascript"> var req; var which; function retrieveURL(url ) { if (window.XMLHttpRequest) { // Non-IE browsers req = new XMLHttpRequest(); req.onreadystatechange = processStateChange ; try { req.open(" GET", url, true); } catch (e) { alert(e); } req.send(null); } else if (window.ActiveXObject) { // IE req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processStateChange ; req.open(" GET", url, true); req.send(); } } } function processStateChange() { if (req.readyState == 4) { // Complete if (req.status == 200) { // OK response document.getElementById ("theTable").innerHTML = req.responseText; } else { alert("Problem: " + req.statusText ); } } } </script>
Example 2
Dynamic table.< br> This example shows how a table can be built and displayed on-the-fly by showing sorting of a table based on clicks on the table headers.
Notice again the nearly identical script elements in the . Here we are actually making a request to a Struts Action. This action returns the actual HTML for the table, sorted appropriately. There are other ways to accomplish this that don't require you to generate HTML in the Action, but this is a quick-and-dirty approach that works quite well. We make an initial call to the Action when the page loads so that we have a table to begin with. Clicking on any of the column headers will result in the table being sorted and redrawn. Let's take a look at another example from the webapp, this time the RSS feed parser: <script type="text/javascript"> var req; var which; function retrieveURL(url ) { if (url != "") { if (window.XMLHttpRequest) { // Non-IE browsers req = new XMLHttpRequest(); req.onreadystatechange = processStateChange ; try { req.open(" GET", url, true); } catch (e) { alert(e); } req.send(null); } else if (window.ActiveXObject) { // IE req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processStateChange ; req.open(" GET", url, true); req.send(); } } } } function processStateChange() { if (req.readyState == 4) { // Complete if (req.status == 200) { // OK response // We're going to get a list of all tags in the returned XML with the // names title, link and description. Everything else is ignored. // For each that we find, we'll constuct a simple bit of HTML for // it and build up the HTML to display. When we hit a title, // link or description element that isn't there, we're done. xml = req.responseXML; i = 0; html = ""; while (i &gt;= 0) { t = xml.getElementsByTagName ("title")[i]; l = xml.getElementsByTagName ("link")[i]; d = xml.getElementsByTagName ("description")[i]; if (t != null &amp;&amp; l != null &amp;&amp; d != null) { t = t.firstChild.data; l = l.firstChild.data; d = d.firstChild.data; html += "&lt;a href=/"" + l + "/"&gt;" + t + "&lt;/a&gt;&lt; br&gt;" + d + "&lt;br&gt;&lt;br&gt;"; i++; } else { i = -1; } } document.getElementById ("rssData").innerHTML = html; } else { alert("Problem: " + req.statusText ); } } } </script>
Example 6
RSS example.< br> This example is a more real-world example. It retrieves an RSS feed from one of three user-selected sources, parses the feed and displays the headlines in clickable form. This demonstrates retrieving XML from a server and dealing with it on the client.
Note that the RSS feed XML is actually stored as files within this webapp. That is because some browsers will not allow you to retrieve content with XMLHttpRequest outside the domain of the document trying to do the call. Some browsers will allow it with a warning though.
The first thing to note is that the RSS feed XML files are actually local files included with the webapp. A true RSS reader using XMLHttpRequest wouldn't be possible because it would be dealing with domains outside its own. However, one way around this would be to write an Action that retrieves the feed from the true URL and then returns it to the page, and that is demonstrated in example 7. Other than the Action acting as the proxy to retrieve the RSS feed, the code for the page itself is the same. In any case, the example works very similarly to all the others except that we see an example of XML parsing here in the event handler function. This is a simplified example in that we're simply ignoring any tags except those that describe each headline. In a true example (i.e., one that was retrieving more complex XML), the parsing code would be accordingly more complex, but I leave that as an exercise to the reader. Let's finish up by examining the script for the example that demonstrates submitting data with a request. Just the script in the is:
var req; var which;
function submitData() {
// Construct a CSV string from the entries. Make sure all fields are
// filled in first.
f = document.theForm.firstName.value;
m = document.theForm.middleName.value;
l = document.theForm.lastName.value;
a = document.theForm.age.value;
if (f == "" || m == "" || l == "" || a == "") {
alert("Please fill in all fields first");
return false;
}
csv = f + "," + m + "," + l + "," + a;
// Ok, so now we retrieve the response as in all the other examples,
// except that now we append the CSV onto the URL as a query string,
// being sure to escape it first.
retrieveURL(" example5Submit.do?csv=" + escape(csv));
}
function retrieveURL(url ) {
if (window.XMLHttpRequest) {
// Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange;
try {
req.open(" GET", url, true);
}
catch (e) {
alert(e);
}
req.send(null);
}
else if (window.ActiveXObject) {
// IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processStateChange ;
req.open(" GET", url, true);
req.send();
}
}
function processStateChange() {
if (req.readyState == 4) {
// Complete
if (req.status == 200) {
// OK response
document.getElementById ("theResponse").innerHTML = req.responseText;
}
else {
alert("Problem: " + req.statusText );
}
}
}
In this example we are constructing a simple comma-separated string based on the inputs of the user. You can of course construct an XML document and send that, and in fact that is the more common example. But that is part of the reason I DIDN'T do it: I wanted to show you that you do not have to send XML when using XMLHttpRequest. In fact, this example does nothing more than append the CSV string onto the URL. There are numerous examples on the web for constructing a true XML document and submitting that using the XMLHttpRequest.send () method, and I highly recommend looking those up if you intend to use that approach. I hope that this rather short article and accompanying webapp have given you a good starting point from which to explore what the XMLHttpRequest object provides. Before I close I want to also point out that the Ajax concept itself does NOT require you to use XMLHttpRequest. You can get very much the same basic effect in other ways, including code in a hidden frame taking the place of XMLHttpRequest. This is in fact the technique I used five years ago in the project I spoke of at the beginning. However, XMLHttpRequest does make the underlying Ajax concept far easier to implement, and more standard. Just look to Google as a great example of the power of this technique. However, I caution anyone from thinking this is the way all web apps should be developed. I do not for a second advocate this as the One True Solution (for all you LOTR fans out there!). It is a good approach in many cases, but will not be appropriate in others. If reaching the maximum possible audience is your goal, you would want to stay away from this. If a user disabling scripting in their browser might be a concern (and your site wouldn't be any good without it), this probably isn't a good answer either. There are other reasons to stay away from it in some situations, but the bottom line is treat it like any other tool in your toolbox: it will be right for some jobs, maybe not so for others. After all, you don't drive a nail with a glue gun, right?? In any case, I hope this has given you some food for thought. Have fun! About the author Frank W. Zammetti is a Web Architect Specialist for a leading worldwide financial institution during the day and a PocketPC developer at night. He is the Founder and Chief Software Architect of Omnytex Technologies. He has over 10 years of professional development experience, and nearly 15 more of "amateur" experience, and he has been developing web-based applications (Intranet applications mostly) almost exclusively for nearly 7 years. Frank holds numerous certifications including SCJP, MCSD, CNA, i-Net+, A+, CIW, MCP and numerous BrainBench certifications. He is a contributor to a number of open-source projects, including DataVision, as well as having started two, including the Struts Web Services Enablement Project (search strutsws on SourceForge, or http://sourceforge.net/projects/strutsws/).
Frank's resume is available online at
http://www.zammetti.com/resume.
Sample webapp:
http://www.omnytex.com/articles/xhrstruts/xhrstruts.zip
PDF copy of this article: http://www.omnytex.com/articles/xhrstruts/xhrstruts.pdf
663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
