How to use Ajax requests

This article will give you a detailed introduction to the Ajax request method. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

AJAX stands for "Asynchronous Javascript And XML" (Asynchronous JavaScript and XML), which refers to a web development technology for creating interactive web applications.

AJAX is a browser that initiates a request through js asynchronously to achieve local update of the page. For partial updates requested by Ajax, the browser address bar will not change, and partial updates will not discard the content of the original page.

NativeAJAX Example of request

		<script>
			//这个按钮绑定的函数，使用js发起Ajax请求，访问服务器AjaxServlet中JavaScriptAjax
			function ajaxRequest() {// 				1、我们首先要创建XMLHttpRequest
				var xmlHttpRequest = new XMLHttpRequest();// 				2、调用open方法设置请求参数
				xmlHttpRequest.open("GET","http://localhost:8080/json_Ajax_i18n/ajaxServlet?action=javaScriptAjax",true);// 				3、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
				xmlHttpRequest.onreadystatechange = function () {
					if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){

					    var jsonObj = JSON.parse(xmlHttpRequest.responseText);
					    //把响应的数据显示在页面上
					    document.getElementById("p01").innerText = "编号：" + jsonObj.id + ",姓名：" + jsonObj.name ;

					}
                }// 				4、调用send方法发送请求
                xmlHttpRequest.send();
			}
		</script>

AJAX Request in jQuery

						<script type="text/javascript">
			//这个按钮绑定的函数，使用js发起Ajax请求，访问服务器AjaxServlet中JavaScriptAjax
			function ajaxRequest() {
// 				1、我们首先要创建XMLHttpRequest
				var xmlHttpRequest = new XMLHttpRequest();

// 				2、调用open方法设置请求参数
				xmlHttpRequest.open("GET","http://localhost:8080/json_Ajax_i18n/ajaxServlet?action=javaScriptAjax",true);

// 				3、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
				xmlHttpRequest.onreadystatechange = function () {
					if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){

					    var jsonObj = JSON.parse(xmlHttpRequest.responseText);
					    //把响应的数据显示在页面上
					    document.getElementById("div01").innerText = "编号：" + jsonObj.id + ",姓名：" + jsonObj.name ;

					}
                }

// 				4、调用send方法发送请求
                xmlHttpRequest.send();
			}
		</script>

				// ajax--get请求
				$("#getBtn").click(function(){

					$.get("http://localhost:8080/json_Ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {

                        alert("服务器返回的数据是：" + data);

                    },"json");
					
				});
				
				// ajax--post请求
				$("#postBtn").click(function(){
					// post请求
                    $.post("http://localhost:8080/json_Ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {

                        alert("服务器返回的数据是：" + data);

                    },"json");
					
				});

				// ajax--getJson请求
				$("#getJSONBtn").click(function(){
					// 调用
                    $.getJSON("http://localhost:8080/json_Ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {

                        alert("服务器返回的数据是：" + data);

                    });

				});

Form serializationserialize()You can get the contents of all form items in the form and use ## Concatenate them in the form of #name=value&name=value.

				// ajax请求
				$("#submit").click(function(){
					// 把参数序列化
					//$("#form01").serialize();

                    $.getJSON("http://localhost:8080/json_Ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
						
                    });

				});

[Recommended learning:

javascript advanced tutorial]

The above is the detailed content of How to use Ajax requests. For more information, please follow other related articles on the PHP Chinese website!