What is the principle of ajax? Analysis of common attributes and principles of ajax (summary)

This article mainly talks about my summary, some questions and some answers about ajax, I hope it can help everyone. Let us read this article together now

First of all, ajax is the full name of Asynchronous JavaScript and XML, Asynchronous means asynchronous, which is different from the traditional web.

What is synchronization and what is asynchronous?

Synchronization means that after the sender sends the data, it must wait for the receiver to receive the data and respond before proceeding to the next step.

If it is asynchronous, the sender does not need to wait for the receiver to respond after sending the data, and can proceed to the next step.

To give a vivid example, synchronization is like A asking B to go to dinner. A sends an invitation and asks B to eat together. At this time, he must wait for B to respond. , to eat or not to eat, A decides whether to eat alone or wait for B to go with him; asynchronously is like getting off work, A tells B that A is going to eat, and then leaves, regardless of whether B makes any response.

Ajax Principle

Simply put, through The XMLHttpRequest object sends an asynchronous request to the server. After obtaining the data from the server, it then operates the DOM node through JS.

##XMLHttpRequest object

##Method:

1.open(request type, url, boolean)

2.send() parameters For the data sent as the request body, if the request body does not need to send data, pass in null

3.abort() cancels the asynchronous request

4.getAllResponseHeaders()Return all response headers of the HTTP request as key/value pairs

5.getResponseHeader("header")Returns the string value of the specified header

6.setRequestHeader("header", "value")Set the specified header to the provided value. open() must be called before setting any headers. Set the header and send it with the request (The 'post' method is required)

Commonly used attributes of ajax:

1 .readyState represents the current active stage of the request/response process (0: not initialized, the open method has not been called; 1: started, the open method has been called, the send method has not been called; 2: sent: send has been called, no response has been received; 3 : Receive, part of the response data has been received; 4. Completed, can be used on the client)

2.onreadystatechange This method will be called once when the value of readyState changes (If you want to see more, go to PHP Chinese website AJAX Development Manual column to learn)

3.responseText The text returned as the response body

4.responseXML Save the response type as "text/ xml" or "application/xml" response data XML DOM document

5.status Response HTTP status

6.statusText Http status description

Create one below XHR object:

function createXHR(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttprequest();
}else if(typeof ActiveXObject != "undefined"){
if(typeof arguments.callee.sctiveXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
for(i =0;i<versions.length;i<len;i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}catch(ex){
跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("No XHR object available");
}
}
var xhr = createXHR();
xhr.onreadyststechange = function(){
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status <300) || 304){
alert(xhr.responseText);
}else{
alert("请求位成功"+ xhr.status);
}
}
};
xhr.open("get","aaa.txt",true);
xhr.send(null);

ajax Advantages:

1. Update data without refreshing, reduce user waiting time, better user experience

2. Communicate with the server asynchronously, without interrupting the user, and the response is faster

3. Some of the burden of the server can be transferred to the client,Use the client's idle ability to process, reducing the burden on the server and bandwidth , saving space and broadband rental costs. And to reduce the burden on the server, the principle of AJAX is to "get data on demand", which can minimize the burden on the server caused by redundant requests and responses and improve site performance.

5. Based on standardization, widely supported

ajax disadvantages

1. The forward and back functions are destroyed. Users often use the back button to cancel the previous operation, but this cannot be achieved using ajax. You can use Gmail to solve this problem. It just uses a relatively stupid but effective method, that is, when the user clicks the back button to access the history, by creating or using a hidden IFRAME to reproduce the changes on the page.

2. Security issues. ajax Technology is like establishing a direct channel to enterprise data. This allows developers to inadvertently expose more data and server logic than before. The logic of ajax can be hidden from client-side security scanning technology, allowing hackers to establish new attacks from remote servers. It is also subject to attacks such as cross-site scripting attacks and SQL injections.

3. Weak support for search engines

4. Some handheld devices cannot be well supported, etc.

This article ends here (if you want to see more, go to the PHP Chinese website

AJAX User Manual column), if you have any questions, you can leave a message below.

The above is the detailed content of What is the principle of ajax? Analysis of common attributes and principles of ajax (summary). For more information, please follow other related articles on the PHP Chinese website!