Ajax by the HTML, JavaScript ™ technology, DHTML and DOM composition, this method can be distinguished clumsy Web interface will be transformed into interactive Ajax applications. The author of this paper is an Ajax expert, he demonstrated how these technologies work together - from a general overview of the discussion of the details - make efficient Web development become a reality. He also opened a core concept of Ajax the mystery, including the XMLHttpRequest object.



Ajax by the HTML, JavaScript ™ technology, DHTML and DOM composition, this method can be distinguished clumsy Web interface will be transformed into interactive Ajax applications. The author of this paper is an Ajax expert, he demonstrated how these technologies work together - from a general overview of the discussion of the details - make efficient Web development become a reality. He also opened a core concept of Ajax the mystery, including the XMLHttpRequest object.

Five years ago, if we do not know XML, you are an ugly duckling no attention. 10 months ago, Ruby has become the center of attention, I do not know Ruby programmers only a bench. Today, if the technology would like the latest fashion, and that your goal is to Ajax.

However, Ajax is not just a fashion, it is a powerful way to build a website, and not to learn a new language as difficult.

However, in what is discussed in detail before Ajax, let us take a few minutes to understand what Ajax. At present, the preparation of application, there are two basic options:

• Desktop applications
• Web applications

They are similar to desktop applications are usually CD for the media (and sometimes can be downloaded from the site) and fully installed on your computer. Desktop applications might use the Internet to download updates, but these applications run code on your desktop computer. Web applications running on the Web server somewhere - not surprising, it is necessary to access through Web browsers such applications.

However, the ratio of these applications run code on where, more importantly, how to operate the application and how to interact with their. Desktop applications in general will soon (on your computer to run, no need to wait for Internet connection), with a beautiful user interface (usually on the operating system) and an extraordinary dynamic. You can click, select, enter, open the menu and sub menu, parade around, basically do not need to wait.

On the other hand, Web applications are the latest trend, they offer can not be achieved on the desktop of the services (such as Amazon.com and eBay). However, along with the Web-there is a strong and waiting, waiting for the server to respond, waiting for the screen refresh, waiting for a request to return and create a new page.

It is clear that too briefly, but the basic concept is just like that. You may have guessed, Ajax attempt to create a desktop application functionality and interactivity, and the Web continually updated as a bridge between applications. Can be used as common desktop applications and dynamic user interface and good controls, but in the Web application.

What does waiting for? We take a look at how Ajax clumsy Web interface into the Ajax can respond quickly to your application.

Old technology, new skills

When talking about Ajax, it actually involves a variety of technologies, it should be flexibility in the use we must better understand these different technologies (the first of this series will be a few articles to discuss these technologies). The good news is that you may have been very familiar with most of the technology is better these technologies are easy to learn, not as a complete programming language (such as Java or Ruby) as difficult.

Ajax defined By the way, Ajax is Asynchronous JavaScript and XML (and DHTML, etc.) initials. The phrase is Adaptive Path's Jesse James Garrett invention (see reference ), In accordance with the interpretation of Jesse, this is not a acronym.

The following are used by Ajax applications of basic skills:

• HTML used to create Web application form and to determine the use of other parts of the field.
• JavaScript code running Ajax applications is the core code, and server applications to help improve the communication process.
• DHTML or Dynamic HTML, for the dynamic update form. We will use div, span, and other dynamic HTML elements to tag HTML.
• DOM Document Object Model used (through JavaScript code) to deal with HTML structure and (under certain circumstances) server to return XML.

Let's further analysis of the functions of these technologies. After the article I will discuss these technologies in depth, the current as long as these components and technology are familiar with it. Of those more familiar with the code, the easier it is from the fragmented understanding of these technologies to really take advantage of these changes in technology (at the same time really opened up a Web application development the door).

XMLHttpRequest object

To learn more about an object may be most familiar with you, that is XMLHttpRequest. This is a JavaScript object, the creation of the object is very simple, such as a list of 1 Shown.

List 1. To create a new XMLHttpRequest object

<script language="javascript" type="text/javascript"> var xmlHttp = new XMLHttpRequest (); </ script>

The next article will further discuss this object, now to deal with all know that this is the target server. Read before the pause for thought: The XMLHttpRequest object to engage in dialogue with the server is the JavaScript technology. This is not a general application flow, this is precisely the power of Ajax sources.

In general the Web application, users fill out the form field and click the Submit button. And then the entire form is sent to the server, the server processing the form, which were transmitted to the script (usually PHP or Java, the process may be CGI or something like that), the implementation of the completion of the script and then sent back to the new page. The page may be filled with some of the data has been a new form of HTML, it may be confirmation page, or form with the original input data to choose certain options page. Of course, the script on the server or procedures to deal with the new form and return the user must wait. Into a blank screen until the server to return data after the re-mapping. This is the reason for poor interactive user feedback is not immediate, so the feeling is different from desktop applications.

Basically, Ajax is XMLHttpRequest object and JavaScript technology on Web forms and server. When a user fill out the form, the data sent to some JavaScript code rather than directly to the server. In contrast, JavaScript code data capture form to send the request to the server. At the same time the user form on the screen will not flicker, disappear or delayed. In other words, JavaScript code behind the scenes to send a request, users do not even know the issue of the request. Better yet, send the request is asynchronous, that is, JavaScript code (and users) do not have to wait for the response from the server. So that users can continue to input data, scroll the screen and use applications.

Then, the data server to return JavaScript code (still in the Web form), the latter to decide how to deal with these data. It can quickly update the form data, make sense of the application is completed immediately, the form did not submit or refresh the users received new data. JavaScript code can be received even the implementation of a calculation of data, and then send another request with no user intervention! This is the power of XMLHttpRequest. It can interact with the server itself, users can even do not know what happened behind the scenes. The result is similar to the dynamics of desktop applications, rapid response, highly interactive experience, but behind all the huge power of the Internet.

By adding some JavaScript

Be XMLHttpRequest handle, the other of the JavaScript code is very simple. In fact, we will use the JavaScript code to complete very basic tasks:

• Access to form data: JavaScript code is easy to extract from the HTML form data sent to the server.
• Modified form of the data: updated form is also very simple, from the field values set to rapidly replace the image.
• Analysis of HTML and XML: the use of JavaScript code to manipulate DOM (see the next section ), To deal with HTML forms of XML data server to return the structure.

The former two points need to be very familiar with the getElementById () methods, such as List 2 Shown.

List 2. Use JavaScript code to capture and set field values

/ / Get the value of the "phone" field and stuff it in a variable called phone var phone = document.getElementById ( "phone"). value; / / Set some values on a form using an array called response document.getElementById ( "order"). value = response [0]; document.getElementById ( "address"). value = response [1];

There is no particular need to pay attention to local, really good! You should be aware that this is not very complicated things. As long as the master of the XMLHttpRequest, Ajax applications, such as the other part is List 2 Shown in a simple JavaScript code, mixed a small amount of HTML. At the same time, also with a little DOM, we will look at and see.

To the end DOM

And finally, there is DOM, or Document Object Model. Some readers may DOM a bit daunting, HTML designers rarely use it, even if the JavaScript programmers do not use it, unless a high-end programming to complete the task. Large-scale use of the DOM is a complex Java and C / C + + program, which is the DOM may be the reason that it is difficult to learn.

Fortunately, in the JavaScript technology DOM is easy to use and very intuitive. Now, in accordance with the Standing Orders might be on how to use the DOM, or at least to give some sample code, but it may mislead you. Even if we disregard DOM, still be able to go into the Ajax, which is why I used the method of preparation. Subsequent article will discuss the DOM, now as long as may be necessary to know can be a DOM. When JavaScript code and need to pass XML between the server and change the HTML form, we have thoroughly studied DOM. It also can do without some interesting work, so now put it aside DOM.

Back to top

Access Request Object

With basic knowledge of the above, we take a look at some specific examples. XMLHttpRequest is the core of Ajax applications, and for many readers may be unfamiliar, we go from here. From list 1 We can see that the creation and use of this object is very simple, is not it? Wait a minute.

Still remember a few years ago, those pesky browser war? Not the same thing in different browsers get the same result. Whether or not you believe that the war is still continuing, though on a smaller scale. But it is strange that, XMLHttpRequest has become one of the victims of this war. XMLHttpRequest object to obtain might therefore require the use of different methods. Now I will explain in detail.

Use Microsoft browser

Microsoft browser Internet Explorer to use MSXML parser to deal with XML (by reference Learn more about MSXML). Therefore, if the preparation of Ajax applications and Internet Explorer have to deal with, then we must create a special object.

But it is not as simple as that. According to Internet Explorer to install a different version of the JavaScript technology, MSXML fact there are two different versions, so be prepared for each of the two codes. Please refer to List 3 , In which the code in the Microsoft browser to create an XMLHttpRequest.

List 3. In the Microsoft browser to create XMLHttpRequest object

var xmlHttp = false; try ( xmlHttp = new ActiveXObject ( "Msxml2.XMLHTTP"); ) Catch (e) ( try ( xmlHttp = new ActiveXObject ( "Microsoft.XMLHTTP"); ) Catch (e2) ( xmlHttp = false; ) )

You think of these codes may not fully understand, but does not matter. When the end of this series of articles, you will have JavaScript programming, error handling, and other conditions have a better compilers understanding. Now firmly in mind as long as the two lines of code:

xmlHttp = new ActiveXObject ( "Msxml2.XMLHTTP");

And

xmlHttp = new ActiveXObject ( "Microsoft.XMLHTTP");.

These two lines of code is basically try to create a version of the MSXML object, if the failure of another version is used to create the object. Good, right? If not successful, it will xmlHttp variable is set to false, to tell you there are problems in the code. If this occurs, it may be because the installation of a non-Microsoft browser, the need to use a different code.

To deal with Mozilla and non-Microsoft browsers

If you choose the browser is not Internet Explorer, or the preparation of non-Microsoft browser code, on the need to use different codes. Is in fact a list of 1 As shown in his simple code:

var xmlHttp = new XMLHttpRequest object;.

This line is much simpler code in the Mozilla, Firefox, Safari, Opera, and basically all the way in any form or Ajax to support non-Microsoft browser, created the XMLHttpRequest object.

Combine

The key is to support all browsers. Who would be willing to prepare an Internet Explorer only be used for non-Microsoft browser or application procedures? Or worse, it is necessary to prepare an application twice? Of course not! At the same time, so the code to support Internet Explorer and non-Microsoft browser. List 4 Shows such a code.

List 4. To support a variety of browsers create XMLHttpRequest object

/ * Create a new XMLHttpRequest object to talk to the Web server * / var xmlHttp = false; / * @ cc_on @ * / / * @ if (@ _jscript_version> = 5) try ( xmlHttp = new ActiveXObject ( "Msxml2.XMLHTTP"); ) Catch (e) ( try ( xmlHttp = new ActiveXObject ( "Microsoft.XMLHTTP"); ) Catch (e2) ( xmlHttp = false; ) ) @ end @ * / if (! xmlHttp & & typeof XMLHttpRequest! = 'undefined') ( xmlHttp = new XMLHttpRequest (); )

No matter who is the first comment out of the strange symbols such as @ cc_on, this is a special JavaScript compiler command, will be XMLHttpRequest in the next issue of the article for a detailed discussion. The core of this code is divided into three steps:

1. To establish a variable xmlHttp to reference the XMLHttpRequest object is about to create.

2. Try to create a Microsoft browser, the object:

o try to create it using the Msxml2.XMLHTTP object.

o If it fails, try again Microsoft.XMLHTTP object.

3. If you still do not have xmlHttp, while non-Microsoft way to create the object.

Finally, xmlHttp should use a valid XMLHttpRequest object, no matter what kind of running browser.

Point on the security note

How about security? Browser now allows users to enhance their level of security to close the JavaScript technology, to disable any browser options. In this case, the code will not work anyway. At this point the question must be properly handled, this requires a separate article to discuss, it is necessary to put the future of (the series is long enough now? Not have to worry about, perhaps you read before the master). Now to be prepared for some strong but not perfect code, for example on a very good grasp of Ajax. We will also be discussed later in more detail.


Connect with Web Forms

What does? In fact a little. JavaScript method of a user input form to capture information and send it to the server, another way to monitor and deal with JavaScript to respond to, and in response to return the value of field settings. All of these will actually be dependent on JavaScript to call the first method, which started the whole process. The most obvious way is in the HTML form to add a button, but this is the way in 2001, you do not think so? Or as a list of 7 The use of JavaScript technology to do it.