Ajax using XMLHttpRequest and StrutsFrank 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 <select> elements on it. You want the contents of the second one to change when a selection is made in the first. Something like this is not uncommon and there are a number of ways you can handle it. The Ajax approach to this is to only redraw a small portion of the web page, namely the contents of the second <select>. The Ajax concept is based around something called the XMLHttpRequest component. 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 "<headerName>") open("<method>", "URL"[, Opens a connection and retrieves response from the specified URL. asyncFlag[, "<username>"[, Can also specify optional values method (GET/POST), username and "<password>"]]]) password for secured sites send(content) Transmits request (can include postable string or DOM object data) setRequestHeader Assigns values to the specifed header ("<name>", "<value>") 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 crea [1] [2] [3] [4] 下一页 [Web开发]AJAX来判断dedecms用户是否登录 [系统软件]Explanation of UFT-8 and Unicode [系统软件]Using dllimport and dllexport in C++ Classes [常用软件]神奇 我家的照片会唱歌 照片会唱歌 [VB.NET程序]VB.NET and C# 语法比较手册 [Delphi程序]IntraWeb And ActiveForms [Delphi程序]different between BPL and DLL [VB.NET程序]How to setup a basic Struts project using Ecli… [网页制作]Classes and Objects in PHP5 [网页制作]新手解读:认识XML,AJAX,SNS,Tag
|