[Web front-end development] The principle, implementation steps and implementation methods of Ajax

Foreword: The knowledge of ajax is relatively simple. This article only represents the summary and understanding of my fellow. If there are mistakes or omissions, please correct me...

1. Principle:
The principle of Ajax is simply to send an asynchronous request to the server through the XmlHttpRequest object, obtain data from the server, and then use javascript to manipulate the DOM to update the page.

XMLHttpRequest is the core mechanism of Ajax and a technology that supports asynchronous requests. Simply put, that is, javascript can make requests and process responses to the server in time without blocking the user. To achieve the effect of no refresh.

What people say is: "HTTP protocol asynchronous communication".

So what is synchronous and asynchronous?

Synchronous is a blocking mode, and asynchronous is a non-blocking mode.

Synchronization means that when a process is executing a request, if the request takes a while to return information, then the process will wait until it receives the return information before continuing to execute;

Asynchronous means that the process does not need to wait forever, but continues to perform the following operations, regardless of the status of other processes. When a message returns, the system will notify the process for processing, which can improve the efficiency of execution.

2. Implementation steps:
get request

1) 创建一个XMLHttpRequest对象
2) 调用该对象的open方法
3) 如果是get请求，设置回调函数onreadystatechange = callback
4) Send

post request

1) 创建一个XMLHttpRequest对象
2) 调用该对象的open方法
3) 调用setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
4) 设置回调函数onreadystatechange = callback
5) Send

Three, implementation:
ajax general call method

<script type="text/javascript">
            $('#bid').click(function(){
				$.ajax({
				url:'3.query.php',//地址
				dataType:'json',//数据类型
				type:'GET',//类型
				timeout:2000,//超时
				//请求成功
				success:function(data,status){
					//alert(data);
					//alert(status);
				},
				//失败/超时
				error:function(XMLHttpRequest,textStatus,errorThrown){
					if(textStatus==='timeout'){
						alert('请求超时');
						setTimeout(function(){
							alert('重新请求');
						},2000);
					}
					//alert(errorThrown);
				}
			})
		})
        </script>

jQuery-AJAX get() method
Syntax:

$.get(URL,callback);
例子：
$("button").click(function(){
  	$.get("demo_test.asp",function(data,status){
    		alert("Data: " + data + "\nStatus: " + status);
  	});
});

jQuery-AJAX post() method
Syntax:

$.post(URL,data,callback);

example:

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

Conclusion: In the past, I used to read other people’s blogs for learning techniques. Many of them included elite blogs and cunning CV Dafa articles. So I decided to share the knowledge I have learned, used and compiled with everyone, mainly because I want to avoid detours , More positive blogs. If there are mistakes or omissions, please correct me. I just hope that everyone can learn knowledge and solve problems in my blog, then it is enough. thank you all!