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

最新推荐文章于 2022-05-11 23:22:01 发布

无问西东。

最新推荐文章于 2022-05-11 23:22:01 发布

阅读量638

点赞数 1

分类专栏： JavaWeb 文章标签： ajax java js

本文链接：https://blog.csdn.net/weixin_43725818/article/details/114120625

版权

JavaWeb 专栏收录该内容

19 篇文章 19 订阅

订阅专栏

文章目录

AJAX请求

AJAX请求

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

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

Ajax请求局部更新：

浏览器地址栏没有变化
原来页面中也没有变化，只是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时就是表现形式上的不同，并且做了很多简化。具体代码如下

<script type="text/javascript">
  $(function(){
  // ajax请求
  $("#ajaxBtn").click(function(){
    $.ajax({		// 使用.ajax方法处理ajax请求，括号内为参数
      url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
      // data:"action=jQueryAjax",
      data:{action:"jQueryAjax"},
      type:"GET",
      success:function (data) {
        // alert("服务器返回的数据是：" + data);
        // var jsonObj = JSON.parse(data);
        $("#msg").html(" ajax 编号：" + data.id + " , 姓名：" + data.name);
      },
      dataType : "json"		// 这里设置服务器返回对象的类型为json类型
    });
  });
});
</script>

相比于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")；

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

无问西东。

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
尚硅谷JavaWeb笔记——Ajax（Ajax从入门到实战）

文章目录AJAX请求使用javascript获取ajax请求（前端页面）使用java处理ajax请求（服务器端处理）使用jQuery处理ajax请求`$.ajax`方法`$.get`方法和`$.post`方法`$.getJSON`方法表单序列化`serialize()`方法AJAX请求AJAX即"Asynchronous Javascript And XML"（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。ajax是一种浏览器通过js异步发起请求，局部更新页面的结束。
复制链接

扫一扫