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 下载依赖项，一会儿会用到，至此，所有的文件就已经全部创建完成，接下来就是代码实现功能的时刻了。
进入index.html文件中，先设置两个按钮，来区别get和post，后面会用这个两个按钮实现xhr的get和post请求的区别。
<button οnclick="get()">xhr的get请求</button>
<button οnclick="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
然后在浏览器打开网站，便可以得到如下的结果：
至此，我们就完成了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请求的按钮，就可以看到如下结果咯。
至此，整个工程项目就已经完毕。
下附，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 οnclick="get()">xhr的get请求</button>
<button οnclick="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('服务器启动成功......')
})
240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
