Ajax: asynchronous JavaScript and XML, using JavaScript to execute asynchronous network requests

If you want users to stay on the current page and send out new HTTP requests at the same time, you must send this new request with JavaScript. After receiving the data, you can use JavaScript to update the page. In this way, users will feel that they are still on the current page, but the data can be updated constantly.

AJAX requests are executed asynchronously, that is, to get a response through a callback function

Currently, AJAX mainly relies on XMLHttpRequest objects:

		function success(text){
			var textarea = document.getElementById('test-response-text');
			textarea.value = text;
		}
		
		function fail(code){
			var textarea = document.getElementById('test-response-text');
			textarea.value = 'Error code:'+code;
		}
		var request = new XMLHttpRequest();//New XMLHttpRequest
		
		response.onreadystatechange = function(){//When the state changes, the function is called back
			if(request.readyState === 4){//Completed successfully
			//Judge the response result:
			if(request.status === 20){
				//Success, get the response text through responseText:
				return success(request.responseText);
			}else{
				//Failure, determine the failure reason according to the response code:
				return fail(request.status);
			}
			}else{
				//HTTP request continues
			}
		};
		
		//Send request:
		request.open('GET','/api/categories');
		request.send();
		
		alert('Request sent, please wait for response...');*/

For the lower version of IE, you need to use the ActiveXObject object:

		function success(text) {
		    var textarea = document.getElementById('test-ie-response-text');
		    textarea.value = text;
		}
		
		function fail(code) {
		    var textarea = document.getElementById('test-ie-response-text');
		    textarea.value = 'Error code: ' + code;
		}
		
		var request = new ActiveXObject('Microsoft.XMLHTTP'); // New Microsoft.XMLHTTP object
		
		request.onreadystatechange = function () { // When the state changes, the function is called back
		    if (request.readyState === 4) { // Completed successfully
		        // Judge the response result:
		        if (request.status === 200) {
		            // Success, get the response text through responseText:
		            return success(request.responseText);
		        } else {
		            // Failure, determine the failure reason according to the response code:
		            return fail(request.status);
		        }
		    } else {
		        // HTTP request continues
		    }
		}
		
		// Send request:
		request.open('GET', '/api/categories');
		request.send();
		
		alert('Request sent, please wait for response...');*/

Standard writing and IE writing are mixed together. You can write as follows:

var request;
			if(window.XMLhttpRequest){
				request = new XMLHttpRequest();
			}else{
				request = new ActiveXObject('Microsoft.XMLHTTP');
			}

Package 1 of AJAX:

function ajax(options){
	var xhr = null;
	var params = formsParams(options.data);
	//create object
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE compatible
	}
	//link
	if(options.type =="GET"){
		xhr.open(options.type,options.url+ "?" + params,options.async);
		xhr.send(null);
	}else if(options.type=="POST"){
		xhr.open(options.type,options.url,options.async);
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xhr.send(params);
	}
	xhr.onreadystatechange = function(){
		if(xhr.readyState ==4&& xhr.status ==200){
			options.success(xhr.responseText);
		}
	}
	function formsParams(data){
		var arr = [];
		for(var prop in data){
			arr.push(prop + "=" data[prop]);
		}
		return arr.join("&");
	}
}