Ajax同步请求和异步请求，原生Ajax和JSON的GET和POST请求，封装，方法

最新推荐文章于 2024-05-21 10:41:09 发布

骑着蜗牛行天下

最新推荐文章于 2024-05-21 10:41:09 发布

阅读量1k

点赞数

分类专栏：前端文章标签：同步请求和异步请求 get和post请求 ajax

本文链接：https://blog.csdn.net/weixin_45447369/article/details/107464551

版权

Ajax技术允许网页在不完全刷新的情况下与服务器交换数据并局部更新。本文详细介绍了同步和异步请求的区别，讲解了原生Ajax的GET和POST请求，以及jQuery对Ajax的封装，包括jQuery的异步GET和POST方法。同时，还探讨了JSON字符串与Java对象之间的转换过程。

摘要由CSDN通过智能技术生成

Ajax同步请求和异步请求

在这里插入图片描述

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

异步和同步是要建立在客户端和服务端相互通信的基础上，

（1）同步请求：客户端必须等待服务器端的响应，在等待的期间客户端不能做其他任何操作。

（2）异步请求：客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他的操作。

原生的Ajax发送GET请求

（1）创建Ajax对象
（2）建立连接：参数
				1.请求方式：get方式，请求参数在URL后面拼接，send方法为空参。
				2.请求的URL
				3.同步或异步请求：true(异步)或false(同步)
		xmlhttp.open("GET","ajaxServlet?username=tom",true);
（3）发送请求   xmlhttp.send();
（4）接收并处理来自服务器的响应结果
		 获取方式 ：xmlhttp.responseText
	     什么时候获取？当服务器响应成功后再获取
	     当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
	     xmlhttp.onreadystatechange=function()
	     {
	          //判断readyState就绪状态是否为4，判断status响应状态码是否为200
	          if (xmlhttp.readyState==4 && xmlhttp.status==200)
	          {
	              //获取服务器的响应结果
	              var responseText = xmlhttp.responseText;
	              alert(responseText);
	          }
	     }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//创建Ajax对象
		var xmlhttp = new XMLHttpRequest();
		//打开链接，请求方式 请求的后台路径 true表示异步请求 GET请求可以在地址后面用一个？拼上键值对
		xmlhttp.open("GET", "https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13259141515", true);
		//发送请求
		xmlhttp.send();
		//接听后台的响应
		//得监听一个前台准备就绪事件
		//onreadystatechange 事件
		//当请求被发送到服务器时，我们需要执行一些基于响应的任务
		//每当readyState改变时，就会触发onreadystatechange 事件

		//readyState属性存有XMLHttpRequest的状态信息
		xmlhttp.onreadystatechange = function() {
			//当 readyState 等于 4 且状态为 200 时，表示响应已就绪：200是响应状态码 4: 请求已完成，且响应已就绪 
			if (xmlhttp.readyState == 4 & xmlhttp.status == 200) {
				//接收后台响应的字符串
				var jsonStr = xmlhttp.responseText;
				console.log(jsonStr);
				var jsonObj = JSON.parse(jsonStr);
				$('div').html(jsonObj.jokes[0]);
			}
		}
	</script>