js原生ajax发送get和post请求的实现

最新推荐文章于 2022-11-28 19:53:32 发布

不要放弃

最新推荐文章于 2022-11-28 19:53:32 发布

阅读量3.3k

点赞数

分类专栏：前端文章标签： javascript node.js

本文链接：https://blog.csdn.net/weixin_44912410/article/details/107851152

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

@[toc] JS原生ajax的实现
创建一个node服务器（这里用了express框架）
原生ajax实现
知识点

JS原生ajax的实现

创建一个node服务器（这里用了express框架）

// app.js

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const fs = require('fs');
// 创建web服务器
const app = express();

app.use(express.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public_ajax')));

app.get('/api/get', (req, res) => {
	console.log(req.query)
	res.send(req.query)
})

app.post('/api/post', (req, res) => {
	console.log(req.body)
	res.send(req.body)
})

// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');

这样就搭建了一个端口为3000的服务器.

原生ajax实现

public_ajax / ajax.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
<button onclick="sendAjax()">获取数据</button>
<script>
			const sendAjax = () => {
				let xhr = null

				//	判断浏览器是否支持XMLHttpRequest
				if (window.XMLHttpRequest) {
					// 对于 ie 6+的浏览器
					// 新建一个XMLHttpRequest实例对象
					xhr = new XMLHttpRequest()
				} else if (window.ActiveXObject) {
					// 对于 ie 5 ie 6 的浏览器
					// ActiveXObject
					xhr = new ActiveXObject("Microsoft.XMLHTTP")
				}

				if (xhr) {
				
// ---------------------  GET 请求  ------------------------------------
// open: ajax发送什么请求,以什么方式发送,是否异步
					// xhr.open("get", 'http://localhost:3000/api/get?username=sss&key=555',true)
//这是使用port请求方法的时候向服务器发送数据的方法，这里可以直接为空，也可以为null
					// xhr.send(null)
// ---------------------  POST 请求 参数格式 1  ------------------------------------
					xhr.open('post', "http://localhost:3000/api/post")
// 设置请求 json 参数格式的类型（POST请求必须要设置）
// 不设置的话会报错
					xhr.setRequestHeader('Content-Type', 'application/json')

					xhr.send(JSON.stringify({ "username": '154', "age": 15 }))
// ---------------------  POST 请求 参数格式 2 ------------------------------------
					xhr.open('post', "http://localhost:3000/api/post")

					xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
					var params = 'username=' + 'aaa' + '&age=' + 15;
					xhr.send(params)

//------------------------------- 后续代码 ------------------------------------------
					xhr.onreadystatechange = dealChange
					function dealChange() {
						if (xhr.readyState === 4 && xhr.status === 200) {
							console.log(xhr.responseText)
						} else {
							console.log(xhr.readyState)
						}
					}
				} else {
					alert('您的浏览器不支持ajax')
				}
			}
		</script>
	</body>
</html>

知识点

  onreadystatechange ：请求状态码发生改变的时候触发

  xhr.readyState ：状态码

  xhr.responseText : 返回的数据

  xhr.status : HTTP状态码

  xhr.setRequestHeader ： 设置请求头

关于状态码：readyState

  0 ：请求还没发生（open执行之前）
  1 ：请求已经建立，还没发送（执行了open）
  2 ：请求已经发送，正在处理（执行了send）
  3 ：请求处理中，有一部分数据可以用，但还有没有完成的数据。
  4 ：请求完全完成

不要放弃

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js原生ajax发送get和post请求的实现

文章目录@[toc]JS原生ajax的实现创建一个node服务器（这里用了express框架）原生ajax实现知识点JS原生ajax的实现创建一个node服务器（这里用了express框架）// app.js// 引入express框架const express = require('express');// 路径处理模块const path = require('path');const fs = require('fs');// 创建web服务器const app = expre
复制链接

扫一扫