Basic Ajax concepts

Ajax is all called Asynchronous JavaScript and XML (asynchronous JavaScript and XML). With a small amount of data exchange with the server in the background, Ajax enables asynchronous updates to a Web page, allowing updates to parts of the page without reloading the entire page.
At the core of Ajax is the XMLHttpRequest object, which is the key to Ajax implementation - sending asynchronous requests, accepting responses, and performing callbacks.

The process of implementing Ajax:

/*Simple ajax asynchronous refresh
 * 1,Create browser-compatible asynchronous objects by determining ie's compatibility with ajax
 * 2,Determine if the request is a get request or if it is a url address followed by a splice of data to be transferred
 * 3,Set whether request mode request address is asynchronous
 * 4,Determine if the request is a post request and, if so, transfer the data to xh.send();
 * 5,Send Request
 * 6,Listen for state changes
 * 7,Determine whether or not data is received
 * <?xml version="1.0" encoding='utf-8' ?>    //xml Files need to be versioned and formatted
 * */
function ajax(requesttype, requesturl, async, parameter,datatype,callback) {
			//Request mode, Request address, Synchronous/Asynchronous, Data to be submitted, Data transfer format, Callback function requires a parameter data
	//Create an asynchronous object and determine if it is ie and set its compatibility
	var xhr = null;
	if(window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	} else {
		xhr = new ActiveXObject("Microsoft");
	}
	if(requesttype == 'get') {
		requesturl += '?' + encodeURI(parameter);
	}
	xhr.open(requesttype, requesturl, async); //The first parameter indicates how the request is made, the second indicates the request address, and the third indicates whether the request is asynchronous or not
	var datas = null;
	if(requesttype == 'post') { //When the incoming submission is post, set the format required for post submission
		datas = encodeURI(parameter); //Compatibility issues not resolved, Chinese translation encoding format will be transferred on post submission
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //Set post request header
	}
	xhr.send(datas); //Used to pass data when post ing a request and null when get is requested
	xhr.onreadystatechange = function() { // Call this function when the state of the XMLHttpRequest changes
		if(xhr.readyState == 4) { //0:Request uninitialized 1 Server connection established 2:Request received 3:Request processing 4:Request completed and response ready
			if(xhr.status == 200) { //The 200 status code indicates that the request was successful.Commonly used for GET and POST requests
				//ResponsseText gets the response data as a string.ResponsseXML obtains response data in XML form. 
				var data=null;
				if(datatype=='text'){//Determine whether the data format to be transferred is text or json
					data=xhr.responseText;
					callback(data);
				}else if(datatype=='xml'){//Determine if the data format to be transferred is xml
					data=xhr.responseXML;
					callback(data);
				}else if(datatype=='json'){
					data=JSON.parse(xhr.responseText);
					callback(data);
				}
			}
		}
	}
}

Advantages and disadvantages of Ajax

The biggest advantage of using Ajax is the ability to maintain data without updating the entire page.This makes Web applications more responsive to user actions and avoids sending unchanged information over the network. Ajax does not require any browser plug-ins, but requires users to allow JavaScript to execute on the browser.

The main criticism of using Ajax is that it can disrupt browser backtracking and bookmarking.In the case of dynamically updating a page, the user cannot go back to the previous page state because the browser can only record [static pages] in the history.The possible difference between a fully read page and a dynamically modified page is subtle; users often want to click the Back button to cancel their previous action, but this is not possible in Ajax applications.However, developers have come up with ways to solve this problem, most of the way HTML5 works before is to recreate changes on a page by creating or using a hidden IFRAME when a user clicks the back button to access the history.(For example, when a user clicks Back in Google Maps, it searches in a hidden IFRAME and then reflects the search results on the Ajax element to restore the state of the application to that state).

One way before HTML5 was to keep track of the problem of not being able to add a state to a collection or bookmark by using [the URL fragment identifier (often referred to as the anchor point, which is the part after # in the URL) to allow the user to return to a specified application state.(Many browsers allow JavaScript to dynamically update anchors, which allows Ajax applications to update the anchors while updating the display.)HTML5 can then directly manipulate browsing history and store the status of the page as a string, which will be invisibly preserved when the page is added to a Web favorite or bookmark.The above two methods can also solve the problem of not being able to go back at the same time.

When developing Ajax, network latencies -- the interval between a user's request and a server's response -- require careful consideration.Users can get bored if they don't give them a clear response, don't have proper pre-read data, or don't handle XMLHttpRequest properly.A common solution is to use a visual component to tell users that the system is doing background work and reading data and content.