Java Web basics: 20th Ajax Overview

This article is excerpted from: Java Web development tutorial-getting started and improving (JSP + servlet)

Ajax is short for Asynchronous JavaScript and XML, and involves JavaScript scripts, XHTML and CSS, Dom, XML, xstl, and other technologies. L XHTML and CSS achieve unified and standardized display of data information; l use Dom to achieve rich dynamic display effects on the browser side and interaction with the server; l use XML and xstl for data exchange and processing on the browser and server; l use XMLHTTPRequest object for Asynchronous Data Reading on the browser and server; l use JavaScript scripts for further processing of all data. The core work process of AJAX is as follows: 1. object initialization is mainly to create the XMLHTTPRequest object. the XMLHTTPRequest object is a very core object in Ajax technology and is responsible for setting and sending requests. 2. Send a request, set the response method and data required by the request, and then send the request. 3. The server receives and processes the request. Generally, the servlet receives the request, calls the corresponding service method for processing, and then responds to the user. 4. The client receives the response and calls the previously set response method after receiving the response. 5. The response method modifies the client page content based on the response data. After Ajax technology is used, the interaction process between the client and the server sends changes. Before using Ajax technology, you can set the action attribute of the <form> form, submit the request by using the submit button, or submit the request using the submit method of the Form in JavaScript code. Ajax basically adds JavaScript and XMLHttpRequest objects between web forms and servers. When a user fills out a form, the data is sent to some JavaScript code and then sent through the XMLHTTPRequest object, rather than directly sent to the server. In this process, the forms on the user's screen do not flash, disappear, or delay. JavaScript code sends a request behind the scenes, and the user does not even know how to send the request. Even better, requests are sent asynchronously, that is, JavaScript code (and users) does not have to wait for the response from the server. Therefore, you can continue to input data, scroll the screen, and use applications. The server then returns the data and calls the receiving method defined during the request. This method processes the data and updates the form data, making it feel that the application is executed locally, the form is not submitted, and the page is partial refreshed. The response code can also run a certain calculation on the received data or send a request again. The processing code mainly uses JavaScript technology, and the interaction with the server is mainly completed through the XMLHTTPRequest object. The attributes and functions of the XMLHTTPRequest object are shown in table 4.2. Table 4.2 XMLHttpRequest attributes

Attribute	Function
Onreadystatechange	Event triggers with status changes
Readystate	Object status 0 indicates not initialized 1 indicates reading 2 indicates reading 3 indicates interaction 4 indicates completion
Responsetext	The text of the data returned by the server process, which is a string.
Responsexml	XML document objects compatible with Dom returned by Server Processes
Status	The status code returned by the server, for example, 404 (the file is not found ). 200 (successful ).
Statustext	Status text information returned by the server (OK or not found)

The main methods and functions of the XMLHTTPRequest object are shown in table 4.3. Table 4.3 XMLHTTPRequest object Method

Method	Function
Abort ()	Stop current request
GetAllResponseHeaders ()	Returns all Response Headers of an HTTP request as key/value pairs.
GetResponseHeader ("headerlabel ")	Returns the string value of the specified header.
Open ("method", "URL" [, asyncflag [, "username" [, "Password"]	Connection access to the server. The method parameter can use get, post, and put. The URL parameter can either use an absolute address or a relative address, the asyncflag parameter is used to specify whether the synchronous or asynchronous mode is used during the call. The default value is true, that is, the asynchronous mode is used. If the parameter value is false, the interaction with the server is implemented in synchronous mode, that is, wait for the server to return a response. Username specifies the user name during connection, and password indicates the password.
Send (content)	Sends a request to the server. The available parameters include DOM objects and strings.
SetRequestHeader ("label", "value ")	Set the header and send it together with the request, that is, specify the header as the provided value. Note that you must use the open () method before setting the header. The first parameter is the header name, and the second parameter is the value in the header.

 

Last Lecture: 19th about JavaScript processing (2)Next Lecture: 21st about the basic process of Ajax InteractionLi xucheng csdn blog: Why? U= 124362 & C = 7be8ba2b6f3b6cc5