Ajax Basics (Kitten)

A J Ax

1. What is Ajax: the way to communicate with the server without having to refresh the entire page

2 . A J Basic use of ax 2.1 XMLHttpRequest

L XMLHttpRequest Object
XMLHttpRequest is an object of the XMLHTTP component, which allows AJAX to Exchange data at the same level as a desktop application, without having to refresh the interface every time. , and not every time the data processing work to the server to do, which reduces the server burden and speed up the response, shorten the user waiting time.

use of the 2.2 method

L Communication with the server using XMLHttpRequest instances consists of the following 3 key sections:

L onReadyStateChange Event handler function

L Open method

L Send Method

2.2.1O P en method

L Send Request--Method and property introduction

L open (method, URL, asynch)

The open method of the XMLHttpRequest object allows the programmer to send a request to the server with an Ajax call.

L Method: The request type , a string similar to "GET" or "POST". If you want to retrieve only one file from the server without sending any data, use get (you can send the data in a GET request by appending the query string to the URL, but the data size is limited to 2000 characters). If you need to send data to the server, use post.

In some cases, some browsers cache the results of multiple XMLHttpRequest requests at the same URL. If the response is different for each request, this can result in bad results. Appending the current timestamp to the end of the URL ensures that the URL is unique, thus preventing the browser from caching the results.

L URL: The path string that points to the file on the server you requested. Can be either an absolute path or a relative path.

L Asynch: Indicates whether the request is to be transmitted asynchronously, and the default value is True (async). Specifies true to not wait for the server to be appropriate before reading the following script. Specifies false, when the script process passes this point, to stop until the AJAX request has been executed before proceeding.

2.2.2Send Method

L Send Request--Method and property introduction

L Send (data):

The L open method defines some details of the Ajax request. Send method to send instructions for a request that is already on standby

L Data: The string that will be passed to the server.

L If a GET request is selected , no data is sent, and The Send method is passed null : Request.send (NULL);

When supplying parameters to the Send () method, ensure that the method specified in open () is post, and null is used if no data is sent as part of the request body.

An example of a complete Ajax GET Request:

2.2.3 onreadystatechange

L onReadyStateChange:

The event handler is triggered by the server , not the user

• during Ajax execution, the server notifies the client of the current state of communication. This is accomplished by updating the readyState of the XMLHttpRequest object . Change readyState A property is a way for a server to connect to a client. The ReadyStateChange event is triggered every time the readyState property is changed

The status code of the Ajax request object readyState and The status code returned by the server

L readyState

The L ReadyState Property represents The current state of the Ajax request . Its value is represented by a number.

The L 0 represents uninitialized. The Open method has not been called

L 1 represents loading. The Open method has been called, but the send method has not yet been called

The L 2 indicates that the load is complete. Send has been called. The request has started

The L 3 represents the interaction. The server is sending a response

L 4 stands for completion. Response sent complete

L the readystatechange event will be triggered every time the readyState value is changed. . if the onreadystatechange event handler is assigned to a function, then each change in the ReadyState value causes the function to execute.

L readyState values vary depending on the browser. However, when the request is finished, each browser will readyState The values are set uniformly to 4

L Status

Each response sent by the server also comes with a header message. The three-digit status code is the most important header information in the response sent by the server and is part of the Hypertext Transfer Protocol.

L Common status codes and their meanings:

L 404 Page Not Found (not found)

L 403 no access (forbidden)

L 500 Internal Server error (internal service error)

L 2001 cut Normal (OK)

L 304 has not been modified (not modified) (the server returned a 304 status indicating that the source file was not modified)

L in the xmlhttprequest object, the status code sent by the server is saved in the status attribute. By comparing this value to either a / 304 , you can ensure that the server has sent a successful response

2.3 return Data

L responsetext

L XMLHttpRequest 's responsetext property contains data sent from the server . It is a html,xml or plain text, depending on what the server sends.

when the ReadyState property value becomes 4 o'clock, the ResponseText property is available, indicating that the Ajax request has ended.

L responsexml

L If the server returns XML, the data will be stored in the Responsexml attribute.

The Responsexml property is available only when the server sends data with the correct header information . The MIME type must be text/xml

Ajax Basics (Kitten)