ajax请求

Ajax数据请求方式的特点:

1.客户端可以发送数据到服务端
2.客户端可以接收并解析服务端传过来的数据
3.可以对页面进行局部刷新

xhr数据请求流程

1.在客户端初始化xhr对象，选择请求方式进行数据请求，并传接口及参数给服务端
2.服务端接收并处理客户端发送过来的数据，并返回结果给客户端
3.客户端接收返回回来的数据

注:以下代码均基于Node.js平台,如何搭建Node.js请参考:node.js平台搭建

GET方法

（1）客户端：初始化xhr对象，设置接口、参数及发送请求

 // 1.初始化xhr对象
  var xhr=new XMLHttpRequest();
 // 2.设置请求方式并传接口、参数给服务端
  xhr.open('get','/interface_get?param1=123')
  // 3.发送请求
  xhr.send()

xhr.open():

参数1: 数据请求方法(get,post,form),现在是get
参数2: 接口及get方法的参数,以?分隔 ?前:接口,/info ?后:参数,多个参数之间用&连接

(2)服务端:接收请求并处理数据,将其结果返回给客户端

1. 安装express模块：npm install express
   
2. 引入express模块，实例化express对象与使用public静态资源文件夹

var express = require('express')   //网咯请求基础模块
var web = express()      //实例化express对象
web.use(express.static('public'))   //使用静态资源public文件夹

3. 接收并处理数据，并把处理结果返回给客户端

web.get('/interface_get',function(req,res){
    var p1 = req.query.param1
    console.log(p1)
    res.send('get方式请求成功')
})

(3) 客户端：接收返回的数据

  // 4.监听状态的变化
    xhr.onreadystatechange = function(){
       // 5.处理返回的结果
       if(xhr.readyState==4){
       console.log(xhr.responseText)
       }              
    }

xhr.readyState==4:表示数据已经接收完毕
xhr.responseText:表示接收数据的文本

(4) 服务端:设置端口(这里设置为本地端口,8080)

web.listen('8080',function(){
    console.log('服务器启动...')
})

(5) 启动服务器

post方法

（1）客户端：初始化xhr对象，设置接口、参数及发送请求

   //  post 请求
        function post(){
             var xhr=new XMLHttpRequest();
             xhr.open('post','/interface_post')
             xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
             xhr.send('param2=456')
             xhr.onreadystatechange = function(){
                  if(xhr.readyState==4){
                       console.log(xhr.responseText)
                  }              
             }
         } 

注意：post方式与get方式不同的地方:

(2)服务端:接收请求并处理数据,将其结果返回给客户端

1. 安装express模块：npm install express
2. 引入需要的模块

var express = require('express')   //网咯请求基础模块
var web = express()      //实例化express对象
var bodyParser = require('body-parser')

web.use(express.static('public'))   //使用静态资源public文件夹
web.use(bodyParser.urlencoded({extended:false}))

注意：post请求方式需引入body-parser模块：

3. 接收并处理数据，并把处理结果返回给客户端

web.post('/interface_post',function(req,res){
    var p2 = req.body.param2
    console.log(p2)
    res.send('post方式请求成功')
})

注意：get请求体是req.query, post请求体是req.body

(3) 客户端：接收返回的数据

(4) 服务端:设置端口(这里设置为本地端口,8080)

(5) 启动服务器

（3）、（4）、（5）步与get相同