AJAX技术初探

太过爱你忘了你带给我的痛 2022-06-14 05:19 194阅读 0赞

在所有的前端开发中，包括网页，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>
    		
    		 <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>

## 4.总结 ##

上面就是一个简单但却比较完整的ajax请求，我们可以类比日常生活中写信的过程来比喻实现ajax的过程， 但是要注意ajax是遵循

http协议的，所以在测试ajax例子的时候需要在本地搭建服务器，这里推荐一个本地搭建服务器的神器–WAMPSERVER，在网上搜索下

载下来一路安装就可以了。

##  ##