3、Ajax笔记

最新推荐文章于 2024-04-22 20:53:56 发布

瓜娃子qaq

最新推荐文章于 2024-04-22 20:53:56 发布

阅读量73

点赞数

分类专栏： JS 文章标签： AJAX的使用

本文链接：https://blog.csdn.net/weixin_45699925/article/details/103005993

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Ajax

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

同步

1个队列去麦当劳买东西，一个人点完订单后，服务员会去取相关的餐品，将相关的餐品打包好，递给这个人，完成一次服务后，才为下一个人服务。

Ajax同步请求操作

js发送1个请求去请求数据

js等待请求的数据返回

js出来完返回数据后再执行后面的操作

异步

在不等待的情况下，尽可能的服务更多事件。不需要完全等待一个服务做完才轮到下一个。

Ajax异步请求操作

js发送1个请求去请求数据

js不等待请求数据的返回

js执行后面的操作

后台返回数据后，js处理返回数据

Ajax流程

1、创建Ajax对象

1、设置请求，发送请求地址，发送请求的方式

2、发送数据

3、设置监听事件，监听后台是否返回数据

4、处理数据

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>
</head>
<body>
	<script>
		//1\创建xhr对象
		var xhr = new XMLHttpRequest();
		//2\设置请求的方法和路径,"GET" ,"POST"
		//"GET",表单提交的数据会拼接到请求的路径里,效率高.
		//"POST",会将表单的数据放置到请求的body里,数据大,安全.
		// xhr.open('GET', 'http://localhost:57910/1909%E5%B0%9A%E5%AD%A6%E5%A0%82/%E8%A7%86%E9%A2%91%E8%B5%84%E6%96%99/day19/11.html?_ijt=91s1spgiv4q64q3bmm5tld1vdl?userName=admin&passWord=123456');
		xhr.open('POST', 'http://localhost:57910/1909%E5%B0%9A%E5%AD%A6%E5%A0%82/%E8%A7%86%E9%A2%91%E8%B5%84%E6%96%99/day19/11.html?_ijt=91s1spgiv4q64q3bmm5tld1vdl');
		//3\发送数据    可以不发送数据
		xhr.send('userName=admin&passWord=123456');
		//4\监听后台是否返回数据
		xhr.onreadystatechange = function () {
			//xhr.status
			//readystate
			if (xhr.status == 200 && xhr.readyState == 4) {
				console.log('成功获取数据');
				console.log(xhr);
				console.log(xhr.status);  // ==>200 说明请求允许
				console.log(xhr.readyState); // ==> 返回4时,标明事情结束
				
				//5处理数据
				var res = xhr.response;
				var h1 = document.createElement('h1');
				var body = document.querySelector('body');
				h1.innerHTML = res;
				body.appendChild(h1);
			}
			
		};
	</script>
</body>
</html>

get方法封装

function getAjax(httpUrl, data, callbackFn) {
//解析data
	function analysisData(data) {
		var str = '?';
		for (item in data) {
			str += item + '=' + data[item] + '$';
		}
		str = str.substr(0,str.length-1);
		return str;
	}
	var str = analysisData(data);


//1\创建xhr对象
	var xhr = new XMLHttpRequest();

//2\设置请求的方法和路径,"GET" ,"POST"
	xhr.open('GET', httpUrl+str);

//3\发送数据    可以不发送数据
	xhr.send('userName=admin&passWord=123456');

//4\监听后台是否返回数据
	xhr.onreadystatechange = function () {
		if (xhr.status == 200 && xhr.readyState == 4) {
			callbackFn(xhr);
		}
	};
}

同步

瓜娃子qaq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3、Ajax笔记

AjaxAjax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。同步1个队列去麦当劳买东西，一个人点完订单后，服务员会去取相关的餐品，将相关的餐品打包好，递给这个人，完成一次服务后，才为下一个人服务。Ajax同步请求操作js发送1个请求...
复制链接

扫一扫