Ajax技术基础

已于 2022-08-19 19:18:26 修改
阅读量275 收藏
点赞数
文章标签： ajax javascript 前端
于 2022-08-19 19:18:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52772066/article/details/126421116
版权

文章目录

一、Ajax

1.Ajax技术简介

  • Ajax(Asynchronous Javascript And XML,异步与JavaScript和XML）是一种创建交互式网页应用的网页开发技术，使得“不刷新页面向服务器发起请求”成为了可能。

2. Ajax如何工作

在这里插入图片描述

3.XMLHttpRequest对象

Ajax引擎使用XMLHttpRequest和服务器进行异步通信，是Ajax技术得以实现的一个重要的JavaScript对象。

  • Ajax应用与传统Web应用相比较，客户端浏览器通过JavaScript事件触发对Ajax引擎的调用，Ajax引擎在Ajax应用中担负着一个中间层的任务，负责收集数据并通过Ajax的XMLHttpRequest对象向服务器发送HTTP请求，服务器处理完成后返回XML、JSON以及文本等类型的响应结果，Ajax引擎根据响应结果类型进行解析后再配合HTML和CSS渲染，将结果显示到客户端页面。

  • 创建XMLHttpRequest对象后，Ajax就可以使用XMLHttpRequest对象的open()和send()方法将请求发送到服务器，请求可分为GET方式请求和POST方式请求。

二、jQuery对Ajax的实现

1. 基本方法

jQuery提供多个与Ajax有关的方法，下面结合实例介绍两个常用的方法：ajax( )方法和load( )方法。

  1. ajax( )方法
    $.ajax()方法只有一个参数：参数key/value对象，包含各配置及回调函数信息。
  2. load( )方法
$(selector).load(URL,data,callback);//load( )方法从服务器加载数据，并把返回的数据放入被选元素中。

其中，必需的URL参数规定您希望加载的 URL；可选的data参数规定与请求一同发送的查询字符串键/值对集合；可选的callback参数规定当load( )方法完成后所要允许的回调函数。回调函数可以设置不同的参数：responseTxt表示包含调用成功时的结果内容，statusTxt表示包含调用的状态，xhr表示包含XMLHttpRequest对象。

三、实例

用户的登录及增删改查

1.登录界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆界面</title>
	<link rel="stylesheet" href="./css/bootstrap.min.css" />
	<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
	<form action="http://110.42.140.234:8083/user/toLogin">
		<table border="0" align="center">
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="username" id="username"><br></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" name="psw" id="psw"><br></td>
			</tr>
			<tr>
				<td><input value="登陆" type="button" onclick="login()"><br></td>
			</tr>
		</table>
	</form>
</body>

<script>
	function login(){
		$.ajax({
				url:'http://110.42.140.234:8083/user/toLogin',
				type:'get',
				data:{
				   username:$('#username').val(),
				   psw:$('#psw').val()
				 },
				success:function (e){
					let data = e.data;
					console.log(data);
					if(data.login_type.toString() == '登录成功！'){
						alert(data.login_type);
						message();
					}else if(data.login_type.toString() == '登录失败，账号或密码错误！'){
						alert(data.login_type);
					}
				}
		});
	}
	 
	 //跳转获取数据
	 function message(){
		 location.href = "./message.html";
	 }
</script>
</html>

2.显示数据

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=Edge">
	<link rel="stylesheet" href="./css/bootstrap.min.css" />
	<title>用户数据</title>
	<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
	<input type="button" onclick="getMessage()" value="获取数据">
	<input type="button" onclick="addMessage()" value="添加数据">
	<input type="button" onclick="back()" value="返回登陆界面">
	<div class="container  table-striped">
		<table class="thead-dark" width="80%" align="center" >
			<tr>
				<td>ID</td>
				<td>用户名</td>
				<td>年龄</td>
				<td>地址</td>
				<td>电子邮件</td>
				<td>学历</td>
				<td>创建时间</td>
				<td>操作</td>
			</tr>
			<tbody id="content">
					
			</tbody>
		</table>
	</div>
		
	<script>
		var data = "";
		function getMessage(){
			$.ajax({
				url:'http://110.42.140.234:8083/user/getMessage',
				type:'get',
				success:function(e){
					data = e.data;
					let content = "";
					for (let i = 0; i < data.length; i++) {
						content += "<tr>" +
						"<td>" + data[i].id	+ "</td>" +
						"<td>" + data[i].name + "</td>" +
						"<td>" + data[i].age + "</td>" +
						"<td>" + data[i].adress + "</td>" +
						"<td>" + data[i].email + "</td>" +
						"<td>" + data[i].education + "</td>" +
						"<td>" + data[i].creatTime + "</td>" +
						"<td>" + "<button οnclick=\"dele("+data[i].id+")\">删除</button>" + "</td>" +
						"</tr>"
					}
					$('#content').html(content);
				}
			})
		}
		
		//跳转删除页面
		function dele(id){
			location.href = "./deleteMessage.html?id="+id;
		}
		
		//跳转到添加数据界面
		function addMessage(){
			location.href = "./addMessage.html";
		}
		
		//返回到登陆界面
		function back(){
			location.href = "./index.html";
		}
	</script>
</body>
</html>

3.增添数据

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=Edge">
		<link rel="stylesheet" href="./css/bootstrap.min.css" />
		<title>添加用户</title>
		<script src="./js/jquery-3.6.0.min.js"></script>
	</head>
	<body>
		  <form action="http://110.42.140.234:8083/user/addMessage" id="form">
		      <table border="0" align="center">
				  <tr>
					  <td>ID：</td>
					  <td><input type="text" name="id" id="id"><br></td>
				  </tr>
				  <tr>
					  <td>用户名：</td>
					  <td><input type="text" name="name" id="name"><br></td>
				  </tr>
				  <tr>
					  <td>年龄：</td>
					  <td><input type="text" name="age" id="age"></input><br></td>
				  </tr>
				  <tr>
					  <td>地址：</td>
					  <td><input type="text" name="adress" id="adress"><br></td>
				  </tr>
				  <tr>
					  <td>电子邮件：</td>
					  <td><input type="text" name="email" id="email"><br></td>
				  </tr>
				  <tr>
					  <td>学历：</td>
					  <td><input type="text" name="education" id="education"><br></td>
				  </tr>
				  <tr>
					  <td><input type="button" value="提交" onclick="submitMessage()"></td>
					  <td><input type="button" value="返回" onclick="back()"></td>
				  </tr>
			  </table>
		  </form>
		  <div class="container  table-striped">
			  <div id='content'>
							  
			  </div>
		  </div>
	  <script>
		
		//返回按钮
		function back(){
			location.href = "./message.html";
		}
		
		//提交按钮
		let new_data = "";
		function submitMessage(){
			$.ajax({
				url:'http://110.42.140.234:8083/user/addMessage',
				type:'get',
				data:
				{
					id:$('#id').val(),
					name:$('#name').val(),
					age:$('#age').val(),
					adress:$('#adress').val(),
					email:$('#email').val(),
					education:$('#education').val(),
					creatTime:$('#creatTime').val()
				},
				success:function(e){
					alert(e.data.add_type);
					$('#form').remove();
					$.ajax({
						url:'http://110.42.140.234:8083/user/getMessage',
						type:'get',
						success:function(e1){
							data = e1.data;
							//创建表头
							let content = "<table class='thead-dark' width='80%' align='center' >" +
							"<tr>" +
							"<td>ID</td>" +
							"<td>用户名</td>" +
							"<td>年龄</td>" +
							"<td>地址</td>" +
							"<td>电子邮件</td>" +
							"<td>学历</td>" +
							"<td>创建时间</td>" +
							"<td>操作</td>" +
							"</tr><tbody>" ;
							for (let i = 0; i < data.length; i++) {
								//获取添加前的数据
								content += 
								"<tr>" +
								"<td>" + data[i].id	+ "</td>" +
								"<td>" + data[i].name + "</td>" +
								"<td>" + data[i].age + "</td>" +
								"<td>" + data[i].adress + "</td>" +
								"<td>" + data[i].email + "</td>" +
								"<td>" + data[i].education + "</td>" +
								"<td>" + data[i].creatTime + "</td>" +
								"<td>" + "<button οnclick=\"dele("+data[i].id+")\">删除</button>" + "</td>" +
								"</tr>" 
								
							}
							//获取添加后的数据
							content += 
							"<tr>" +
							"<td>" + e.data.add_message.id	+ "</td>" +
							"<td>" + e.data.add_message.name + "</td>" +
							"<td>" + e.data.add_message.age + "</td>" +
							"<td>" + e.data.add_message.adress + "</td>" +
							"<td>" + e.data.add_message.email + "</td>" +
							"<td>" + e.data.add_message.education + "</td>" +
							"<td>" + e.data.add_message.creatTime + "</td>" +
							"<td>" + "<button οnclick=\"dele("+e.data.add_message.id+")\">删除</button>" + "</td>" +
							"</tr>" 
							"</tbody></table>";
						
							$('#content').html(content);
						}
					});
					
				}
			});
		}
	  </script>
	</body>
</html>

4.删除数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>删除用户</title>
		<link rel="stylesheet" href="./css/bootstrap.min.css" />
		<script src="./js/jquery-3.6.0.min.js"></script>
	</head>
	<body>
		<input type="button" id="btn" onclick="backMessage()" value="返回">
		<div class="container  table-striped">
			<table class="thead-dark" width="80%" align="center" >
				<tr>
					<td>ID</td>
					<td>用户名</td>
					<td>年龄</td>
					<td>地址</td>
					<td>电子邮件</td>
					<td>学历</td>
					<td>创建时间</td>
					<td>操作</td>
				</tr>
				<tbody id="content">
						
				</tbody>
			</table>
		</div>
	</body>
	<script>
		function getPar(par){
		    //获取当前URL
		    var local_url = document.location.href; 
		    //获取要取得的get参数位置
		    var get = local_url.indexOf(par +"=");
		    if(get == -1){
		        return false;   
		    }   
		    //截取字符串
		    var get_par = local_url.slice(par.length + get + 1);    
		    //判断截取后的字符串是否还有其他get参数
		    var nextPar = get_par.indexOf("&");
		    if(nextPar != -1){
		        get_par = get_par.slice(0, nextPar);
		    }
		    return get_par;
		}
		//请使用Get请求使点击删除时，页面发生跳转，并传递用户参数“id”到本页面
		var local_id = getPar("id");
		console.log("获得页面传参：id："+local_id);
		$.ajax({
			url:'http://110.42.140.234:8083/user/deleteMessage',
			tpye:'get',
			data:{
				messageId:local_id
			},
			success:function(e){
				console.log(e);
				alert(e.data.delete_type);
			}
		});
		
		$.ajax({
			url:'http://110.42.140.234:8083/user/getMessage',
			type:'get',
			success:function(e){
				data = e.data;
				let content = "";
				for (let i = 0; i < data.length; i++) {
					if(i == local_id) i++;
					content += "<tr>" +
					"<td>" + data[i].id	+ "</td>" +
					"<td>" + data[i].name + "</td>" +
					"<td>" + data[i].age + "</td>" +
					"<td>" + data[i].adress + "</td>" +
					"<td>" + data[i].email + "</td>" +
					"<td>" + data[i].education + "</td>" +
					"<td>" + data[i].creatTime + "</td>" +
					"<td>" + "<button οnclick=\"dele("+data[i].id+")\">删除</button>" + "</td>" +
					"</tr>"
				}
				$('#content').html(content);
			}
		})
		
		function backMessage(){
			location.href = "./message.html";
		}
	</script>
</html>

5.运行结果

5.1登录

请添加图片描述
请添加图片描述

5.2显示数据

请添加图片描述

5.3添加数据

请添加图片描述
请添加图片描述

qq_52772066
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
AJAX技术基础介绍
10-30
AJAX技术基础介绍
AJAX技术基础
07-26
**AJAX技术基础** AJAX，全称Asynchronous JavaScript and XML（异步JavaScript与XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现局部...
ajax技术
weixin_58448088的博客
02-12 4929
1、ajax的五个步骤 2、封装一个简单的ajax请求 3、什么是回调地狱 4、promise、async和await语法的使用
Ajax技术
pan_junbiao的博客
04-03 3488
1、Ajax简介 随着Web2.0概念的普及，追求更人性化、更美观的页面效果成了网站开发的必须。Ajax正在其中充当着重要角色。由于Ajax是一个客户端技术，所以无论使用哪种服务器技术（如JSP、PHP、ASP.NET等）都可以使用Ajax。相对于传统的Web应用开发，Ajax运用的是更加先进、更加标准化、更加高效的Web开发技术体系。 1.1 Ajax开发模式与传统开发模式的比较 互联网发...
Ajax（基本介绍+使用+示例代码+场景回放）
weixin_45594172的博客
11-21 5873
Ajax（基本介绍+使用+示例代码+场景回放）
详解AJAX技术
a1782519342的博客
05-24 4304
1.为什么要用？ 在对接支付宝支付的时候需要在初始化的时候设置一个地址值，这个就是用于支付成功后跳转的地址值。 aliPayConfig.setReturnUrl("http://127.0.0.1"); 但是，在对接微信Native支付方式的时候，当扫码付款完成以后客户端并不会跳转，这时候需要AJAX技术来实现异步的刷新网页 2.什么是AJAX技术？ AJAX的全称是Asynchronous JavaScript and XML，意思就是异步的JavaScript和XML，用于快速创建动态的网
Ajax技术基础设计语言
01-07
Ajax程序设计教程
ajax技术详解
pikcacho_pkq的博客
04-26 4395
1. 全局刷新与局部刷新 在B/S 结构的项目中， 浏览器端负责把用户的请求和参数通过网络发送给服务器,服务端负责接收请求，并将处理的结果返回给浏览器。浏览器端负责展示响应结果给用户。 全局刷新 由浏览器亲自向服务端发送请求协议包，接着由服务端直接将【响应包】发送到浏览器的内存中，这个行为导致浏览器内存中原有内容被覆盖掉；所以整个浏览器数据全部被刷新。 局部刷新 不是由浏览器发送请求给服务端，而是浏览器委托浏览器内存中一个脚本对象代替浏览器发送请求。这个行为导致服务端直接将【响应包】发送脚本对象内存中，所以
Ajax是什么以及Ajax交互原理（详，图文并茂，原理篇）
weixin_53353693的博客
01-08 6788
本博，以图文并茂的方式，详细讲解了Ajax技术是什么，以及他的传输原理
Ajax技术概述
橘猫吃不胖的博客
02-24 1342
Ajax技术概述1 初识Ajax1.1 传统网站中存在的问题1.2 Ajax的工作原理1.3 同步处理与异步处理1.4 XMLHttpRequest对象2 Ajax基本实现步骤2.1 创建服务器2.2 配置Ajax对象2.3 获取服务器端的响应3 请求参数3.1 GET请求参数的传递3.2 POST请求参数的传递3.3 案例演示4 jQuery对Ajax的封装4.1 $.ajax()方法4.2 Ajax快捷方法4.3 Ajax辅助方法 1 初识Ajax 在传统网站中，网页无法实现局部更新，当用户刷新页面时，
AJAX技术
qq_39756007的博客
02-17 567
XHTML和CSS进行显示使用文档对象模型DOM（Document Object Model）作动态显示和交互使用XML和XSLT做数据交互和操作使用XMLHttpRequest进行异步数据接收使用JavaScript将它们绑定在一起理解Ajax一种不用刷新整个页面便可与服务器通讯的办法Ajax在本质上是一个浏览器端的技术，和具体的服务器端技术无关Ajax技术之主要目的在于局部交换客户端及服务器间之数据。
前端必看之AJAX功能原理详解篇
洛阳泰山的博客
08-08 5507
AJAX AJAX全称为“Asynchronous JavaScript And XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。 它并不是JavaScript的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形 成的结合体。使用Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户 体验。 一．Ajax概述 Ajax这个概念是由Jesse James Garrett在2005年发明的。它本身不是单一技术，是...
Ajax技术简述
m0_53644435的博客
03-15 2355
Ajax：synchronous javascript and xml (异步javascript和xml) 它是浏览器提供的一套方法，可以实现压面无刷新更新数据，提高用户浏览网站应用的体验
Ajax及其应用
m0_57688490的博客
03-21 518
Ajax = 异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。注：传统的网页(不使用 Ajax)如果需要更新内容，必须重载整个网页面。
【经典】Ajax技术详解
CodingLJ
12-01 340
一、Ajax简介 Ajax是一种快速创建动态网页的技术，通过js异步发送请求，局部更新网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以实现对网页的异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某个部分进行更新。 说白了，就是整个界面现在需要一部分需要改变，之前没有Ajax的时候是加载整个界面，现在Ajax技术可以在不加载整个界面的情况下，就可以对部分界面的功能进行更新。浏览器发送到服务器的请求，而是浏览器的部分通过JavaScript中的Ajax向服务器...
AJAX 详解
最新发布
m0_61869253的博客
02-17 1164
怎样创建xmlHttpRequest对象？怎样通过get、post传递传递数据？怎样控制http头信息？通过ajax能传递什么格式的数据？怎样接收服务器传递的数据？怎样控制数据接收的进度？如果控制数据传递过程中的错误？关于跨越传输的问题？a. AJAX是什么？AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX技术详解
weixin_54104864的博客
07-24 167
AJAX全称Asynchronous JavaScript and XML,即“异步的JavaScript和XML”。它代表了一种创建交互式网页应用的网页开发技术。使用AJAX,浏览器可以与服务器进行异步数据通信,实现异步更新页面。这意味着可以在不重新加载整个页面的情况下,对页面的某部分进行更新。
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解（学习总结---从入门到深化）
07-10 1653
Ajax技术【Ajax技术详解、Ajax 的使用、Ajax请求、JSON详解、JACKSON 的使用】(一)-全面详解（学习总结---从入门到深化）
探索Ajax技术：基础教程与Web应用简史
因此，掌握Ajax技术对于前端开发人员来说，是非常重要的。 在使用场合方面，Ajax可以用于各种Web应用中，比如社交网络、在线购物、在线游戏等。通过Ajax，用户可以更便捷地与页面交互，提高了用户体验和使用效率。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值