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请求的区别。

xhr的get请求

xhr的post请求

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

代码如下：

 

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('服务器启动成功......')

})