看了就会用的ajax

于 2020-09-30 21:54:05 发布
阅读量333 收藏
点赞数
分类专栏： 前端 文章标签： ajax js html java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43401941/article/details/108876842
版权
本文详细介绍了Ajax技术，包括其异步更新网页的核心原理、XMLHttpRequest对象的作用以及一个简单的Ajax示例。进一步讨论了jQuery对Ajax的封装，如.get()、.post()和.ajax()方法，并提供了返回Json字符串的实例。最后，通过一个用户登录校验的例子展示了Ajax在实际应用中的功能。Ajax使得前端可以与后台交互，提高用户体验。
摘要由CSDN通过智能技术生成

1、什么是Ajax？

AJAX = Asynchronous JavaScript and XML (异步的 JavaScript 和 XML)，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新局部网页的技术。了解Ajax历史

Ajax 不是一种新的编程语言，而是一种应用于创建更好更快以及交互性更强的Web应用程序的技术

Ajax的核心是XMLHttpRequest对象（xhr）。XHR为向服务器发送请求和解析服务器响应提供了接口，能够以异步方式从服务器获取新数据。什么是XMLHttpRequest？

2、Ajax示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪造AJAX</title>
</head>
<body>
	
	<div>
		<p>请输入要加载的地址：</p>
		<p>
			<input type="text" id="url" value="https://www.baidu.com" />
			<input type="button" value="提交" onclick="loadPage()" />
		</p>
	</div>
	
	<div>
		<h3>
			加载位置：
		</h3>
		<iframe style="width: 75%; height: 500px" id="iframePosition">
		
		</iframe>
	</div>

<script type="text/javascript">
	function loadPage() {
		var targetURL = document.getElementById('url').value;
		console.log(targetURL);
		document.getElementById('iframePosition').src = targetURL;
	}
</script>
</body>
</html>

  • 访问结果

    image.png

3、jQuery Ajax本质就是XMLHttpRequest，对它进行了封装，方便调用！

1、jQuery.get(...)
	所有参数：
       url: 待载入页面的URL地址
      data: 待发送 Key/value参数
   success: 载入成功时的回调函数
  dataType: 返回内容格式, xml,json,script,text,html
             
2、jQuery.post(...)
	所有参数：
       url: 待载入页面的URL地址
      data: 待发送 Key/value参数
   success: 载入成功时的回调函数
  dataType: 返回内容格式, xml,json,script,text,html

3、jQuery.ajax(...)
    部分参数：
       url: 请求地址
      type: 请求方式，GET,POST(1.9.0之后用method)
   headers: 请求头 
      data: 要发送的数据
contentType: 即将发送信息至服务器的内容编码类型
     async: 是否异步
    timout: 设置请求超时时间（毫秒）
beforeSend: 发送请求前执行的函数（全局）
  complete: 完成之后执行的回调函数（全局）
   success: 成功之后执行的回调函数（全局）
     error: 失败之后执行的回调函数（全局）
   accepts: 通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型  
  dataType: 将服务器端返回的数据转换成指定类型            
  	 "xml": 将服务器端返回的内容转换成xml格式
    "text": 将服务器端返回的内容转成普通文本格式
    "html": 将服务器端返回的内容转成普通文本格式
  "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转成普通文本格式
    "json": 将服务器端返回的内容转换成相应的JavaScript对象

4、返回Json字符串实例：

  • 4.1 返回List集合

    • 4.1.1 在 WebContent下新建一个ajax.jsp文件

      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX请求数据</title>
</head>
<body>
	<input type="button" id="btn" value="获取数据" />
	<table width="40%" align="center">
		<thead>
			<tr>
				<td>姓名</td>
				<td>年龄</td>
			</tr>
		</thead>
		<tbody id="content">
		</tbody>
	</table>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script type="text/javascript">
	$("#btn").click(function () {
		$.ajax({
			url: "ajax",
			type: "get",
			dataType:"json",
			success: function(data) {
				//console.log(data);
				
				/* 将返回的数据加载到tbody中 */
				var dataHtml = "";
				// 遍历 data中的值，然后拼接成 html进行显示
				for (var i=0; i<data.length; i++) {
					dataHtml += "<tr>" + 
								"<td>" + data[i].username + "</td>" +
								"<td>" + data[i].age + "</td>"
								+ "</tr>"
				}
				// 获取 tbody的 ID，将数据添加到 tbody中
				$("#content").html(dataHtml);
			}
		});
	});
	
</script>
</body>
</html>

    • 4.1.2 新建一个 User实体类

      public class User {

	private String username;
	private Integer age;
	
	public User() {
		super();
		// TODO Auto-generated constructor stub
	}
	
	public User(String username, Integer age) {
		super();
		this.username = username;
		this.age = age;
	}

	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public Integer getAge() {
		return age;
	}
	public void setAge(Integer age) {
		this.age = age;
	}
	
	@Override
	public String toString() {
		return "User [username=" + username + ", age=" + age + "]";
	}
}

    • 4.1.3 在 Controller包中新建一个 AjaxController类

      @Controller
public class AjaxController {
	
	@GetMapping("/ajax")
	@ResponseBody
	public List<User> toAjax() {
		
		List<User> list = new ArrayList<User>();
		
		// 伪造用户数据
		User user1 = new User("小明", 16);
		User user2 = new User("小红", 17);
		User user3 = new User("小李", 18);
		// 将用户数据添加到list集合中
		list.add(user1);
		list.add(user2);
		list.add(user3);
		
		return list;
	}
}

      @ResponseBody的作用其实是将java对象转为json格式的数据

      注意：在使用此注解之后不会再走视图处理器，而是直接将数据写入到输入流中，他的效果等同于通过response对象输出指定格式的数据。

      @RequestBody与 @ResponseBody的区别

    • 4.1.4 访问结果

      image.png

5、使用Ajax校验用户登录实例

  • 5.1 在AjaxController类中添加 login()方法

    @PostMapping(value = "/login", produces = "text/html;charset=UTF-8")
	@ResponseBody
	public String login(String username, String password) {
		String message = "";
		if (username != null) {
			if ("admin".equals(username)) {
				message = "OK";
			} else {
				message = "用户名或密码有误！";
			}
		}
		if (password != null) {
			if ("123456".equals(password)) {
				message = "OK";
			} else {
				message = "用户名或密码有误！";
			}
		}
		
		return message;
	}

  • 5.2 新建一个login.jsp页面

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"
        +request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX校验用户登录</title>
</head>
<body>
	
	<form action="" method="post">
		用户名：<input type="text" id="name" name="username" onblur="checkName()" />
		<span id="nameInfo">用户名,4-20位字母或数字,非数字开头</span>
		<br>
		密码：<input type="password" id="pwd" name="password" onblur="checkPwd()" />
		<span id="pwdInfo"></span>
		<br>
		<input type="submit" value="登 录" />
	</form>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script type="text/javascript">
	// 校验用户名
	function checkName() {
		$.post({
			url: "login",
			data: {"username": $("#name").val()},
			success: function(data) {
				if (data.toString() == "OK") { // 信息校验成功
					$("#nameInfo").css("color", "green");
				} else {
					$("#nameInfo").css("color", "red");
				}
				$("#nameInfo").html(data);
			}
		});
	}
	// 校验密码
	function checkPwd() {
		$.post({
			url: "login",
			data: {"password": $("#pwd").val()},
			success: function(data) {
				if (data.toString() == "OK") { // 信息校验成功
					$("#pwdInfo").css("color", "green");
				} else {
					$("#pwdInfo").css("color", "red");
				}
				$("#pwdInfo").html(data);
			}
		});
	}
</script>
</body>
</html>

  • 5.3 访问结果

    • 校验失败

      image.png

    • 校验成功

      image.png

总结：

  • Ajax三部曲

    1. 编写对应处理的Controller，返回消息或者字符串或者json格式的数据；

    2. 编写ajax请求

      1. url: Controller请求

      2. data: 键值对

      3. success: 回调函数

    3. 给Ajax绑定事件，点击 .click，失去焦点onblur，键盘弹起 keyup，键盘按下 keydown

初学爱好者
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值