AJAX技术初探

最新推荐文章于 2024-10-01 19:27:44 发布

考拉的墨尔本

最新推荐文章于 2024-10-01 19:27:44 发布

阅读量625

点赞数

文章标签： ajax 异步

本文链接：https://blog.csdn.net/yaojxing/article/details/73010867

版权

在所有的前端开发中，包括网页，Android，iOS等等，都需要和服务器交换数据，那么在网页开发中，我们可以使用AJAX技术实现和服务器数据的交互。

1.学习AJAX之前的准备知识

1.同步—-多个事情按照顺序执行，彼此不能交叉，通俗来讲就是如果一件事情没有执行结束，第二件事情是不能执行的，只有等到第一个事情执行结束，第二件事情才可以开始执行。

2.异步—多个事情可以同时执行，彼此不相关。通俗来说就是可以同时做多件事情，举个简单的例子就是在生活中我们边烧水边做饭，它们彼此之间没有影响。

3.get/post请求—-是http协议下向服务器发生请求的两种方式。get请求将请求参数拼接在url的后面，post请求则是将参数放在报文的内部。

4.回调函数—-回调函数一般是作为主函数的参数传入，并且当主函数达到某种条件时才会执行的函数。

2.AJAX是什么

学习AJAX，首先要知道AJAX是什么，要用一个起码的印象，百科上对AJAX技术的解释是—-是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

对于上面的解释可能有人看不太懂，我们可以在详细的介绍一下:

1.首先—-AJAX是一种网页开发技术，这没什么好说的，所有人肯定都能看懂

2.其次—-AJAX是以异步的方式实现更新，即我们在提交请求的同时页面不必等待请求的结果，在这个过程中页面可以做其他的操作。

3.最后---我们可以利用AJAX技术在不重新加载整个页面的情况下对页面的局部进行更新，客户体验很好。

3.第一个AJAX

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>第一个ajax程序</title>
    </head>
    <body>
		<!-- 写信的步骤:
			1.准备材料
			2.开始写信
			3.发送信件
			4.收到回信
			5.阅读回信
		 -->
		 <script type="text/javascript">
		 	//1.创建ajax请求对象
		 	var xhr=new XMLHttpRequest();
		 	//2.初始化请求对象
		 	//	-使用xhr.open(参数1，参数2，参数3)方法初始化请求对象，
		 	//	参数1--请求方式(get/post);参数2--url地址;参数3--是否异步(true/false)
		 	xhr.open("get","ajaxTest.json",true);
		 	//3.发送请求
		 	//	-通过xhr.send()方法发送请求对象，不需要任何参数。
		 	xhr.send();
		 	//4.根据状态码接收返回数据
		 	//	-ajax请求过程中通过onreadystatechange()方法来监听状态码，根据状态码来判断请求的实现过程
		 	//	readyState表示ajax状态码,一共有五个状态
		 	//		0:xhr对象建立
		 	//		1:open初始化完成
		 	//		2:send发送请求成功
		 	//		3:正在接受数据
		 	//		4:数据接受完成
		 	//	status表示http请求状态码
		 	//		200 请求成功
        		//		304 使用缓存
        		//		403 访问权限不足
        		//		404 资源找不到
        		//		500以上表示服务端错误
		 	xhr.onreadystatechange=function(){
		 		if(xhr.status==200||xhr.status==304){
		 			if(xhr.readyState==4){
		 				console.log(xhr.readyState);
		 				//5.查看接受的数据
		 				console.log(xhr.responseText);
		 			}
		 		}
		 	}
		 </script>
    </body>
</html>