学习Ajax的第一天

最新推荐文章于 2024-07-26 20:46:33 发布

前端-阿来

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量141

点赞数

文章标签： javascript Ajax

本文链接：https://blog.csdn.net/weixin_43482353/article/details/100783640

版权

AJAX

概述

Web 程序初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问。

在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据：

地址栏输入地址，回车，刷新
特定元素的 href 或 src 属性
表单提交

这些方案都是我们无法通过或者很难通过代码的方式进行编程（对服务端发出请求并且接受服务端返回的响应），
如果我们可以通过 JavaScript 直接发送网络请求，那么 Web 的可能就会更多，随之能够实现的功能也会更多，至少不再是“单机游戏”。
AJAX（Asynchronous JavaScript and XML），早出现在 2005 年的 Google Suggest，是在浏览器端进行网络编程（发送请求、接收响应）的技术方案，它使我们可以通过 JavaScript 直接获取服务端新的内容而不必重新加载页面。让 Web 更能接近桌面应用的用户体验。
说白了，AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现网络编程。
能力不够 API 凑。

快速上手

使用 AJAX 的过程可以类比平常我们访问网页过程

2.1. readyState
由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次，所以我们有必要了解每一个状态值代表的含义：
readyState 状态描述说明
0 UNSENT 代理（XHR）被创建，但尚未调用 open() 方法。

1 OPENED open() 方法已经被调用，建立了连接。

2 HEADERS_RECEIVED send() 方法已经被调用，并且已经可以获取状态行和响应头。

3 LOADING 响应体下载中， responseText 属性可能已经包含部分数据。

4 DONE 响应体下载完成，可以直接使用 responseText 。

2.1.1. 案例ajax请求纯文本

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ajax 1 - 请求纯文本</title>
</head>
<body>
	<button id="button">请求纯文本</button>

	<br><br>

	<div id="text"></div>

	<script>
		document.getElementById('button').addEventListener("click",loadText);

		function loadText(){
			// console.log("Hello World!");
			// 创建XMLHttpRequest对象
			var xhr = new XMLHttpRequest();
			// console.log(xhr);
			// open(type,url/file,async)
			xhr.open('GET','sample.txt',true);

			// console.log("READYSTATE: ",xhr.readyState);

			// onprogress
			xhr.onprogress = function(){
				// console.log("测试READYSTATE: ",xhr.readyState);
			}


			// 两种方式请求 onload / onreadystattechange
			// xhr.onload = function(){
			// 	// console.log("READYSTATE: ",xhr.readyState);
			// 	// console.log(this.responseText);
			// 	document.getElementById('text').innerHTML = this.responseText;
			// }

			xhr.onreadystatechange = function(){
				// console.log("READYSTATE: ",xhr.readyState);
				if (this.status == 200 && this.readyState == 4) {
					// console.log(this.responseText);
					document.getElementById('text').innerHTML = this.responseText;
				}else if(this.status == 404){
					// console.log("请求的网页不存在");
					document.getElementById('text').innerHTML = "NOT Found";
				}
			} 

			// 发送请求
			xhr.send();
		}

		// readyState 状态码
		// 0: 请求未初始化
		// 1: 服务器连接已建立
		// 2: 请求已接收
		// 3: 请求处理中
		// 4: 请求已完成，且响应已就绪

    	// HTTP 状态码
		// 200 - 服务器成功返回网页
		// 404 - 请求的网页不存在
		// 503 - 服务器暂时不可用
	</script>
</body>
</html>

直接复制出去，然后自己添加一个文本文件，运行一下看效果

2.2. 遵循 HTTP
本质上 XMLHttpRequest 就是 JavaScript 在 Web 平台中发送 HTTP 请求的手段，所以我们发送出去的请求任然是
HTTP 请求，同样符合 HTTP 约定的格式：

参考链接：
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

前端-阿来

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习Ajax的第一天

AJAX概述Web 程序初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问。在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据：地址栏输入地址，回车，刷新特定元素的 href 或 src 属性表单提交这些方案都是我们无法通过或者很难通过代码的方式进行编程（对服务端发出请求并且接受服务端返回的响应），如果我们可...
复制链接

扫一扫