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
search
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){
XHR.open("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
console.log(XHR.responseText);
// Active release, JS itself will be recycled
XHR = null;
}
};
XHR.send();
}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.