ajax|web| Program
A. What is Ajax?
This name represents the asynchronous javascript+xmlhttprequest and means that you can set up socket communication between browser-based JavaScript and the server. Ajax is not a new technology, but a combination of possibilities that have been successfully used in a number of successful technologies in modern browsers.
All AJAX applications implement a "rich" ui--this is achieved through JavaScript manipulating the HTML Document Object model and through the XMLHttpRequest of accurate positioning data retrieval. A typical example Ajax application is Google Labs (http://labs.google.com) Google Maps and Google suggest. These applications monitor user input onsite and provide real-time page updates. Most importantly, these events do not need to refresh the page while the user navigates through the map or enters a lookup string.
In fact, the technologies that support these amazing applications have been on the way for some time, although they require sophisticated skills and the skills to use browsers. Some patented products offer similar capabilities-such as Macromedia Flash Plug-ins, Java applets, or. NET runtime-for some time to be practical. The idea of introducing a script component that can be called to a server into a browser already exists in IE 5.0. Firefox and other popular browsers also add to the Explorer Army and support XMLHttpRequest in a built-in object form. With the advent of cross-platform browsers, these technologies have been recognized and formally presented as Ajax in a company called Adaptive Path in March 2004.
In short, because of Google's support and the installation of a bit of available browser technology, and for a "better user experience", everyone is adding client technology to the Web application.
two. The difference between Ajax and traditional applications
A traditional Web application model is actually a basic event--the user is forced to submit a form to achieve a page exchange. That is, the form submission and page transfer are not guaranteed: there is a worse scenario-users need to click again. This is very different from Ajax-—— data crosses the line rather than the full HTML page transmission. This data exchange is implemented through a specific browser object: XMLHttpRequest, and then by the appropriate logic to process the results of each data request, and the specific area of the page rather than the full page is updated. The result is faster speed, less congestion and better information transfer control.
The traditional "Click-refresh" Web application forces the user to interrupt the work process while waiting for the page to reload. By introducing Ajax technology, a client script can talk to the server asynchronously and the user can still keep the input data. In addition to being transparent to the user, such asynchrony means that the server can have more time to process requests.
Traditional Web applications have all the processing agents to the server and force the server to state management. Ajax allows for flexible partitioning of application logic and state management between customers and servers. This eliminates a "Click-refresh" dependency and provides better server scalability. When the state is stored on the client side, you do not have to cross the server to maintain the session or save/end state-its lifespan is defined by the client.
three. ajax--Distributed MVC
Although Ajax applications rely on JavaScript to implement the description layer, the processing power and knowledge base still exist on the server. At this point, Ajax applications are heavily communicating with the Java server-data input/output Web services and Servlets. The difference between a Java EE application with an AJAX-based description layer and a standard Java EE application is, first, that MVC is distributed through lines. By using Ajax, views are local and models and controllers are distributed-which gives developers the flexibility to decide which parts are client-based. Specifically, the local view generates graphics by manipulating the HTML DOM, the controller locally processes user input and expands to the server's processing based on the developer's judgment--via HTTP requests (Web services, XML/RPC, or others) The remote part of the model is downloaded to meet the needs of the client to update the client page in real time, and the status is collected at the client.
In future Ajax articles, we will discuss each of these components in more depth and provide examples of how they are applied together. Now, let's not say much more, so we'll analyze a simple Ajax example in detail.
four. Postal code check and check
We will create an HTML page that contains three input fields (Zip,city and state). We will guarantee that the fields on the page will be populated with the first matching status value as long as the user enters the first three digits of the ZIP code. Once the user has entered the number of all five-bit zip codes, we will immediately decide and populate the corresponding city. If the ZIP code is invalid (not found on the server's database), then we will set the boundary of the ZIP code to red. Such visual cues help the user and become a standard in modern browsers (as an example, when Firefox finds a matching keyword in an HTML page, it highlights the part that matches what you entered in the browser lookup field).
Let's start by creating a simple html:zip,city and state containing three input fields. Note that once a character is entered into the Postal Area Code field field, the Method zipchanged () is invoked. The JavaScript function zipchanged () (see below) calls the function updatestate () when the zip length is 3 o'clock, while the function up-datecity () is called when the zip length is 5 o'clock. and Updatecity () and updatestate () take most of the work agent to another function ask ().
City: State:
The function ask () communicates with the server and assigns a callback function to handle the server's response (see the following code). Later, we'll analyze the dual-featured resolvezip.jsp, which looks for city or state information based on the number of characters in the zip field. Importantly, ask () uses XMLHttpRequest with asynchronous features, so populating the state and city fields or shaded zip field boundaries can be achieved without slowing down the data entry. First, we call Request.open ()-It opens the socket channel with the server, uses an HTTP verb (GET or post) as the first argument and the URL of the data provider as the second argument. The last parameter of Request.open () is set to true-it indicates the asynchronous nature of the request. Note that the request has not been submitted yet. With the invocation of Request.send (), the commit is initiated-this can provide any necessary payload for post. When using asynchronous requests, we must use the Request.onreadystatechanged property to allocate the requested callback function. (If the request is synchronized, we should be able to process the result immediately after calling Request.send, but we can also block the user until the request is complete.) )
