3-point summary of Ajax technical principles_AJAX related

This article mainly introduces a 3-point summary of the technical principles of Ajax. Friends in need can refer to

ajax: Asynchronous Javascript and XML Asynchronous Javascript and XML.

is a web development technology for creating interactive web applications.

1.0 Advantages:
1.1 Improved user experience through asynchronous mode.
1.2 Optimizes the transmission between the browser and the server, reducing unnecessary data round-trips and bandwidth usage.
                                                                                                            1.3 The Ajax engine runs on the client side and takes on part of the grouping that was originally borne by the server, thus reducing the server load under a large number of users.

2.0 Working Principle

The core of Ajax is the Javascript object XmlHttpRequest. This object was first referenced in IE5 and is a technology that supports asynchronous requests. XmlHttpRequest allows you to use Javascript to make requests to the server and process the response, rather than blocking the user, achieving a refresh-free effect.
Due to differences between browsers, there are also differences in the way to create XmlHttpRequest objects (mainly differences between IE and other browsers).
2.1 A more general method of creating asynchronous requests:

function CreateXmlHttp() {
//非IE浏览器创建XmlHttpRequest对象的方法
if (window.XmlHttpRequest) {
        xmlhttp = new XmlHttpRequest();
    }
//IE浏览器创建XmlHttpRequest对象的方法
if (window.ActiveXObject) {
try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
catch (e) {
    try {
                xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
             }
    catch (ex) 
            { }
        }
    }
}

2.2 XmlHttpRequest related attributes:

onreadystatechange The event handler for the event triggered each time the state changes.

　　responseText 　　　　 The string form of the data returned from the server process.

　　responseXML 　　　　 DOM-compatible document data object returned from the server process.

Status Text The string information accompanying the status code

ReadyState Object status value

0 (not initialization) Object has been established, but it has not been initialized (the open method has not yet been called)

1 (initialization) Object has been established, and the Send method has not yet been called

#　　　2 (Send data) The send method has been called, but the current status and http header are unknown

　　　3 (Data is being transmitted) Part of the data has been received because the response and http header are incomplete. At this time, it is obtained through responseBody and responseText Some data will have errors,

　　4 (Complete) The data reception is completed. At this time, the complete response data can be obtained through responseXml and responseText

　2.3 Simple Demo example:

function SendAsyncRequest() {
var data = document.getElementById("XXId").value;
    CreateXmlHttp();  //创建XmlHttpRequest对象
if (!xmlhttp) {         //判断对象是否创建成功
       alert("创建xmlhttp对象异常！");
    return false;
    }
    xmlhttp.open("POST", url, false);   //开始发送异步请求
    xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
            document.getElementById("XXShowId").innerHTML = xmlhttp.ResponseText;   //数据接收完毕
        }
    }
    xmlhttp.send();   
}

3.0 Disadvantages:

1. It destroys the normal behavior of the browser's back button. After dynamically updating the page, it is impossible to return to the state of the previous page.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

The above is the detailed content of 3-point summary of Ajax technical principles_AJAX related. For more information, please follow other related articles on the PHP Chinese website!