Ajax 요청을 사용하는 방법

이 글에서는 Ajax 요청 방식에 대해 자세히 소개하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

AJAX는 "Asynchronous Javascript And XML"의 약자로 대화형 웹 애플리케이션을 생성하는 웹 개발 기술을 의미합니다.

AJAX는 페이지의 부분 업데이트를 달성하기 위해 js를 통해 비동기적으로 요청을 시작하는 브라우저입니다. Ajax에서 요청한 부분 업데이트의 경우 브라우저 주소 표시줄은 변경되지 않으며, 부분 업데이트는 원본 페이지의 내용을 삭제하지 않습니다.

jQuery의 기본 AJAX 요청

		<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 请求的示例

						<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>

jQuery 中的 AJAX 请求

				// 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);

                    });

				});

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

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

				});

表单序列化 serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=valueAJAX 요청의 예

rrreeerrreee

🎜rrreee🎜양식 직렬화 serialize()는 양식에 있는 모든 양식 항목의 내용을 가져오고 name=value&name=을 사용할 수 있습니다. 접합 값. 🎜rrreee🎜【추천 학습: 🎜javascript 고급 튜토리얼🎜】🎜

위 내용은 Ajax 요청을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!