AJAX技术简介

最新推荐文章于 2024-08-21 21:16:19 发布

_AYER_

最新推荐文章于 2024-08-21 21:16:19 发布

阅读量521

点赞数

分类专栏：笔记知识点总结

本文链接：https://blog.csdn.net/AYER_/article/details/101221596

版权

笔记知识点总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

AJAX：Asynchronous JacaScript and XML（B/S：前后端分离）

发展历程：

在2005年2月由Jesse James Garrett首次提出
在google地图中首次被应用，从而为人所知。
在目前阶段通过AJAX与服务器交互已经成为主流的开发模式。

有点分析：

避免网页频繁刷新造成不良的用户体验。
减少刷新将会减少服务器的执行压力。
此种交互方式提高服务器程序的共用性。

AJAX的执行原理：

使用ajax与服务器交互时，发送以及接受的信息是特殊数据格式，而非整个网页程序，因此不需要刷新

AJAX的技术组成：

AJAX实际上是几种技术以一种全新的方式聚合在一起的方式

服务器端语言：服务器响应客户端请求。AJAX与服务器语言无关
XML是一种描述数据的格式XML是传输格式的在其中一种
HTML和CSS标准化呈现
DOM实现动态显示和交互
使用XMLHTTP组件XMLHttpRequest对象进行同步或异步数据读取，非w3c标准
使用Javascript绑定和处理所有数据

简单的使用代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			// js里XMLHttpRequest类似于python里的requests、urlib
			function getXHR(){
				if(window.XMLHttpRequest){
					return new window.XMLHttpRequest()
				}else{
					// 解决微软的特殊情况
					new window.ActiveXObject('Microsoft.XMLHTTP')
				}
			}
			
			xhr = getXHR()
			
			data = {user:'zhangsan', age:19, date:new Date(), money:[1,2,3,4,5]}
			
			console.log(typeof(data))
			console.log(data.user)
			console.log(data.age)
			console.log(data.date.toLocaleDateString())
		
			// 把json对象转换为json字符串："{"user":"zhangsan","age":19,"date":"2019-09-23T02:52:09.956Z"}"
			strs = JSON.stringify(data)
			console.log(typeof(strs))
			console.log(strs)
			
			// 解析字符创为json对象
			jsonObj = JSON.parse(strs)
			
			console.log(jsonObj.user)
			console.log(jsonObj.money[0])
			
			obj = new Object()
			obj.user = 'zhangsan'
			
			console.log(obj.user)
			
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			// js里XMLHttpRequest类似于python里的requests、urlib
			function getXHR(){
				if(window.XMLHttpRequest){
					return new window.XMLHttpRequest()
				}else{
					// 解决微软的特殊情况
					new window.ActiveXObject('Microsoft.XMLHTTP')
				}
			}
			// 异步请求服务器数据函数
			function jsonData(){
				var xhr = getXHR()
				xhr.open('GET', 'data.json', true)
				// xhr.setRequestHeader()
				xhr.send(null)
				// http://127.0.0.1:8020/htmlproject/day06/data.json
				
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						// 得到服务返回的json字符串
						resp = xhr.responseText
						console.log(resp)
						htmlText = ""
						// 解析字符串为json对象
						jsonObj = JSON.parse(resp)
						console.log(jsonObj)
						// 组织显示html格式
						htmlText = '<tr><td>' + jsonObj.user + '</td></tr>'
						document.getElementById('userData').innerHTML = htmlText 
					}else{
						
					}
				} 
			}
			
			function setInnerHTML(id, text){
				document.getElementById(id).innerHTML = htmlText
			}
		</script>
	</head>
	<body>
		<input type="button" value="加载" onclick="jsonData()"/>
		
		<table border="1">
			<thead>
				<tr><th>用户名</th></tr>
			</thead>
			<tbody id='userData'></tbody>
		</table>
	</body>
</html>