xhr的get和post请求的简单实现

时间:2024-03-14 19:27:51

        ajax技术的核心是XMLHttpRequest对象(简称XHR),XHR为向服务器发送请求和解析服务器响应提供了流畅的接口,能够以异步方式从服务器取得更多信息。

ajax是数据请求方式的一种。

特点:

1:前端可以发送数据到后端

2. 可以接收从后端传过来的数据

3:可以解析从后端传过来的数据

4:可以对页面进行局部刷新操作-->

xhr数据请求流程:

1.初始化xhr对象

设置请求方法,以及请求接口

        开始发送数据到后台

2.后端接收前端发送过来的数据

3.将数据从后台返回给前端

        发送数据到前端

4.前端接收后台发送过来的数据

          接收部分数据时,

          全部数据接收完毕,

下面在实例操作中再慢慢介绍。本文主要简单介绍xhr的get和post请求。

创建文件夹。文件夹的命名中不能有汉字,否则会影响程序的运行。

右键工程文件夹,在终端打开,输入:npm init 一路回车,此时工程文件夹中会出现一个名为:package.json的文件。

右键工程文件夹,新建一个名为:public的文件夹,在public文件夹的目录下,创建一个名为index.html文件,然后在工程文件夹下创建一个名为:index.js的文件,至此,所有文件创建完毕。

右键工程文件夹,在终端打开,输入命令:npm install express 下载依赖项,一会儿会用到,至此,所有的文件就已经全部创建完成,接下来就是代码实现功能的时刻了。

xhr的get和post请求的简单实现

进入index.html文件中,先设置两个按钮,来区别get和post,后面会用这个两个按钮实现xhr的get和post请求的区别。

<button onclick="get()">xhr的get请求</button>

<button onclick="post()">xhr的post请求</button>

然后在index.html文件中设置get的请求接收:

代码如下:

<script>

function get() {

// 创建一个数据请求的实例化对象

var xhr = new XMLHttpRequest()

// 在xhr的准备状态发生改变的时候,调用该方法

xhr.onreadystatechange = function () {

// 判断xhr的准备状态

switch (xhr.readyState) {

case 0: {

console.log('open方法已经调用,但是send方法没有调用')

break;

}

case 1: {

console.log('send方法已经调用,但是服务器没有返回数据')

break;

}

case 2: {

console.log('send方法已经调用,服务器开始返回数据')

break;

}

case 3: {

console.log('服务器已经返回部分数据')

break;

}

case 4: {

console.log('服务器已经返回全部的数据')

console.log(xhr.response)

console.log(xhr.responseText)

console.log(xhr.responseURL)

console.log(xhr.status)

console.log(xhr.getAllResponseHeaders)

break;

}

}

}

// open方法里面要放置两个参数,

// 参数1:数据请求方式 get post

// 参数2:请求的接口,参数在接口后面进行拼接

xhr.open('get', '/getTest?name=美女&des=喜欢编程序')

// 发送数据到后端

xhr.send()

}

代码中间的数据请求的过程在注释中已经写明,我们平常在网页中看到的数据基本上都是case4的情况传送完毕的。

接下来我们进入index.js文件中,进行后端的设置。

所有代码如下:

var express = require('express')

var web = express()

web.use(express.static('public'))

// '/getTest'是前端刚才编写的接口

// function后面两个参数,req是前端向后端发送的请求

// res是后端向前端发送的结果

web.get('/getTest',function(req,res){

// 接收前端发送过来的name值

var name = req.query.name

// 接收前端发送过来的des值

var des = req.query.des

setTimeout(function(){

// res.send是后端向前端发送的数据

res.send('听说有一种'+name+'非常厉害,叫做'+des)

},2000)

})

web.listen('8080',function(){

console.log('服务器启动成功......')

})

关于服务器的启动,和端口的设置,在昨天的文章中已经详细写过,此处不再赘述。

链接附上:https://blog.csdn.net/qq_39138295/article/details/82192124

然后在浏览器打开网站,便可以得到如下的结果:

xhr的get和post请求的简单实现

至此,我们就完成了get的请求,前后端的交互操作,是不是很简单?

接下来我们再来看看post的请求交互,其实post和get的交互操作基本类似,知识代码有些地方需要注意而已。

我们再次来到前端的文件,在script标签中对post按钮进行设置一番:

function post() {

var xhr = new XMLHttpRequest()

// post请求方式,接口后面不能追加参数

xhr.open('post', '/postTest')

// 如果使用post请求方式 而且参数是以key=value这种形式提交的

// 那么需要设置请求头的类型

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

xhr.send('start=1&des=喜欢程序的美女就我一个。')

xhr.onreadystatechange = function () {

// 数据全部返回的判断

if (xhr.readyState == 4) {

console.log(xhr.responseText)

}

}

}

然后来到index.js文件中,同样对post请求进行一番设置,和get基本类似,没什么难的。

代码如下:

var express = require('express')

var bodyParser = require('body-parser')

var web = express()

web.use(express.static('public'))

web.use(bodyParser.urlencoded({extended:false}))

以上五句代码是固定写法,不用换,只要用到post请求的前后端交互就可以直接写了。

web.post('/postTest',function(req,res){

var start = req.body.startl

var des = req.body.des;

console.log(start)

console.log(des)

setTimeout(function(){

res.send('美女介绍完毕')

},2000)

})

同样和get一样,将服务器启动,打开浏览器,点击post请求的按钮,就可以看到如下结果咯。

xhr的get和post请求的简单实现

至此,整个工程项目就已经完毕。

下附,index.html文件和index.js文件的所有代码。

index.html文件:

<!DOCTYPE html>

<html lang="en">

 

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>xhr的get和post请求</title>

</head>

 

<body>

<button onclick="get()">xhr的get请求</button>

<button onclick="post()">xhr的post请求</button>

 

<script>

function get() {

// 创建一个数据请求的实例化对象

var xhr = new XMLHttpRequest()

// ready 准备

// state 状态

// change 改变

// 在xhr的准备状态发生改变的时候,调用该方法

xhr.onreadystatechange = function () {

// 判断xhr的准备状态

switch (xhr.readyState) {

case 0: {

console.log('open方法已经调用,但是send方法没有调用')

break;

}

case 1: {

console.log('send方法已经调用,但是服务器没有返回数据')

break;

}

case 2: {

console.log('send方法已经调用,服务器开始返回数据')

break;

}

case 3: {

console.log('服务器已经返回部分数据')

break;

}

case 4: {

console.log('服务器已经返回全部的数据')

console.log(xhr.response)

console.log(xhr.responseText)

console.log(xhr.responseURL)

console.log(xhr.status)

console.log(xhr.getAllResponseHeaders)

break;

}

}

}

// open方法里面要放置两个参数,

// 参数1:数据请求方式 get post

// 参数2:请求的接口,参数在接口后面进行拼接

xhr.open('get', '/getTest?name=美女&des=喜欢编程序')

 

// 发送数据到后端

xhr.send()

}

 

function post() {

var xhr = new XMLHttpRequest()

// post请求方式,接口后面不能追加参数

xhr.open('post', '/postTest')

// 如果使用post请求方式 而且参数是以key=value这种形式提交的

// 那么需要设置请求头的类型

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

xhr.send('start=1&des=喜欢程序的美女就我一个。')

xhr.onreadystatechange = function () {

// 数据全部返回的判断

if (xhr.readyState == 4) {

console.log(xhr.responseText)

}

}

}

 

</script>

</body>

 

</html>

index.js文件:

var express = require('express')

var bodyParser = require('body-parser')

var web = express()

web.use(express.static('public'))

web.use(bodyParser.urlencoded({extended:false}))

// '/getTest'是前端刚才编写的接口

// function后面两个参数,req是前端向后端发送的请求

// res是后端向前端发送的结果

web.get('/getTest',function(req,res){

// 接收前端发送过来的name值

var name = req.query.name

// 接收前端发送过来的des值

var des = req.query.des

setTimeout(function(){

// res.send是后端向前端发送的数据

res.send('听说有一种'+name+'非常厉害,叫做'+des)

},2000)

})

 

web.post('/postTest',function(req,res){

var start = req.body.startl

var des = req.body.des;

console.log(start)

console.log(des)

 

setTimeout(function(){

res.send('美女介绍完毕')

},2000)

})

web.listen('8080',function(){

console.log('服务器启动成功......')

})