20220921 ajax的三种基础实现方式_2022 ajax 写法-CSDN博客

本文链接：https://blog.csdn.net/weixin_51876109/article/details/126980732

ajax

ajax

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下，即异步操作。
所有的数据来源于：https://api.apiopen.top/swagger/index.html
JavaScript学习：https://download.csdn.net/download/weixin_51876109/86618380

原生ajax

原生的ajax写法是使用JavaScript中的XMLHttpRequest对象输入参数。
•method：请求的类型；GET 或 POST
•url：文件在服务器上的位置
•async：true（异步）或 false（同步）
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	</head>
	<body>
		
		<table id="table" class="table table-bordered">
			<tr><td>id</td><td>name</td><td>age</td><td>email</td></tr>
		</table>
		
		
		
		<script>
			var xhr = new XMLHttpRequest();
			xhr.onreadystatechange=function(){
				if(xhr.readyState == 4 && xhr.status ==200){
					let json = xhr.responseText
					let jsondata = JSON.parse(json).students
					let table = document.getElementById("table")
					for (let i of jsondata) {
						let tr = document.createElement("tr")
						let id = document.createElement("td")
						id.innerHTML += i.id
						let name = document.createElement("td")
						name.innerHTML+=i.name
						let age = document.createElement("td")
						age.innerHTML+=i.age
						let email = document.createElement("td")
						email.innerHTML+=i.email
						console.log(i.id)
						console.log(i.name)
						console.log(i.age)
						console.log(i.email)
						tr.append(id)
						tr.append(name)
						tr.append(age)
						tr.append(email)
						table.append(tr)
					}
					
					
				}
			}
			
			xhr.open("GET","http://rap2api.taobao.org/app/mock/238982/api/students",true)
			xhr.send()
			
		</script>
	</body>
</html>

jquery写法的ajax

使用了jquery框架封装好的ajax

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" >
		<meta name="referrer" content="no-referrer">
		<title></title>
		<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>
		
		<div id="mdiv">
			
		</div>
		
		
		<script>
			$().ready(function(){
				
				$("button").click( $.ajax({
					url:"https://api.apiopen.top/api/getImages?type=animal&page=0&size=10",
					async:true,
					dataType:"json",
					type:"get",
					success:function(responsedata){
						let jsondata=responsedata.result.list
						for (let s of jsondata) {
							let i = "<p>"+s.title+"</p>"+"<img src='"+s.url+"'/>"
							$("#mdiv").append(i)
							
						}
						
						
					}
					
				}))
				
				
			})
		</script>
	</body>
</html>

promise对象+jquery的ajax

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

学习网址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<!-- <script src="js/jquery-2.1.0.js"></script> -->
		<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>

		<table id="table" class="table table-bordered">
			<tr>
				<td><input type="checkbox" id="box" /></td>
				<td>id</td>
				<td>name</td>
				<td>age</td>
				<td>email</td>
				<td>操作</td>
			</tr>

		</table>

		<button type="button">更换数据</button>

		<script>
			$().ready(function() {

				let p = new Promise((resolve, reject) => {
					$.ajax({
						url: "http://rap2api.taobao.org/app/mock/238982/api/students",
						async: true,
						dataType: "json",
						type: "get",
						success: function(responsedata) {
							resolve(responsedata)
						}
					})
				})

				p.then(responsedata => {
						let list = responsedata.students
						for (let s of list) {
							let tr = $("<tr></tr>")
							tr.append($("<td><input type='checkbox' class='habit'/></td>"))
							tr.append($("<td></td>").text(s.id))
							tr.append($("<td></td>").text(s.name))
							tr.append($("<td></td>").text(s.age))
							tr.append($("<td></td>").text(s.email))
							tr.append($("<td></td>").append("<a>查看</a>&nbsp;&nbsp;<a>发送信息</a>&nbsp;&nbsp;<a>退课</a>"))
							$("#table tbody").append(tr)
						}
					})

				// $("button").click(function (){
				// 	console.log($("#table").children().first().siblings());
				// 	$("#table tr").not(":first").remove()
				// })

				$("button").click(function() {
					let p = new Promise((resolve, reject) => {
						$.ajax({
							url: "http://rap2api.taobao.org/app/mock/238982/api/students",
							async: true,
							dataType: "json",
							type: "get",
							success: function(responsedata) {
								resolve(responsedata)
							}
						})
					})

					p
						.then(responsedata => {
							let list = responsedata.students
							// $("#table").children().first().siblings().remove()
							$("#table tr").not(":first").remove()
							for (let s of list) {
								let tr = $("<tr></tr>")
								tr.append($("<td><input type='checkbox' class='habit'/></td>"))
								tr.append($("<td></td>").text(s.id))
								tr.append($("<td></td>").text(s.name))
								tr.append($("<td></td>").text(s.age))
								tr.append($("<td></td>").text(s.email))
								tr.append($("<td></td>").append(
									"<a>查看</a>&nbsp;&nbsp;<a>发送信息</a>&nbsp;&nbsp;<a>退课</a>"))
								$("#table").append(tr)
							}
						})
				})
				$("#box").click(function() {
					$(".habit").prop("checked", $("#box").prop("checked"))

				})

			})
		</script>
	</body>
</html>