尚硅谷JavaWeb笔记——Ajax（Ajax从入门到实战）

ゝ一纸荒年。 2022-11-03 01:35 363阅读 0赞

### 文章目录 ###

*  AJAX请求
 *   *  使用javascript获取ajax请求（前端页面）
     *  使用java处理ajax请求（服务器端处理）
     *  使用jQuery处理ajax请求
     *   *  \`$.ajax\`方法
         *  \`$.get\`方法和\`$.post\`方法
         *  \`$.getJSON\`方法
         *  表单序列化\`serialize()\`方法

# AJAX请求 #

AJAX即"Asynchronous Javascript And XML"（异步JavaScript和XML），是指一种**创建交互式网页应用**的网页开发技术。

ajax是一种浏览器通过js异步发起请求，局部更新页面的结束。

Ajax请求**局部更新**：

1.  浏览器地址栏没有变化
2.  原来页面中也没有变化，只是**ajax设置的目标标签内容发生变化**

Ajax请求的异步性：不会等待服务器其他请求的执行，每个ajax请求都是单独一个子任务，任务之间不会相互影响。

## 使用javascript获取ajax请求（前端页面） ##

给`button`按钮绑定单击事件`function()`，单击事件的内容为请求ajax请求`function ajaxRequest(){}`。请求ajax请求总共分为四步

Step1：获取`XMLHttpRequest`对象

Step2：调用Step1中对象的`open`方法，并传递参数。参数的三个类型分别是：**请求方式，请求地址，是否异步**

Step3：绑定`onreadystatechange`事件，用于设置当**成功（失败）请求响应**时该**执行什么操作**

Step4：调用send方法发送请求

<!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">
    			// ajax 是一种浏览器异步发起请求。局部更新页面的技术。
    
    			// 在这里使用javaScript语言发起Ajax请求，访问服务器AjaxServlet中javaScriptAjax
    			function ajaxRequest() { 
    // 1、我们首先要创建XMLHttpRequest
    				var xmlHttpRequest = new XMLHttpRequest();
    
    // 2、调用open方法设置请求参数
    				xmlHttpRequest.open("GET", "http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax", true);
    //
    // 3、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
    				xmlHttpRequest.onreadystatechange = function () { 
    					if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) { 
                // 由于servlet层传递过来的数据时json的String类型数据，这里需要将其转换为json数据
    						var jsonObj = JSON.parse(xmlHttpRequest.responseText);
    						// 把响应的数据显示在页面上
    						document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " 姓名：" + jsonObj.name;
    					}		
    				}
    //
    // 4、调用send方法发送请求
    				xmlHttpRequest.send();
    
    				alert("我是最后一行的代码");
    			}
    		</script>
    	</head>
    	<body>	
    		<button onclick="ajaxRequest()">ajax request</button>
    		<div id="div01"></div>
    	</body>
    </html>

附：`readyState`的不同数字对应的状态

*  0——请求未初始化
 *  1——服务器连接已建立
 *  2——请求已接受
 *  3——请求处理中
 *  4——请求已完成，且响应已就绪

status的两种状态

*  200——ok
 *  404——未找到页面

## 使用java处理ajax请求（服务器端处理） ##

当服务器接收到前端页面传来的ajax请求后，需要对该ajax请求进行响应（**主要是servlet程序进行响应**）。

在servlet程序中，需要使用json来完成数据传递。因此需要在`ajaxServlet`程序中，完成将数据通过`gson`对象的方法，将数据转换为字符串，并写进响应`response`中返回给前端web页面

protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
      System.out.println("AjaxServlet 的 javaScriptAjax()方法。Ajax请求过来······");
      Person person = new Person(1, " gjs ");
    
      // json格式的字符串
      Gson gson = new Gson();
    
      String personJsonString = gson.toJson(person);
    
      response.getWriter().write(personJsonString);
    }

**小结：web页面中执行ajax请求时，服务器接收到ajax请求后，将请求数据封装进入json中再发送回去，前端页面根据是否成功获取数据进行判断，如果成功则按要求将数据展示，否则不展示。**

## 使用jQuery处理ajax请求 ##

### `$.ajax`方法 ###

（5个重要参数）

*  `url`：表示请求的地址
 *  `type`：表示请求的类型GET或POST请求
 *  `data`：表示发送给服务器的数据，格式有如下两种
    
     *  name=value&name=value
     *  \{Key:value\}
 *  `success`：请求响应，响应的毁掉函数
 *  `dataType`：响应的数据类型，有如下几种类型：**xml，html，script，Json**。

由于jQuery就是JavaScript的框架，因此jQuery在处理ajax时就是表现形式上的不同，并且做了很多简化。具体代码如下

相比于JavaScript，使用jQuery少了获取`XMLHttpRequest`对象，判断是否成功的操作，这些内容都被封装起来了。

这里也给出`servlet`中相关方法的源码

protected void jQueryAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
      System.out.println("AjaxServlet 的 jQueryAjax()方法。Ajax请求过来······");
      Person person = new Person(1, " jQueryAjax->value1- ");
    
      // json格式的字符串
      Gson gson = new Gson();
    
      String personJsonString = gson.toJson(person);
    
      response.getWriter().write(personJsonString);
    }

### `$.get`方法和`$.post`方法 ###

`$.get`方法和`$.post`方法是在`$.ajax`方法的基础上进一步封装。相比于`$.ajax`，前者只涉及四个重要参数。因为**通过名字已经限定了是GET方法还是POST方法**。

*  `url`：请求的url
 *  `data`：发送的数据
 *  `callback`：成功的回调函数
 *  `type`：返回值的类型

`$.get`方法和`$.post`方法使用上和`$.ajax`相似，就是少了个参数，代码如下

// ajax--get请求
    $("#getBtn").click(function(){ 
      $.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet", //url地址
            "action=jQueryGet", 																	 // data参数
            function (data) { $("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);}, // 成功的回调函数
            "json");																							//返回值类型
    });
    
    
    // ajax--post请求
    $("#postBtn").click(function(){ 
      // post请求
      $.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet", 	//url地址
            "action=jQueryPost", 																		// data参数
            function (data) { $("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);}, // 成功的回调函数
            "json");																								//返回值类型
    });

`Servlet`程序如下

protected void jQueryGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
      System.out.println("AjaxServlet 的 jQueryGet()方法。Ajax请求过来······");
      Person person = new Person(1, " jQueryPGet->value1- ");
      // json格式的字符串
      Gson gson = new Gson();
      String personJsonString = gson.toJson(person);
      response.getWriter().write(personJsonString);
    }
    
    protected void jQueryPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
      System.out.println("AjaxServlet 的 jQueryPost()方法。Ajax请求过来······");
      Person person = new Person(1, " -jQueryPost->value1- ");
      // json格式的字符串
      Gson gson = new Gson();
      String personJsonString = gson.toJson(person);
      response.getWriter().write(personJsonString);
    }

### `$.getJSON`方法 ###

这里相当于限定请求方式为get，返回数据为JSON，因此该方法只有三个参数

*  `url`：请求的url地址
 *  `data`：发送给服务器的数据
 *  `callback`：成功的回调函数

页面中代码如下

$("#getJSONBtn").click(function () { 
    
      $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet", 	// url
                "action=jQueryGetJSON", 																// 请求参数
                function (data) { $("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);// 回调函数
      });
    });

`Servlet`中的代码

protected void jQueryGetJSON(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
      System.out.println("AjaxServlet 的 jQueryGetJSON()方法。Ajax请求过来······");
      Person person = new Person(1, " -jQueryGetJSON->value1- ");
      // json格式的字符串
      Gson gson = new Gson();
      String personJsonString = gson.toJson(person);
      response.getWriter().write(personJsonString);
    }

### 表单序列化`serialize()`方法 ###

`serialize()`方法可以把**表单项的内容都获取到**，并以`name=value&name=value`的形式**进行拼接**。例如对于如下的表单项

<form id="form01">
        用户名：<input name="username" type="text"/><br/>
        密码：<input name="password" type="password"/><br/>
    </form>
    <button id="submit">提交--serialize()</button>

给提交按钮绑定`ajax`序列化请求方法

// ajax请求
    $("#submit").click(function () { 
      // 把参数序列化
      $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet", 
                "action=jQuerySerialize&" + $("#form01").serialize(), 
                function (data) { 
        $("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
      });
    });

参数序列化后，将**序列化后的结果拼接在请求参数之后**，就可以实现**带请求参数的GET请求地址**，后端的Servlet程序就可以通过

request.getParameter("xxx")；

获取到对应参数，实现相关操作。