Talk about your understanding of aja (1,2)

Time:2020-11-28

What is Ajax

AJAX is the abbreviation of asynchronous JavaScript and XML. This technology can request additional data from the server without unloading the whole page, which will bring good user experience. The traditional HTTP request process is like this: the browser sends a request to the server – 〉 the server generates a response based on the data from the browser – 〉 the server returns the response to the browser 〉 the browser refreshes the whole page and displays the latest data. This process is synchronous and executed in sequence.

Ajax uses asynchronous data transfer (HTTP) between browser and web server Request) to get data from the server. Here, asynchronous refers to separate request and loading from the current browser page. This means that you can receive the data from the server through JavaScript without reloading the whole web page, and then operate DOM to update some part of the web page with new data. The most intuitive feeling of using Ajax is to get new data from the server The data doesn’t need to refresh the page to wait.

Understanding of Ajax (1)

AJAX is short for asynchronous JavaScript and XML. Function: through Ajax, you can use JavaScript statements to call the XMLHttpRequest object, communicate directly with the server, and exchange data with the server without overloading the page. 1. Create XML

AJAX is short for asynchronous JavaScript and XML.

Function: through Ajax, you can use JavaScript statements to call the XMLHttpRequest object, communicate directly with the server, and exchange data with the server without overloading the page.

1. Creating an XMLHttpRequest object

    var xhr =  new XMLHttpRequest()

For previous versions of IE (IE7 and below), new activexobject (\“ Microsoft.XMLHTTP \, new activexobject (\ “msxml2. Xmlhttp \”)

2. Common properties and methods of XMLHttpRequest object

attribute

ReadyState returns the current status code of the xmlhttp request
State returns the HTTP status code of the current request
Statustext returns the text corresponding to the HTTP status code

method

Onreadystatechange monitors readyState and state states

Understanding of Ajax (2)

Ajax method: loading remote data through HTTP request
Get method: loading information through remote HTTP get requests
Method: Post requests remote loading of information via http

1. Creating an XMLHttpRequest object


function createXHR() {
   return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
}

2. Convert key value pairs to concatenation strings


  function params(data) {
   var a = [];
   for (var i in data) {
    a.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
   }
   return a.join("&");
  }

3. Encapsulating Ajax methods

Parameters

Method request method get and post default get
Data key value pair{ key:value }
URL
Cache “cache” true “and” false “default true with cache
Success success error exception

function ajax(args) {
   var xhr = createXHR();
   var data = http://www.cnblogs.com/kuikui/archive/2012/01/12/params(args.data);
   if (/get/i.test( args.method )){// when get mode is used, the data is directly spliced after the URL
    args.url += "?" + data;
   }
   if (! args.cache ){// no cache
    if ( args.url.indexOf ("?") < 0) {// when there is no parameter data
     args.url += "?";
    }
    args.url += "&" + (new Date()); // Math.random();
   }
   xhr.open(args.method, args.url, true);
   xhr.onreadystatechange = function () {
    if (4 == xhr.readyState && 200 == xhr.status) {
     args.success(xhr.responseText, xhr.responseXML);
    }
    else {
     args.error();
    }
   }
   if (/post/i.test(args.method)) {
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(data);
   }
   else {
    xhr.send();