1、 XMLHttpRequest; Web Applications I. INTRODUCTION Ajax is shorthand for Asynchronous JavaScript and XML (and DHTML, and so on). The phrase was coined by Jesse James Garrett of Adaptive Path and is, according to Jesse, not meant to be an acronym. However, Ajax is far more than just a fad; its a power
2、ful approach to building Web sites and its not nearly as hard to learn as an entire new language. Figure 1. The traditional model for web applications (left) compared to the Ajax model (right)Ajax isnt a technology. Its really several technologies, each flourishing in its own right, coming together
3、in powerful new ways. Ajax incorporates:. standards-based presentation using XHTML and CSS;. dynamic display and interaction using the Document Object Model;. data interchange and manipulation using XML and XSLT;. asynchronous data retrieval using XMLHttpRequest;. JavaScript binding everything toget
4、her. The classic web application model works like this:Most user actions in the interface trigger an HTTP request back to a web server. The server does some processing retrieving data, crunching numbers, talking to various legacy systems and then returns an HTML page to the client. Its a model adapt
5、ed from the Webs original use as a hypertext medium, but as fans of the Elements of User Experience know, what makes the Web good for hypertext doesnt necessarily make it good for software applications. This approach makes a lot of technical sense, but it doesnt make for a great user experience. Whi
6、le the server is doing its thing, whats the user doing? Thats right, waiting. And at every step in a task, the user waits some more. Obviously, we wouldnt make users wait around in designing the Web from scratch for applications. Once an interface is loaded, why should the user interaction come to a
7、 halt every time the application needs something from the server? In fact, why should the user see the application go to the server at all?II. MAKE ASYNCHRONOUS REQUESTS WITH JAVASCRIPT AND AJAX Most Web applications use a request/response model that gets an entire HTML page from the server. The res
8、ult is a back-and-forth that usually involves clicking a button, waiting for the server, clicking another button, and then waiting some more. With Ajax and the XMLHttpRequest object, we can use a request/response model that never leaves users waiting for a server to respond. A. Introducing XMLHttpRe
9、quest XMLHttpRequest has actually been around in several browsers for quite a while, which is the key to Web 2.0, Ajax, and pretty much everything. To give a really quick overview, these are just a few of the methods and properties will be used on this object:. open (): Sets up a new request to a se
10、rver. . send (): Sends a request to a server. . abort (): Bails out of the current request. . readyState: Provides the current HTML ready state. . responseText: The text that the server sends back to respond to a request. Each of these methods and properties relate to sending a request and dealing w
11、ith a response. In fact, if we saw every method and property of XMLHttpRequest, they would all relate to that very simple request/response model. So clearly, we wont learn about an amazing new GUI object or some sort of super-secret approach to creating user interaction; programmers will work with s
12、imple requests and simple responses. It might not sound exciting, but careful use of this one object can totally change our applications. First, we need to create a new variable and assign it to an instance of the XMLHttpRequest object. Thats pretty simple in JavaScript, just use the new keyword wit
13、h the object name, like in Fig.2. Figure 2. Create a new XMLHttpRequest objectIn real life, things can go wrong and this code doesnt provide any error-handling. A slightly better approach is to create this object and have it gracefully fail if something goes wrong. For example, many older browsers (
14、believe it or not, people are still using old versions of Netscape Navigator) dont support XMLHttpRequest and Web applications need to let those users know that something has gone wrong. Fig.3 shows how to create this object so if something fails, it throws out a JavaScript alert. Figure 3. Create XMLHttpRequest with some error-handling abilitiesIt turns out that Microsoft supports Ajax, but calls its version of XMLHttpRequest something di
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1