How does ajax work? Introduction to the working principle of ajax and analysis of its advantages and disadvantages

This article mainly introduces the definition of ajax and the principle of ajax working. Finally, there is an introduction to the advantages and disadvantages of ajax. Let's get into this article together

1. Concept: What is AJAX
AJAX stands for "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), which is A web development technology for creating interactive web applications.
2. Why use him?
The biggest advantage: communicate with the server to maintain the original page status without refreshing the entire page. To put it simply, there are two situations when browsing the web. Click, 1, white screen, wait to jump to Another page. 2. The page does not refresh, and new content appears locally to obtain a better user experience.
3. Basic principles
Look at the picture first
XHR is equivalent to a communications soldier, responsible for the communication transmission between the client and the server. When there is a war, the front position cannot just wait for the signal soldiers to deliver the message and do nothing else. Therefore, the front position is still doing its own thing and sends the signal soldiers to request the rear command's order (server). The commander issues the order and the signal soldier then The command is passed to the front position (client), and then the client renders the data to the page.
3. So what is XHR? (How AJAX works)
His full name is XMLHttpRequest. AJAX sends asynchronous requests through the browser's built-in object XHMHttpResquest. Asynchronous requests will not hinder any operations on the front line (client).
4. Understand asynchronous and synchronicity
I just talked about asynchronous, so what is synchronization? Synchronization means that the front position and the communication soldiers request data from the server. I don’t start rendering until the communication soldiers request the data. The page has been waiting with a white screen during the request process.
5.What are the attributes of the XMLHttpResquest object?
Since AJAX handles asynchronous requests through the browser's built-in object XMLHttpRequest, let's first understand its attributes
Property                                                                                                                                                                                                                                                                                                      . Request not yet Initialization
1>. The server link has been established
2>.The request has been received
3>.The request is being processed
4>.The request has been completed and the response is ready
3.responseText Return to request Data text
4.responseXML returns XML document object
5.status returns status code such as 404 200


6.Create XMLHttpRequest object and send AJAX request

In order to cope with all modern browsers, detect whether the XMLHttpRequest object is supported (if you want to see more, go to the PHP Chinese website AJAX Development Manual column to learn)

 window.onload = function(){
    //1.创建XMLHttpRequest对象考虑兼容性
    var xhr = null
    if(window.XMLHttpRequest){         //现代浏览器
        xhr = new XMLHttpRequest()
    }else{
       xhr = new ActiveXObject('Microsoft.XMLHTTP')//IE5/6
    }
 }
 console.log('状态A'+xhr.readyState)  //2.设置请求方式。第一种方式get请求（2）post请求
  var url = '数据'
  //get请求，true异步请求，false，同步
  xhr.open('get', url, true)
  console.log('状态B'+xhr.readyState)  /*（2）post请求 必须添加请求头
     var url = '数据'
     xhr.open('post', url, true)
     xhr.setRequestHander('Content-type','application/x-www-form-urlencoded')
   *///3.发送请求
  xhr.send()
  console.log('状态C'+xhr.readyState)//4.回调函数
   xhr.onreadyStatechange = function() {
       if(xhr.readyState == 4 && xhr.status == 200) {
       console.log(xhr.resposeText)  //字符串
       //console.log(xhr.resposeXML) }
}

Advantages of AJAX:

1. The biggest advantage is that the page does not need to be refreshed and communicates with the server within the page, which is a very good user experience. 2. Use an asynchronous method to communicate with the server without interrupting the operation. 3. The work previously burdened by the server can be transferred to the client, reducing the server and bandwidth, and minimizing redundant requests.

Disadvantages of AJAX:

1.AJAX kills the Back and History functions, which is a destruction of the browser mechanism. In the case of dynamically updated pages, users cannot return to the previous page state because the browser can only remember static pages in the history. The difference between a page that has been read completely and a page that has been dynamically modified is very subtle; users will often expect that clicking the back button will cancel their previous operation, but in an Ajax application, this will not be possible. . 2. Security issues Technology also brings new security threats to IT companies. Ajax technology is like establishing a direct channel for corporate data. This allows developers to inadvertently expose more data and server logic than before. Ajax logic can be hidden from client-side security scanning technology, allowing hackers to create new attacks from remote servers. Ajax is also difficult to avoid some known security weaknesses, such as cross-site scripting attacks, SQL injection attacks and credentials-based security vulnerabilities.
3. The support for search engines is relatively weak. If used improperly, AJAX will increase network data traffic, thereby reducing the performance of the entire system.
4. Some handheld devices (such as mobile phones, PDAs, etc.) currently do not support ajax very well. For example, when we open a website using ajax technology on the mobile browser, it currently does not support it. Of course, , this issue has little to do with us. (At this time we can use other plug-ins instead)

This article ends here (if you want to see more, go to the PHP Chinese website AJAX User Manual column to learn). If you have any questions, you can leave a message below.

The above is the detailed content of How does ajax work? Introduction to the working principle of ajax and analysis of its advantages and disadvantages. For more information, please follow other related articles on the PHP Chinese website!