Encapsulation and Principle Explanation of js Native Ajax

Principle and concept

AJAX, or "Asynchronous Javascript And XML" (asynchronous JavaScript and XML), is a technology for creating fast dynamic web pages.

Dynamic web page: refers to the web page that can modify data at any time through server language combined with database.

Static web pages, with the generation of html code, the content and display of the page will basically not change-unless you modify the page code.

AJAX = asynchronous JavaScript and XML (a subset of the Standard Generalized Markup Language).

AJAX is the art of exchanging data with the server and updating parts of a web page without reloading the entire page.

Advantages of Ajax

AJAX uses asynchronous data transfer (HTTP request) between the browser and the Web server, which enables a Web page to request a small amount of information from the server instead of the entire page.

AJAX makes Internet applications smaller, faster, and more friendly.

AJAX is a browser technology independent of Web server software.

AJAX is based on the following Web standards:

The Web standard used by JavaScriptXMLHTMLCSS in AJAX is well defined and supported by all major browsers. The AJAX application is browser and platform independent.

Web applications have many advantages over desktop applications; They can reach a wide range of users, and they are easier to install and maintain, and easier to develop.

However, Internet applications are not as perfect and friendly as traditional desktop applications.

With AJAX, Internet applications can become more perfect and friendly.

Asynchronous Ajax

Asynchronous: Compared with synchronization, the timer we have learned is also asynchronous, that is, other programs do not need to wait for the timer's code to be completely executed before executing the code. Because the timer may execute code in an infinite loop, if you wait for the timer to finish, other code will never run. Therefore, asynchronous programming is done independently of other codes. That is, the ajax mentioned above is independent of the browser platform.

Tip: Events are also executed asynchronously. Events do not execute code until something happens.
Synchronization: Most of the code we wrote before is executed synchronously except timers and events. That is, the same code block is executed from top to bottom.

Working Principle of Ajax

Ajax Core Object XMLHttpRequest
var _hr=new window.XMLHttpRequest();
Through this instantiated object to the server
Make a request and wait for the server to respond
After the server response is completed, the client will process it again
Data for the server-side response.
There are 5 states in the process of Ajax requesting a server
0: Indicates that before the request server
1: Indicates opening the remote server link corresponding open method
2: Indicates the corresponding send method for sending data to the server
3: Indicates that the server response process is not over
4: Indicates that the server response is complete

/**
 *  Create XMLHttpRequest Object 
 * @param _method  Request mode : post||get
 * @param _url  Remote server address 
 * @param _async  Asynchronous or not 
 * @param _parameter  Send data to the server 
 * @param _callBack  Callback function 
 */
function parameterDeal(_parameter){
  var _sender="";
  if(_parameter instanceof Object){
    for(var k in _parameter){
      _sender+=k+"="+_parameter[k]+"&";
    }
    return _sender.replace(/\&$/g,"");
  }else{
    return _parameter;
  }
}
function createXMLHttpRequest(){
  try{
    return new window.XMLHttpRequest();
  }catch(e){
    try{
      return new ActiveXObject("MSXML2.XMLHTTP.6.0");
    }catch(e){
      try{
        return new ActiveXObject("MSXML2.XMLHTTP.3.0");
      }catch(e){
        try{
          return new ActiveXObject("MSXML2.XMLHTTP");
        }catch(e){
          try{
            return new ActiveXObject("Microsoft.XMLHTTP");
          }catch(e){
            throw new Error(" The browser version is too low , Has been eliminated by most markets , Please upgrade !!!");
            return;
          }
        }
      }
    }
  }
}
function ajaxRequest(_method,_url,_async,_parameter,_callBack){
  var _ajax=createXMLHttpRequest();
  if(_ajax){
    _ajax.onreadystatechange=function(){
      if(_ajax.readyState==4 && _ajax.status==200){
        _callBack(_ajax.responseText);
      }
    }
    _ajax.open(_method,_url,_async);
    _ajax.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8");
    _ajax.send(parameterDeal(_parameter));
  }
}

This is the encapsulated native Ajax, in the process of use, only need to create a new js file, put this code in, don't change anything, after the introduction of HTML page, call ajaxRequest () function, pass in the parameters you want, and you can use it normally.

This method is purely personal encapsulation, and friends who have more streamlined methods are welcome to share with me!