什么是Ajax？

最新推荐文章于 2024-10-30 18:24:25 发布

Gudiid

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量103

点赞数

分类专栏： JavaEE tomcat 文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/m0_56141117/article/details/120339027

版权

tomcat 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

JavaEE

13 篇文章 0 订阅

订阅专栏

什么是Ajax？

- 1. 什么是 Ajax
- 2. JQuery中Ajax请求

1. 什么是 Ajax

Ajax即是Asynchronous Javascript And XML(异步JavaScript和XML)是一种交互式网页应用的网页开发技术

Ajax是浏览器发起一种异步请求,局部更新页面技术

原生的Ajax请求
1、我们首先要创建XMLHttpRequest
2、调用open方法设置请求参数
3、在send方法前绑定XMLHttpRequest事件, 处理请求完成后的操作
4、调用send方法发送请求

创建一个htl页面发送请求

		<script type="text/javascript">
			function ajaxRequest() {
// 				1、我们首先要创建XMLHttpRequest
                var xmlHttpRequest = new XMLHttpRequest();
// 				2、调用open方法设置请求参数
                //3个参数分别是: 请求方式、url、是否是异步请求
                xmlHttpRequest.open("get","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=ajaxReq",true);


// 				4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
                xmlHttpRequest.onreadystatechange = function () {
                    if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                        var responseText = xmlHttpRequest.responseText;
                        
                        //将json字符串转换为json对象
                        var jsonObj = JSON.parse(responseText);
                        
                        document.getElementById("div01").innerText = "编号: "+jsonObj.id + "姓名: " + jsonObj.name;
                    }
                }
// 				3、调用send方法发送请求
                xmlHttpRequest.send();
			}
		</script>

创建Servlet程序接收请求

public class AjaxServlet extends BaseServlet {
    protected void ajaxReq(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("ajax请求过来了");

        //创建一个对象
        Person person = new Person(1,"Tim");
        Gson gson = new Gson();
        String jsonStr = gson.toJson(person);

        //通过响应头写出json字符串
        response.getWriter().write(jsonStr);
    }
}

从上面看出,使用原生的javascript创建Ajax请求非常不方便,而且会有浏览器兼容问题,那我们在工作中如何处理Ajax请求,我们一般会使用javascript框架来解决,比如我们使用jQuery来进行处理

2. JQuery中Ajax请求

JQuery的4个Ajax请求
$.ajax
$.get
$.post
$.getJSON
serialize()表单序列化方法

在JQuery中与Ajax有关的有4个方法

$.ajax请求参数:

url : 请求的地址
type : 请求的方式
data : 请求的参数
success : 请求成功,响应的回调函数
dataType : 数据类型(text、html、script、xml、json)

$.get请求参数:

url : 请求的地址
data : 请求的参数
callback : 请求成功,回调函数
type : 数据类型(text、html、script、xml、json)

$.post请求参数:

url : 请求的地址
data : 请求的参数
callback : 请求成功,回调函数
type : 返回内容格式(text、html、script、xml、json)

$getJSON

url : 待载入页面的 URL 地址
data : 请求的参数
callback : 请求成功的回调函数

以下是测试JQuery的Ajax请求回调输出

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#ajaxBtn").click(function(){
                    
                    // ajax请求
                    $.ajax({
                        url : "http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
                        type : "POST",
                        data : "action=ajaxReq",
                        success : function (data) {
                            $("#ajaxReq").html("编号: "+ data.id + ", 名称: " + data.name);
                        },
                        dataType : "json"
                    });

				});

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

				    //请求方式为GET的json传输
					$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=ajaxReq",function (get) {
                        $("#ajaxReq").html("get 编号: "+ get.id + ", 名称: " + get.name);
                    },"json");
					
				});
				
				// ajax--post请求
				$("#postBtn").click(function(){
					// post请求
                    $.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=ajaxReq",function (get) {
                        $("#ajaxReq").html("post 编号: "+ get.id + ", 名称: " + get.name);
                    },"json");
					
				});

				// ajax--getJson请求
				$("#getJSONBtn").click(function(){
					// getJSON()方法: 请求方式为GET、数据类型为JSON
                    $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=ajaxReq",function (get) {
                        $("#ajaxReq").html("getJSON 编号: "+ get.id + ", 名称: " + get.name);
                    });

				});

				// ajax请求
				$("#submit").click(function(){
					// serialize()方法能够把表单序列化
                    var serializeForm = $("#form01").serialize();
                    alert(serializeForm); //username=user123&password=qwerrt&single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1
                    $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=ajaxReq&"+serializeForm,function (get) {
                        $("#ajaxReq").html("serializeForm&getJSON 编号: "+ get.id + ", 名称: " + get.name);
                    });
				});
			});
		</script>
	</head>
	<body>
		<div>
			<button id="ajaxBtn">$.ajax请求</button>
			<button id="getBtn">$.get请求</button>
			<button id="postBtn">$.post请求</button>
			<button id="getJSONBtn">$.getJSON请求</button>
		</div>
		<br/><br/>
        <div id="ajaxReq"></div>
		<form id="form01" >
			用户名：<input name="username" type="text" /><br/>
			密码：<input name="password" type="password" /><br/>
			下拉单选：<select name="single">
			  	<option value="Single">Single</option>
			  	<option value="Single2">Single2</option>
			</select><br/>
		  	下拉多选：
		  	<select name="multiple" multiple="multiple">
		    	<option selected="selected" value="Multiple">Multiple</option>
		    	<option value="Multiple2">Multiple2</option>
		    	<option selected="selected" value="Multiple3">Multiple3</option>
		  	</select><br/>
		  	复选：
		 	<input type="checkbox" name="check" value="check1"/> check1
		 	<input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
		 	单选：
		 	<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
		 	<input type="radio" name="radio" value="radio2"/> radio2<br/>
		</form>			
		<button id="submit">提交--serialize()</button>
	</body>
</html>