前端学习之Ajax

最新推荐文章于 2022-07-05 21:39:02 发布

GEX0o0

最新推荐文章于 2022-07-05 21:39:02 发布

阅读量307

点赞数 1

分类专栏：前端学习:html+css+js

本文链接：https://blog.csdn.net/gexin0517/article/details/99999423

版权

前端学习:html+css+js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

原生Ajax

在这里插入图片描述

文章目录

原生Ajax

1.概念

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

在这里提出一个概念：同步和异步

同步：例如当你提交一个表单时，会将前台获取的信息字符串的形式传输到后台，进行验证并反馈一个消息在前台重新刷新一下页面进行展示。
异步：同样是提交表单，但是异步可以不用跳转页面，并对页面不刷新的条件下，在前台反馈信息。

Ajax实现了异步的请求；

2.Ajax的工作原理

在这里插入图片描述

3.创建 XMLHttpRequest 对象

XMLHttpRequest 用于在后台与服务器交换数据

代码：

var xmlhttp;
if (window.XMLHttpRequest)
{
    xmlhttp=new XMLHttpRequest();
}

4.向服务器发送请求

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

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

一般提交数据都是通过submit事件触发的，例如下面：

<html>
	<body>
		<form action="#" method="post">
			<input type="submit" name="" id="" value="" />
		</form>
	</body>
</html>

提交的方式有两种：get和post请求

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

5.服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据

document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

6.onreadystatechange 事件

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

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: “OK” 404: 未找到页面

7.实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//创建异步请求对象
			var xmlhttp;
			if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp = new XMLHttpRequest();
			}
			//向服务器发送请求
			//如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
			//打开连接 GET
			xmlhttp.open("GET", "https://api.github.com/search/users?q=a", true);
			//发送请求
			xmlhttp.send();
			//准备好介绍,服务器的相应
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					//接收服务器响应的文本数据
					var text = xmlhttp.responseText;
					document.getElementById("myDiv").innerHTML = text;
				}
			}
		</script>
	</head>
	<body>
		<div id="myDiv">
		</div>
	</body>
</html>