Methods for implementing Ajax in native JavaScript

First, I shared with you the native JavaScript implementation Ajax code for your reference. The specific content is as follows

 var getXmlHttpRequest = function() { if (window.XMLHttpRequest) { //Mainstream browsers provide XMLHttpRequest object return new XMLHttpRequest(); } else if (window.ActiveXObject) { //The lower version of IE browser does not provide XMLHttpRequest object//So you must use the specific implementation of IE browser ActiveXObject return new ActiveXObject("Microsoft.XMLHttpRequest"); }};var xhr = getXmlHttpRequest();xhr.onreadystatechange = function() { console.log(xhr.readyState); if (xhr.readyState === 3 && xhr.status === 200) { //Execute the operation after successful acquisition//The data is in xhr.responseText console.log(xhr.responseText); }};xhr.open("get", "data.php", true);xhr.send("");

Below I will share with you several ways to implement native Ajax using JavaScript.

Before implementing ajax, you must create an XMLHttpRequest object. If the browser that creates this object is not supported, you need to create an ActiveXObject. The specific method is as follows:

 var xmlHttp; function createxmlHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest(); }

(1) The following uses the xmlHttp created above to implement the simplest ajax get request:

 function doGet(url){ // Note that when passing parameter values, it is best to use encodeURI to handle it, in case of garbled code createxmlHttpRequest(); xmlHttp.open("GET",url); xmlHttp.send(null); xmlHttp.onreadystatechange = function() { if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { alert('success'); } else { alert('fail'); } } }

(2) Use the xmlHttp created above to implement the simplest ajax post request:

 function doPost(url,data){ // Note that when passing parameter values, it is best to use encodeURI to handle it, in case of garbled code createxmlHttpRequest(); xmlHttp.open("POST",url); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send(data); xmlHttp.onreadystatechange = function() { if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { alert('success'); } else { alert('fail'); } } }

The above is all about this article, I hope it will be helpful to everyone's learning.