学习Ajax

最新推荐文章于 2024-07-07 12:38:54 发布
最新推荐文章于 2024-07-07 12:38:54 发布
阅读量455 收藏 5
点赞数 7
文章标签： 学习 ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45621552/article/details/139824576
版权

一、Ajax

1.1 简介

Ajax：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML

他不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法

Ajax指的是刷新局部页面的技术

1.2 应用场景
  • 搜索
  • 地图
  • 校验
  • 获取数据
1.3 交互模型

avatar

传统的Web交互方式

avatar

Ajax的交互方式

avatar

二、 Ajax使用详解

2.1 XMLHttpRequest对象

该对象用于在前台与服务器交换数据。意味着可以在不重新加载整个网页的情况下，对网页的进行局部更新

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）

//获取XMLHttpRequest对象
function getXMLHttpRequest() {
	var xmlHttp;
	if (window.XMLHttpRequest) {// 新浏览器
		xmlHttp = new XMLHttpRequest();
	}else if (window. ActiveXObject) {// IE6及以下浏览器
		xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP");
	}
	return xmlHttp;
}
2.2 与服务器交换数据 open/send

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send()

函数描述示例
open(method,url,async);初始化请求参数(请求方式,请求地址,是否异步)xmlhttp.open(“GET”,“url”,true);
send();发送请求xmlhttp.send();
//发送异步的Post请求
function sendAjaxPost() {
	var xmlHttp = getXMLHttpRequest();
	//初始化请求参数
	xmlHttp.open("POST","MyServlet",true);
	//post需要设置请求头
    xmlHttp.setRequestHeader(
        "Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
	//发送请求，携带数据
	xmlHttp.send("username=abc&password=123");
} 

//发送异步的Get请求
function sendAjaxGet() {
	var xmlHttp = getXMLHttpRequest();
	//初始化请求参数
	xmlHttp.open("GET","MyServlet?username=abc&password=123",true);
	//发送请求，携带数据
	xmlHttp.send();
}
2.3 onreadystatechange事件

请求被发送到服务器时，我们需要执行一些基于响应的任务

函数描述
onreadystatechange每当 readyState 属性改变时，就会调用该函数。
属性描述
readyState存有 XMLHttpRequest 的状态。
从 0 到 4 发生变化:
0 - 请求未初始化服务器
1 - 连接已建立
2 - 请求已接收
3 - 请求处理中
4 - 请求已完成，且响应已就绪
status存有响应的状态。
200 - OK
404 - 未找到页面
//发送异步的Post请求
function sendAjaxPost() {
	
	var xmlHttp = getXMLHttpRequest();
	
	//每当readyState改变时，就会触发 onreadystatechange事件
	xmlHttp.onreadystatechange = function() {
		console.log(xmlHttp.readyState);//打印XMLHttpRequest的状态
		console.log(xmlHttp.status + "xx");//打印响应的状态
	}
	xmlHttp.open("POST","MyServlet",true);
    xmlHttp.setRequestHeader(
        "Content-Type","application/x-www-form-urlencoded;charset-UTF-8");
	xmlHttp.send("username=abc&password=123");
}

三、实战案例

3.1 验证用户名

验证用户名的是否可以注册

<body>

	<h1>注册页面</h1>
	<form action="RegisterServlet" method="post">
		账号：<input name="username" type="text" placeholder="请输入账号..." 			
                  onblur="validateUsername(this)"/><font></font><br/>
		密码：<input name="password" type="password" placeholder="请输入密码..."/><br/>
		<input type="submit" value="注册"/>
	</form>
	<script type="text/javascript">
		var font = document.getElementsByTagName("font")[0];
		function validateUsername(obj) {	
			var xmlHttp = getXMLHttpRequest();
			xmlHttp.onreadystatechange = function() {
				if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
					//获取来自响应的信息
					var text = xmlHttp.responseText;
					if(text == "1"){
						font.color = "red";
						font.innerText = "抱歉，账号已被注册";
					}else if(text == "0"){
						font.color = "green";
						font.innerText = "恭喜，账号可用";
					}
				}
			}
			xmlHttp.open("POST","MyServlet",true);
		    xmlHttp.setRequestHeader(
                "Content-Type","application/x-www-form-urlencoded;charset-UTF-8");
			xmlHttp.send("username="+obj.value);
		} 
		function getXMLHttpRequest() {
			var xmlHttp;
			if (window.XMLHttpRequest) {// 新浏览器
				xmlHttp = new XMLHttpRequest();
			}else if (window. ActiveXObject) {// IE6及以下浏览器
				xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP");
			}
			return xmlHttp;
		}
	</script>
</body>

public class MyServlet extends HttpServlet{
	private static final long serialVersionUID = 1L;
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		
		String username = request.getParameter("username");
		
		if(username.equals("hhy")){//已有此用户名
			response.getWriter().write("1");
		}else{//未有此用户名
			response.getWriter().write("0");
		}
	}
}
3.2 级联效果

通过选择省从而关联出城市的数据

前端发送Ajax异步请求到服务器中获取对应的省市JSON数据，再在前端解析、适配到页面

  1. 添加数据库
  2. 导入数据库驱动包、Druid连接池
  3. 添加省、市实体类
public class Province{

	private int id;//id
	private String code;//省份编号
	private String name;//省份名

	public Province() {
	}
	public Province(int id, String code, String name) {
		this.id = id;
		this.code = code;
		this.name = name;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getCode() {
		return code;
	}
	public void setCode(String code) {
		this.code = code;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	@Override
	public String toString() {
		return "Province [id=" + id + ", code=" + code + ", name=" + name + "]";
	}
}

public class City{

	private int id;//id
	private String code;//城市编号
	private String name;//城市名
	private String parentCode;//所属省份编号
	public City() {
	}
	public City(int id, String code, String name, String parentCode) {
		this.id = id;
		this.code = code;
		this.name = name;
		this.parentCode = parentCode;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getCode() {
		return code;
	}
	public void setCode(String code) {
		this.code = code;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getParentCode() {
		return parentCode;
	}
	public void setParentCode(String parentCode) {
		this.parentCode = parentCode;
	}
	@Override
	public String toString() {
		return "City [id=" + id + ", code=" + code + ", name=" + name + ", parentCode=" + parentCode + "]";
	}
}
  1. 添加数据库工具类
public class DBUtil{

	private static DruidDataSource source;

	static{

		Properties properties = new Properties();
		try {	
            properties.load(DBUtil.class.getClassLoader()
                                .getResourceAsStream("dbconfig.properties"));
		} catch (IOException e) {
			e.printStackTrace();
		}
		String username = properties.getProperty("username");
		String password = properties.getProperty("password");
		String url = properties.getProperty("url");
		String driver = properties.getProperty("driver");

		source = new DruidDataSource();
		source.setDriverClassName(driver);
		source.setUrl(url);
		source.setUsername(username);
		source.setPassword(password);
	}
	public static Connection getConnection() {
		try {
			return source.getConnection();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return null;
	}
	public static void close(Connection conn,Statement statement,ResultSet resultSet){
		if(resultSet != null){
			try {
				resultSet.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
		if(statement != null){
			try {
				statement.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
		if(conn != null){
			try {
				conn.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
	}
}
  1. 编写数据持久层
public class UserDao{

	//获取所有省份
	public List<Province> getProvinceList(){

		List<Province> provinceList = new ArrayList<>();

		Connection conn = null;
		PreparedStatement statement = null;
		ResultSet resultSet = null;
		try {
			conn = DBUtil.getConnection();
			String sql = "select * from provinces where parent_code=?";
			statement = conn.prepareStatement(sql);
			statement.setString(1, "01");
			resultSet = statement.executeQuery();
			while (resultSet.next()) {
				int id = resultSet.getInt("id");
				String code = resultSet.getString("code");
				String name = resultSet.getString("name");
				Province province = new Province(id, code, name);
				provinceList.add(province);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			DBUtil.close(conn, statement, resultSet);
		}
		return provinceList;
	}

	//获取省份对应城市
	public List<City> getCityList(String parentCode){
		List<City> cityList = new ArrayList<>();

		Connection conn = null;
		PreparedStatement statement = null;
		ResultSet resultSet = null;
		try {
			conn = DBUtil.getConnection();
			String sql = "select * from provinces where parent_code=?";
			statement = conn.prepareStatement(sql);
			statement.setString(1, parentCode);
			resultSet = statement.executeQuery();
			while (resultSet.next()) {
				int id = resultSet.getInt("id");
				String code = resultSet.getString("code");
				String name = resultSet.getString("name");
				City city = new City(id, code, name, parentCode);
				cityList.add(city);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			DBUtil.close(conn, statement, resultSet);
		}
		return cityList;
	}
}
  1. 编写Servlet
public class UserServlet extends HttpServlet{
	private static final long serialVersionUID = 1L;
	private UserDao useDao = new UserDao();

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");

		String action = request.getParameter("action");
		String parentCode = request.getParameter("parentCode");
		
		if(action.equals("getProvinceList")){
			
			List<Province> provinceList = useDao.getProvinceList();
			String jsonStr = JSON.toJSONString(provinceList);
			response.getWriter().write(jsonStr);
			
		}else if(action.equals("getCityList")){
			
			List<City> cityList = useDao.getCityList(parentCode);
			String jsonStr = JSON.toJSONString(cityList);
			response.getWriter().write(jsonStr);
		}
	}
}
  1. 编写前端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h1>省市联动</h1>
	<select id="province"></select>省
	<select id="city"></select>市
	
	<script type="text/javascript">
		var province = document.getElementById("province");
		var city = document.getElementById("city");
		
		//获取省列表的函数
		function getProvinceList() {
			var xmlHttp = getXMLHttpRequest();
			xmlHttp.onreadystatechange = function() {
				if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
					
					var text = xmlHttp.responseText;
					//JSON解析
					var provinceList = eval(text);
					//控制是否添加城市
					var bool = true;
					//循环添加省份
					for(var i = 0;i<provinceList.length;i++){
						var option = document.createElement("option");
						option.innerText = provinceList[i].name;
						option.value = provinceList[i].code;
						province.add(option);
						if(bool){//第一个省就添加对应的市
							getCityList(provinceList[i].code);
							bool = false;
						}
					}
					
				}
			}
			xmlHttp.open("GET","UserServlet?action=getProvinceList",true);
			xmlHttp.send();
		}
		
		//获取市列表的函数
		function getCityList(parentCode) {
			var xmlHttp = getXMLHttpRequest();
			xmlHttp.onreadystatechange = function() {
				if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
					var text = xmlHttp.responseText;
					//JSON解析
					var cityList = eval(text);
					//先把城市列表置空
					city.length = 0;
					//循环添加城市
					for(var i = 0;i<cityList.length;i++){
						var option = document.createElement("option");
						option.innerText = cityList[i].name;
						option.value = cityList[i].code;
						city.add(option);
					}

				}
			}
			xmlHttp.open("POST","UserServlet",true);
		    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset-UTF-8");
			xmlHttp.send("action=getCityList&parentCode=" + parentCode);
		}
		
		//一开始就调用获取省列表的函数
		getProvinceList();
		
		//给省绑定改变时间
		province.onchange = function (){
			getCityList(this.value);
		} 
		
		function getXMLHttpRequest() {
			var xmlHttp;
			if (window.XMLHttpRequest) {// 新浏览器
				xmlHttp = new XMLHttpRequest();
			}else if (window. ActiveXObject) {// IE6及以下浏览器
				xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP");
			}
			return xmlHttp;
		}
	</script>

</body>
</html>

四、总结

使用Ajax+JSON，前后端分离，大大提高了工作效率和用户体验

阿船·
关注
  • 7
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
零基础学习AJAX之AJAX框架
12-11
上文（零基础学习AJAX之AJAX的简介和基础）对ajax异步请求服务器做了详细的介绍和基础应用，可以看出，ajax的一些过程是相对不变的。不必要每次发送请求都写一遍发送代码，一些ajax开发人员已经把他们的过程封装成...
学习ajax用的各种文档
01-08
本资料包“学习ajax用的各种文档”提供了丰富的资源，帮助学习者深入理解和掌握Ajax的核心概念和应用。** ### 一、Ajax基础 1. **异步通信**: Ajax的核心是JavaScript对象XMLHttpRequest，它允许在后台与服务器通信...
小白学习ajax
热门推荐
cj521zhihui的博客
08-25 1万+
HTTP学习 1.概念 1.客户端与服务器超本文无状态传输协议 2.http默认端口80 3.https 默认端口 443 2.请求方法 1.options：测试有哪些方法可以用 2.get：获取服务信息 3.Post： 修改与更新，新增服务器信息 4.put：新增 5.delete：删除 6.head 只返回头信息 7.trace：回显头信息，用来测试 8.connect： 管道形式连接 3.请求过程 建立tcp连接 客户端发送请求头+请求体 服务器响应请求头+请求体 ，关闭tcp连接 客户端
AJAX 学习
weixin_43466639的博客
05-04 1278
AJAX 一、基本理论 1、定义 AJAX 是一种从网页访问 Web 服务器的异步无刷新技术。 异步：同步是必须等待请求返回结果之后，才能继续其他操作。异步是可以在等待的时间里去继续其他操作，当响应就绪后对响应进行处理。 无刷新：按需加载。（当点击查看更多的时候，就会结合DOM向服务器请求将数据追加进去，并没有刷新页面） 无刷新场景：如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然
学习ajax前需要掌握哪些知识,掌握 Ajax(一): Ajax 入门简介
weixin_39571938的博客
08-07 1429
加入一些 JavaScript得到 XMLHttpRequest 的句柄后，其他的 JavaScript 代码就非常简单了。事实上，我们将使用 JavaScript 代码完成非常基本的任务：获取表单数据：JavaScript 代码很容易从 HTML 表单中抽取数据并发送到服务器。修改表单上的数据：更新表单也很简单，从设置字段值到迅速替换图像。解析 HTML 和 XML：使用 JavaScript ...
从零开始学习 AJAX：超详细！15 分钟搞定 AJAX 原理和使用方法
weixin_56242678的博客
05-27 8861
本文将会介绍 AJAX 的原理和使用方法，并帮助你在短时间内掌握这一重要的前端技术。我们将从 AJAX 的基本概念入手，深入探讨 AJAX 的核心技术——XMLHttpRequest 对象以及常用的数据交互方式。通过本文的学习，你将能够轻松地了解 AJAX 的工作方式和应用场景，从而为你的 Web 应用程序添加更多的交互性和实时性。
学习Ajax的优秀网站
06-25 594
1.Ajax Daddy http://www.ajaxdaddy.com/Ajax Daddy收集了大量漂亮的Web2.0工具，其中一个使用的功能就是，在你把某个Ajax/Javascript实例应用在自己的网站上之前，你可以在它上面先看看效果演示。 2.AjaxRain http://www.ajaxrain.com/ AjaxRain有很多完美整合AJAX,...
ajax学习笔记
11-30
ajax学习笔记。。。。。。。。。。。。。。。。。。。。。。
学习ajax编写的ajax.js样例
08-16
学习ajax编写的ajax.js样例
css样式学习样例之边框
最新发布
abments的博客
07-07 490
css样式学习样例之边框
学习小记-Netty
weixin_42029860的博客
07-06 141
Netty是由JBOSS个java开源框架，Netty提供异步的、事件驱动的网络应用程序框架，用以快速开发高性能、高可靠性的网络服务器和客户端程序。
短链接学习day2
weixin_63374588的博客
07-05 841
需要注意的是，转换过程中，BeanUtil.toBean()方法通过反射机制创建了目标类型的实例，并将数据源对象的属性值复制到目标对象中。但是为了防止redis的主节点挂掉后，从节点变成主节点时，有些数据还没复制，就会导致脏数据，就会可能导致用户名重复，所以为了防止这个情况，我们需要将username设置为唯一索引，让数据库兜底。因为用户名不是特别重要的数据，如果说我设置用户名为 aaa，系统返回我不可用，那我大可以在 aaa 的基础上再加一个a，也就是 aaaa。一定要记得写枚举的时候是用逗号分割。
黑马点评学习过程汇总——Cookie \ Session \ Token的区别
weixin_45791946的博客
07-02 387
在后续的请求中，前端发往后端的请求中都携带token，后端拿到token后进行jwt的解密并验证signature，如果检验成功信息没有被篡改，就会放行。，自动存储session信息到cookie中。Token不依赖于session和cookie，对集群和前后端分离架构友好。前端发起登录请求到后端，后端对前端携带来的信息进行认证，认证成功后会生成。我们往session中存储用户信息，服务器端保存session并通过。头部，Payload负载，Signature签名 ）并以。（4）Session的弊端。
昇思25天学习打卡营第4天|应用实践
u013563715的博客
07-04 783
BERT全称是来自变换器的双向编码器表征量（Bidirectional Encoder Representations from Transformers），它是Google于2018年末开发并发布的一种新型语言模型。与BERT模型相似的预训练语言模型例如问答、命名实体识别、自然语言推理、文本分类等在许多自然语言处理任务中发挥着重要作用。模型是基于Transformer中的Encoder并加上双向的结构，因此一定要熟练掌握Transformer的Encoder的结构。
240705_昇思学习打卡-Day17-基于 MindSpore 实现 BERT 对话情绪识别
weixin_66378701的博客
07-06 692
BERT全称是来自变换器的双向编码器表征量（Bidirectional Encoder Representations from Transformers），它是Google于2018年末开发并发布的一种新型语言模型。与BERT模型相似的预训练语言模型例如问答、命名实体识别、自然语言推理、文本分类等在许多自然语言处理任务中发挥着重要作用。模型是基于Transformer中的Encoder并加上双向的结构，因此一定要熟练掌握Transformer的Encoder的结构。
大模型基础
sgliquangang的专栏
07-03 409
大模型与小模型共同使用相同的神经网络模型结构与预训练方法，大模型展现出来的各种能力的指数级增长，其最大的原因就是因为参数规模拓展导致的，所以要探索如何做好规模拓展。
拓扑学习系列（1）拓扑球与拓扑环面与同胚
追赶时代的博客
07-02 461
拓扑球 Topological Sphere 拓扑环面 Topological Torus 同胚 homeomorphism
学习笔记（linux高级编程）11
qq_62143038的博客
07-03 494
key值 ==> 申请 ==》读写 ==》关闭 ==》卸载。功能：通过该函数可以给pid进程发送信号为sig的系统信号。、信号 kill -l ==>前32个有具体含义的信号。参数：pathname 路径+名称===》任意文件，只要不会。当前程序要发送的信号编号 《=== kill -l。本地可用的地址，如果不确定则用NULL，表示。共享内存 ===》效率最高的进程间通信方式。》申请对象 ==》映射对象==》读写对象。整形的数字，一般用ASCII码的单字符。参数：pid 要接收信号的进程pid。
昇思25天学习打卡营第8天|DCGAN生成漫画头像
Wayne的CSDN博客
07-03 1065
Mindspore-DCGAN
学习ajax需要先学什么
05-31
学习 AJAX，需要先学习以下几个方面： 1. HTML、CSS、JavaScript：AJAX的核心是使用JavaScript技术实现异步请求和响应，因此需要熟练掌握HTML、CSS、JavaScript的基础知识。 2. HTTP协议：AJAX是在HTTP协议基础上...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值