Summary of Ajax usage


I. What is Ajax

Ajax English is called “Asynchr JavsScript and XML” (asynchronous JavaScript and XML). It is a development technology for creating interactive web pages.

2. The Core of Ajax Technology

Ajax is a combination of a series of related technologies. Its core technology includes XMLHttpRequest, JavsScript and DOM technology. Different data formats may use Json or XML technology.

XMLHttpRequest is its core content. It can provide a specific way of communication for JavaScript scripts in pages, thus forming a dynamic interaction effect between the JavaScript scripts of pages and servers. The biggest advantage of XMLHTTPRequest is that the JavaScript scripts in pages can interact with servers directly without refreshing pages, thus realizing page refreshless. Effect.

3. Attribute Description of XMLHttpRequest Method

1. Method Description

Abort () stops the current request

GetAllResponseHeaders () returns all response headers of HTTP requests as key/value pairs

GetResponseHeader (“header”) returns the string value of the specified header

Open (“method”, “URL”, [asyncFlag], [“userName”, [“password”]) establishes a call to the server. Method parameters can be GET, POST, or PUT.

The URL parameter can be a relative or absolute URL. This method also includes three optional parameters, asynchrony, username, and password.

Send (content) sends requests to the server

SetRequestHeader (“header”, “value”) sets the specified header to the value provided. You must call open () before setting any header.

Set up the header and send it with the request (‘post’method must)

XMLHttpRequest Object Attribute Description

2. Method Description

An event trigger for onreadystatechange state change, which triggers the event handler when each state change occurs, usually calling a JavaScript function

The status of the readyState request. There are five preferable values: 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete

The response of the responseText server returns the text of the data.

The response of the responseXML server returns a DOM-compatible XML document object that can be interpreted as a DOM object.

Topics returned by the responseBody server (non-text format)

Data stream returned by responseStream server

HTTP status code for status server (e.g. 404 = Find at the end of the file, 200 = Success, etc.)

Status Text server returns status text information, HTTP status code corresponding text (OK or Not Found, etc.)

Four, Ajax working principle principle

The working principle of AJAX is equivalent to adding an intermediate layer between users and servers, enabling users to operate asynchronously with servers. Not all user requests

Submitted to the server, such as some data validation and data processing are handed to the AJAX engine to do, only when it is determined that new data needs to be read from the server.

The AJAX engine submits requests to the server instead. As shown in the picture:

V. Advantages of Ajax

1. Reduce the burden of the server and improve the performance of the website.

2. No refresh update page, which reduces the time for users to wait for the website to load.

3. User experience is more friendly, which can avoid the appearance of white screen.

4. Ajax is a standardized and widely used technology. Almost all mainstream browsers support this technology. Ye does not need to install plug-ins separately.

5. Ajax can separate pages and applications in the Web and facilitate division of labor and cooperation.

VI. Ajax Disadvantages

1. It can’t support mobile devices very well.

2. Ajax destroys the back button, that is, it destroys the browser’s backoff mechanism.

3. Safety issues. For example: cross-site footstep attacks, SQL injection attacks and credentials-based security vulnerabilities.

4. The support of search engine is weak.

5. The abnormal mechanism of program is destroyed. At least for now, Ajax frameworks like ajax. DLL and ajaxpro. DLL can break the exception mechanism of programs.

It makes debugging difficult.

VII. Principles of Use

1. Ajax applicable scenarios

Form-driven interaction

Deep Tree Navigation

Fast user-to-user communication response

Irrelevant scenarios like voting, yes/no, etc.

Scenarios for filtering and manipulating data

Common text input hints and automated completion scenarios

2. Ajax does not apply to scenarios

Some simple forms


Basic navigation

Replace large amounts of text

Manipulation of Presentation

8. Native AJAX Writing

var XHR=null;
if (window.XMLHttpRequest) {
// Non-IE Kernel
XHR = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE Kernel, where early versions of IE are written differently, can be specifically queried below
XHR = new ActiveXObject("Microsoft.XMLHTTP");
} else {
XHR = null;
if(XHR){"GET", "ajaxServer.action");
XHR.onreadystatechange = function () {
// ReadyState Value Description
// 0. Initialization. XHR object has been created and has not yet been opened
// 1. Load. Open method has been called, but no request has been sent.
// 2. Load completed, request sent completed
// 3. Interaction, partial data can be received
// Status Value Description
// 200:Success
// 404: No files, queries or URls were found
// 500: Server generates internal errors
if (XHR.readyState == 4 && XHR.status == 200) {
// Here you can process the returned content
// Usually it returns JSON or XML data format
// Active release, JS itself will be recycled
XHR = null;

Above is the summary of Ajax’s usage introduced by Xiaobian. I hope it will be helpful to you. If you have any questions, please leave me a message and Xiaobian will reply to you in time. Thank you very much for your support to developpaer.