Introduction: Ajax knowledge is relatively simple, this article only represents my summary and understanding, if there are mistakes, welcome to correct…

I. Principle:

Ajax works simply by sending an asynchronous request to the server via an XmlHttpRequest object, retrieving data from the server, and then using javascript to manipulate the DOM to update the page. XMLHttpRequest, the core mechanism of Ajax, is a technology that supports asynchronous requests. In simple terms, javascript can make requests to the server and process responses in a timely manner without blocking the user. Achieve no refresh effect.

In human language, “asynchronous communication over HTTP”.

What is synchronous and asynchronous? Synchronous is blocking mode, asynchronous is non-blocking mode. Synchronization refers to a process that executes a request. If it takes a period of time for the request to return information, the process will wait until it receives the return information before continuing to execute the request. Asynchronous means that the process does not have to wait forever, but continues to perform the following operations regardless of the state of the other processes. When a message is returned, the system notifies the process to process it, which improves the execution efficiency.

Ii. Implementation Steps:

A get request

1) Create an XMLHttpRequest object 2) call the open method of the object 3) If it is a GET request, set the callback function onreadyStatechange = callback 4) SendCopy the code

A post request

1) Create an XMLHttpRequest object 2) call the open method of that object 3) callsetRequestHeader (" the content-type ", "application/x - WWW - form - urlencoded"); 4) Set onreadyStatechange = callback 5) SendCopy the code

Iii. Implementation method:

Ajax generic call methods

        <script type="text/javascript">
            $('#bid').click(function(){
				$.ajax({
				url:'3.query.php'DataType: / / address,'json'// Data typetype:'GET',// type timeout:2000,// timeout // request success:function(data,status){ //alert(data); //alert(status); }, // failed/timeout error:function(XMLHttpRequest,textStatus,errorThrown){
					if(textStatus==='timeout'){
						alert('Request timed out');
						setTimeout(function(){
							alert('Rerequest'); }, 2000); } //alert(errorThrown); } }) }) </script>Copy the code

Jquery-ajax get() method

Grammar:

$.get(URL,callback);
Copy the code

Example:

$("button").click(function(){
  	$.get("demo_test.asp".function(data,status){
    		alert("Data: " + data + "\nStatus: " + status);
  	});
});
Copy the code

Jquery-ajax post() method

Grammar:

$.post(URL,data,callback);
Copy the code

Example:

$("button").click(function(){
  	$.post("demo_test_post.asp",
  	{
   	 name:"Donald Duck",
    	city:"Duckburg"
  	},
  	function(data,status){
    		alert("Data: " + data + "\nStatus: " + status);
  	});
});
Copy the code

To learn more about Ajax, check out the following blogs:

Summary – How Ajax works and how to implement it

Conclusion: Ever is to learn to read people’s blog technology, some of them have essence blog also have to play around the CV of solution, so the decided to study the knowledge sharing for everyone, mainly want to go to the sea after less detours, more positive energy blog, if there are any errors, welcome to point out mistakes, only hope that we can learn knowledge in my blog, Solve the problem, then it is enough. Thank you! (Please note the original source for reprint)