Detailed explanation of AJAX working principles and advantages and disadvantages, and the advantages and disadvantages of ajax Working Principles

Detailed explanation of AJAX working principles and advantages and disadvantages, and the advantages and disadvantages of ajax Working Principles

AJAX is a technology used to create fast dynamic web pages. By performing a small amount of data exchange with the server in the background, AJAX can implement asynchronous updates on webpages. This means that you can update a part of a webpage without reloading the entire webpage.

I. ajax Technologies

We all know that ajax is not a new technology, but a combination of several original technologies. It is composed of the following technologies.

CSS and XHTML are used for representation.

Use the DOM model for interaction and dynamic display.

Use XMLHttpRequest to perform asynchronous communication with the server.

Use javascript to bind and call.

In the above technical procedures, apart from XmlHttpRequest objects, all other technologies are based on web standards and have been widely used. Although XMLHttpRequest has not yet been adopted by W3C, but it is already a standard of fact, because almost all mainstream browsers currently support it.

Ii. How to Create ajax

The principle of Ajax is simply to use the XmlHttpRequest object to send asynchronous requests to the server, obtain data from the server, and then use javascript to operate the DOM to update the page. The most critical step is to obtain request data from the server. Native ajax creation can be divided into the following four steps.

1. Create an XMLHttpRequest object

All modern browsers (IE7 +, Firefox, Chrome, Safari, and Opera) have built-in XMLHttpRequest objects.

Syntax for creating an XMLHttpRequest object:

var xhr = new XMLHttpRequest();

Earlier versions of Internet Explorer (IE5 and IE6) Use ActiveX objects:

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

To handle all modern browsers, including IE5 and IE6, check whether the browser supports XMLHttpRequest objects. If yes, create an XMLHttpRequest object. If not, ActiveXObject is created:

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2. Prepare the request

Initialize the XMLHttpRequest object and accept three parameters:

xhr.open(method,url,async);

The first parameter represents a string of the Request type. Its value can be GET or POST.

GET request:

xhr.open("GET",demo.php?name=tsrot&age=24,true);

POST request:

xhr.open("POST",demo.php,true);

The second parameter is the URL to be sent as the request destination.

The third parameter is true or false, indicating whether the request is sent in asynchronous or synchronous mode. (The default value is true. Generally, false is not recommended)

False: requests sent in synchronous mode will suspend all javascript code execution until the server gets a response. If the Browser fails to connect to the network or download the file, the page will remain suspended.
True: when a request is sent in asynchronous mode, the browser can continue to load the page and execute other javascript code while sending and receiving data from the request object.

3. Send a request

Xhr. send ();

Generally, parameters submitted using Ajax are simple strings. You can directly use the GET method to write the parameters to be submitted to the url parameters of the open method, in this case, the send method parameter is null or null.

GET request:

xhr.open("GET",demo.php?name=tsrot&age=24,true);xhr.send(null);

POST request:

To POST data like an HTML form, use setRequestHeader () to add an HTTP header. Then specify the data you want to send in the send () method:

xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send("name="+userName+"&age="+userAge);

4. Handling responses

xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}

Onreadystatechange event:

When a request is sent to the server, we need to execute some response-based tasks. When the readyState changes, the onreadystatechange event is triggered.

ReadyState attributes:

0: the object has been created, but the open () method has not been called.

1: The open () method has been called, but no request has been sent.

2: The request has been sent, the title and status have been received, and is available.

3: receive the response from the server.

4: After receiving the request data, the request has been completed.

Status attribute:

200: "OK"

404: Page not found

ResponseText: Get Response Data in string format

ResponseXML: Get Response Data in XML format

The return value is generally a json string and can be converted to a JSON object using JSON. parse (xhr. responseText.

5. Complete example

Demo.html

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
};
xhr.open("GET","./data.json",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(JSON.parse(xhr.responseText).name);
}
}

Data. json

{"name":"tsrot","age":24}

Iii. ajax application scenarios

Scenario 1. Data Verification

Scenario 2. Retrieve data as needed

Scenario 3. automatically update the page

Iv. ajax advantages and disadvantages

Advantages:

1. The page is refreshing and the user experience is good.

2. asynchronous communication for faster response.

3. Reduced redundant requests, reducing the server load

4. Based on standardized and widely supported technologies, you do not need to download plug-ins or applets.

Disadvantages:

1. ajax kills the back button, which destroys the browser's back-up mechanism.

2. Some security problems exist.

3. weak support for search engines.

4. destroys the abnormal mechanism of the program.

5. direct access from URLs is unavailable.

The above is a detailed explanation of the working principles, advantages and disadvantages of AJAX introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave a message and the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!