【Ajax使用说明】Ajax、Axios以及跨域

//安装express     npm i express

//导入express
const express = require('express')
//创建应用对象
const app=express()

//创建路由规则
app.get('/server',(req,res)=>{
	res.send('你好')
})

//监听端口启动服务
app.listen(8000,()=>{
	console.log('服务器启动');
})

前端界面准备：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#result{
				width: 200px;
				height: 100px;
				border: solid 1px #90b;
			}
		</style>
	</head>
	<body>
		<button>点击发送请求</button>
		<div id="result"></div>
	</body>
</html>

页面如下：

现要实现点击按钮后获取服务器请求数据，代码如下：

<script>
		//获取元素
		const btn=document.getElementsByTagName('button')[0]
		const result=document.getElementById('result')
		//绑定事件
		btn.onclick=function(){
			//创建对象
			const xhr=new XMLHttpRequest();
			//初始化  设置请求方法和url
			xhr.open('GET','http://127.0.0.1:8000/server')
			//发送
			xhr.send()
			//事件绑定，处理服务端返回的结果
			//readystate 是xhr对象属性，状态为0,1,2,3,4（4为服务器返回所有结果）
			xhr.onreadystatechange=function(){
				//判断服务器返回了所有结果
				if(xhr.readyState===4){
					//判断状态码
					if(xhr.status>=200&&xhr.status<300){
						//xhr.status为响应状态码    xhr.statusText  状态字符串    xhr.response  响应体
						result.innerHTML=xhr.response
					}
				}
			}
			
		}
	</script>

1.4.2AJAX的传参

xhr.open('GET','http://127.0.0.1:8000/server?a=1&b=2')

1.4.3 AJAX的post请求及设置请求体

xhr.open

最低0.47元/天解锁文章