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 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
然后在浏览器打开网站,便可以得到如下的结果:
至此,我们就完成了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 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('服务器启动成功......')
})