前后端分离：AJAX实现数据异步获取-优快云博客

本文链接：https://blog.youkuaiyun.com/gcyqweasd/article/details/113799157

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
        	Web应用
        	前后端分离: 前端应用     服务器端应用
        	前后端的连接: 请求的发送    相应的处理
        	AJAX技术: 进行请求的发送    实现页面局部刷新，异步处理
        	请求发送的方式: get  post
        	  get post 区别:
        	    1.get形式发送请求,参数直接拼接到url上
        	      post形式发送请求,参数通过请求体发送
        	    2.get形式发送请求,不安全
        	      post形式发送请求,安全
        	    3.get形式发送请求,发送的数据量小
        	      post形式发送请求,发送的数据量大
        	          推荐使用post形式进行请求的发送
        	          
        	    后端返回来的数据都是json格式:
        	     json对象:{"uesrname":"test","sex":"nan"}
        	     json数组:[
        	         {"uesrname":"test","sex":"nan"},
        	         {"uesrname":"test","sex":"nan"},
        	         {"uesrname":"test","sex":"nan"}
        	     ]
        -->
        <script>
        	//原生ajax技术及请求的实现,未封装为axios(框架)技术,现在已不用
        //创建XMLHttpRequest核心对象
        let xhr = new XMLHttpRequest();
        //open()方法来实现Http请求(get方式)
        xhr.open("get","https://api.tianapi.com/txapi/ncovcity/index?key=4748269d9b462e33d37f85c9e2db5f5a");
        //向服务器发送请求
        xhr.send(null);
        
        //使用onreadystatechange事件监听XMLHttpRequest对象状态
        xhr.onreadystatechange = function(){
        	//readyState属性代表了XMLHttpRequest对象的五种状态.4状态为响应内容接收并解析完成
        	if(xhr.readyState==4){
        		//http请求会返回一个状态码.200为请求成功
        		if(xhr.status==200){
        			//xhr.responseText就是服务器端返回的数据
        			console.log(xhr.responseText);
        		}
        	}
        }
        	
        </script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述