xhr的get和post请求的简单实现
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('服务器启动成功......')
})
xhr的get和post请求的简单实现相关推荐
- CORS请求的简单请求和非简单请求
跨域资源共享 CORS 详解 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XML ...
- Web请求响应简单整理
简单对Web请求响应如何处理进行的整理,难免有理解不到位,理解有偏差的地方,如有理解有误的地方,希望大牛批评指正. 1.Web开发的定义 首先看看微软对Web开发的定义: Web开发是一个指代网页或网 ...
- Django框架深入了解_05 (Django中的缓存、Django解决跨域流程(非简单请求，简单请求)、自动生成接口文档)(二)
二.跨域: 回到顶部 跨域知识介绍: 点我以前博客 跨域解决方法:CORS:跨域资源共享 CORS请求分类(简单请求和非简单请求) 简单请求(simple request):只需要在头信息之中增加一个 ...
- Django框架深入了解_05 (Django中的缓存、Django解决跨域流程(非简单请求，简单请求)、自动生成接口文档)(一)
阅读目录 一.Django中的缓存: 前戏: Django中的几种缓存方式: Django中的缓存应用: 二.跨域: 跨域知识介绍: CORS请求分类(简单请求和非简单请求) 示例: 三.自动生成接口 ...
- Nodejs教程09：实现一个带接口请求的简单服务器
示例代码请访问我的GitHub: github.com/chencl1986/- 带接口请求的简单服务器需求 虽然当前还未涉及到数据库的知识,但已经可以通过文件读写,实现一个简单的服务器,需求如下: ...
- Python—爬虫之Network，XHR，json 带参数请求数据（爬取歌单、歌词）
Python-爬虫之Network,XHR,json & 带参数请求数据(爬取歌单.歌词) Network是什么,能做什么 XHR要如何请求 json格式的转换 带参数请求数据 修改请求头,便 ...
- ajax ashx调试,asp.net——Ajax与ashx异步请求的简单案例
Ajax与ashx异步请求的简单案例: 前台页面(aspx): function gettext() { var intxt = $("#intxt").val(); $.ajax ...
- 原生ajax请求时出现xhr.status==0及POST请求无响应问题
用原生ajax请求时发现xhr.status == 0,于是找了好久,竟然发现是绑定事件的元素不是我点击的元素.参考以下资源 AJAX问题之XMLHttpRequest status = 0 xhr. ...
- php json获取get请求,PHP简单的Curl的Get请求和Curl的Post请求和file_get_contents的Get请求获取接口JSON数据...
PHP携带Cookie用Curl进行Post或Get请求获取数据 简单的curl请求(Get请求) function hansCurl($url) { $url="https://www.y ...
- 【vue2.0进阶】用axios来实现数据请求，简单易用
写了几期的黑话<互联网公司黑话大全>,有个同学问vue2.0的进阶篇算更新完了吗? 让我猛地想起进阶篇在推出预告的时候,大家都提醒前端君,vue-resource已经停止更新了,现在都推荐 ...
最新文章
- 关于hive中Map join 时大表left join小表的问题
- 苹果手机投屏软件_苹果手机怎样投屏到电脑上操作，用什么软件？
- php正则表达式，数组，函数
- python核心教程第二版答案_python核心编程第二版第4章习题答案.docx
- javaScript第三天（1）
- Blazor+Dapr+K8s微服务之开发环境调试
- 英语期末复习unit 1-2课后习题第一题及背诵段落
- 常见Java错误的十大列表（前100名！）
- Notepad++背景颜色设置
- [Winform] DataGridView辅助类
- Linux系统安装MySQL5.7，授权远程登陆
- Vue uniapp省份城市列表选择、省市选择
- 【技术美术图形部分】纹理基础2.0-凹凸映射
- UINO优锘：面向架构管理的可视化
- 已有的事，后必再有。已行的事，后必再行。
- Intellij IDEA 初学入门图文教程（六） —— IDEA 在 Performing VCS Refresh 卡死
- oracle空的显示成减号,qdrzq
- Deep-Feature-Flow文章及代码训练解析
- fluent 对电机油冷分析_车用油冷电机温度场分析
- HP-UX 11.31 安装RAC 添加共享磁盘的问题