AJAX one

AJAX = Asynchronous JavaScript and XML.

By exchanging small amounts of data with the server behind the scenes, AJAX can make asynchronous page updates. This means that, for certain parts of the page to be updated without reloading the entire page.

Traditional web page (do not use AJAX) If you need to update the entire page surface content, essential overloaded.

How AJAX work

Browser (an event occurs - Create XMLHttRequest objects - send HttpRequest) -> Internet-> server

(Processing HttpRequest- create a response back to the browser) -> Browser (using data processing JS returned, updates)

XMLHttpRequest object (asynchronous interaction data with the server)
the JavaScript / the DOM (display / retrieval information)
the CSS (style setting data)
(the format used for data transmission) XML

XMLHttpRequest is the foundation of AJAX.

MLHttpRequest object. All modern browsers support XMLHttpRequest object (IE5 and IE6 use ActiveXObject).

<script>
        var xhr;
        if (window.XMLHttpRequest){
        
        xhr = new XMLHttpRequest();
}    else{
             xhr = new ActiveXObject("Microsoft.XMLHTTP”);
}
</script>

send request

XMLHttpRequest.onreadystatechange: EventHandler when readyState property changes call.

XMLHttpRequest.responseText: Returns a DOMString, DOMString comprising the response to the request, if the request has not yet been sent successfully or, null is returned.

XMLHttpRequest.setRequestHeader (): Set the HTTP request header. You must open () later, send () call setRequestHeader () this method before.

xmlhttp.onreadystatechange = function (){
       if (xmlhttp.readyState == 4 && xmlhttp.status ==200){
       console.log(xmlhttp);
       document.getElementById("myDiv").innerHTML =     xmlhttp.responseText;    
  }
}
xmlhttp.open("GET","2_2.php",true);
xmlhttp.send();

Server response

The results can be used in response to the XMLHttpRequest object
the responseText
the responseXML

Guess you like