1, Introduction to Ajax

(1) What is Ajax?

• Ajax = asynchronous JavaScript and XML;
• Ajax is a technology for creating fast and dynamic web pages;
• Ajax can make web pages update asynchronously by exchanging a small amount of data with the server in the background. This means that a part of the web page can be updated without reloading the whole web page;

(2) Working principle:

(3) Advantages and disadvantages of Ajax:

advantage:

• Achieve asynchronous communication effect
• Achieve local page refresh
• Bring better user experience
• Get data on demand
• Save bandwidth resources

Disadvantages:

• Ajax does not support browser back buttons
• Security issues Ajax exposes the details of interacting with the server
• Support for search engines is weak
• It breaks the exception mechanism of the program

2, Create XMLHttpRquest object

XMLHttpRequest is the foundation of Ajax.

Syntax:

variable = new XMLHttpRequest();

To cope with all modern browsers, including IE5 and IE6, check whether the browser supports XMLHttpRequest objects. If supported, create the XMLHttpRequest object. If not, create ActiveXObject:

Example:

function loadXMLDoc() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari browser execution code
        xmlhttp=new XMLHttpRequest();
    } else {
        // IE6, IE5 browser execution code
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();
}

3, Encapsulating Ajax

//Encapsulating ajax
function ajax(obj) {
      
    //Create XMLHttpRequest object
    if(window.XMLHttpRequest) {
        var xhr = new XMLHttpRequest();
    }else{
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    obj.url = obj.url+'?rand='+Math.random();      //Use js random string to solve IE. the second time, it will get cached data by default, resulting in data not being updated
    
    obj.data = (function(data){                         //A method call that converts a name value pair to a string closure
        var arr = [];
        for(var i in data){
            arr.push(encodeURIComponent(i)+'='+encodeURIComponent(data[i]));
        }
        return arr.join('&');
    })(obj.data);
    if(obj.method === 'get')obj.url += obj.url.indexOf('?') == -1?'?'+obj.data:'&'+obj.data;
    
    if(obj.async === true){
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                callback();
            }
        };
    }

    xhr.open(obj.method,obj.url,obj.async);
    if(obj.method === 'post'){
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');        //Mock form submission
        xhr.send(obj.data);
    }else{
        xhr.send(null);
    }
    if(obj.async === false){
        callback();
    }
        
    function callback(){
        if(xhr.status == 200){
            obj.success(xhr.responseText);                                        //Function callback
        }else{
            alert('Failed to get data!Error code:'+xhr.status+',Error message:'+xhr.statusText);
        }
    }
}

//Call ajax
$(document).click(function(){
    ajax({
    method : 'post',
    url : 'demo.php',
    data : {
        'name' : 'Lee',
        'age' : 100
    },
    success : function (text) {
        alert(text);
    },
    async : true
    });
});

4, Synchronous and asynchronous

Ajax is divided into synchronous (async = false) and asynchronous (async = true) according to different async values

$.ajax({ 
    type: "post", 
    url: "path", 
    cache:false, 
    async:false, 
    dataType: ($.browser.msie) ? "text" : "xml", 

    success: function(xmlobj){ 
        function1(){};
    } 
});
 function2(){};

• async is true by default;

(1) Concept:

• Synchronization request: (false)
  Synchronization request means that after the current request is sent, the browser can do nothing. The subsequent code will not be executed until the request is completed and the data is returned. It is equivalent to queuing. The previous person can handle his own affairs, and the next person can continue to do it.

• Asynchronous request: (true)
  Asynchronous request means that the browser can continue to do anything while sending the request. Ajax sending the request will not affect the page loading and user operation, which is equivalent to walking on two lines without affecting each other.
  The general default value is true, asynchronous. Asynchronous requests can not affect the user's experience effect at all. No matter how long or short the request is, the user is concentrating on operating other contents of the page and will not feel like waiting.

(2) Difference:

• Synchronization is to return the result to the user after all operations are completed. That is, after writing the database, respond to the user. The user experience is not good.
• Asynchronous does not have to wait for all operations to be completed before the corresponding user requests. That is, first respond to user requests, and then slowly write the database. The user experience is better.

5, Ajax related interview questions

• What is Ajax? How to create an Ajax and change the request state from 0-4
• What is the difference between synchronous and asynchronous?
• Briefly describe the process of Ajax
• What if the page code is inconsistent with the requested resource code?
• Explain asynchronous loading
• The difference between GET and POST, when to use POST?
• Does Ajax belong to javascript?
• Ajax get ie compatibility issues
• Ajax get encapsulation
• POST request
• Ajax Post basic usage
• Ajax in jQuery
• Ajax-XML
• Ajax-json
• Will you interact with the background at work? Can you talk about some parameters in the encapsulated ajax?
• Why ajax
• What is the biggest feature of ajax?
• What are the main technologies included in Ajax?
• How are ajax applications different from traditional Web applications
• How many callbacks are there for Ajax requests
• Introduce Prototype's ( ) letter number ， () function, What are the functions of () function, F() function and $A() function
• What are the advantages and disadvantages of Ajax?
• What are the common Ajax frameworks?
• What is the core object of Ajax?
• How to implement Ajax requests
• Ajax solves browser caching problems

If you want to get Ajax interview questions and learn the front end, you can join the Q skirt here: [624369675]
More (Click 👉🏻) Front end learning materials + front end big factory interview questions , free!