Ajax之xhr数据请求(基于Node.js平台)

程序员文章站 2022-04-29 08:12:49

...

什么是Ajax?

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。

Ajax数据请求方式的特点:

1.客户端可以发送数据到服务端

2.客户端可以接收并解析服务端传过来的数据

3.可以对页面进行局部刷新

什么是xhr?

xhr:XML Http Request,是Ajax的核心

xhr常用的3种数据请求方法:get,post,form

xhr数据请求流程:

1.在客户端初始化xhr对象

使用get,post或form进行数据请求,并传接口、参数给服务端

2.服务端接收并处理客户端发送过来的数据,将其结果返回给客户端

根据客户端使用的方法来创建对应方法的实例化对象并接收数据

3.客户端接收返回的数据

注:以下代码均基于Node.js平台,如何搭建Node.js请参考:https://blog.csdn.net/qq_41646358/article/details/82191232

Get方法和Post方法的区别:

Get方法:1.参数在url中,比较简单,但不太安全

2.url长度不能超过1kb

Post方法:1.参数在请求体中,相对安全,涉及金融、支付等问题都需要用post方法

2.url长度只受限于服务器,可默认为没有长度限制

Get方法

如何区别客户端和服务端?

客户端文件: .html

服务端文件: .js

Ajax之xhr数据请求(基于Node.js平台)

(1)客户端:初始化xhr对象,设置接口和参数及发送请求

<body>
    <button onclick="get()">Get方法</button>
    <script>
        function get(){
            var xhr=new XMLHttpRequest()
            xhr.open('get','/function_get?function=这是get方法&des=get方法的参数直接在接口后面追加')
            xhr.send()
        }
    </script>
</body>

xhr.open():

参数一:数据请求方法(get,post,form),现在是get

参数二:接口及get方法的参数,以?分隔 ?前:接口,/function_get ?后:参数,多个参数之间用&连接

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

1.安装express库(这个库是必须的)

在终端中输入命令: npm install express

Ajax之xhr数据请求(基于Node.js平台)

2.引入express库,并创建express对象

var express = require('express')
var web=express()
web.use(express.static('public'))

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

web.get('/function_get', function (req, res) {
    var name = req.query.name
    var des = req.query.des
    console.log(name)
    console.log(des)
    setTimeout(function() {
        res.send('我已经收到了,对此我总结了以下六点......')
    }, 2000);
})

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

<body>
    <button onclick="get()">Get方法</button>
    <script>
        function get(){
            var xhr=new XMLHttpRequest()
            xhr.open('get','/function_get?function=这是get方法&des=get方法的参数直接在接口后面追加')
            xhr.send()
            xhr.onreadystatechange=function(){
                if (xhr.readyState==4){
                    console.log(xhr.responseText)
                }
            }
        }
    </script>
</body>

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

xhr.responseText:表示接收数据的文本

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

var express = require('express')
var web=express()
web.use(express.static('public'))
web.get('/function_get', function (req, res) {
    var name = req.query.function
    var des = req.query.des
    console.log(name)
    console.log(des)
    setTimeout(function() {
        res.send('我已经收到了,对此我总结了以下六点......')
    }, 2000);
})
web.listen('8080', function () {
    console.log('服务器启动')
})

(5)启动服务器

在终端中输入命令:node index

Ajax之xhr数据请求(基于Node.js平台)

(6)打开客户端网页,并修改网址

Ajax之xhr数据请求(基于Node.js平台)

点击按钮Get方法

服务端会出现:

Ajax之xhr数据请求(基于Node.js平台)

网页会打印出:

Ajax之xhr数据请求(基于Node.js平台)

Post方法

(1)客户端:初始化xhr对象,设置接口和参数及发送请求

注意:xhr.open(),xhr.send(),xhr.setRequestHeader,这3个方法与Get方法不同

function post(){
            var xhr=new XMLHttpRequest()
            xhr.open('post','/function_post')
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            xhr.send('function=这是post方法&des=post方法参数需要写到send里')
        }

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

web.post('/function_post', function (req, res) {
    var name = req.query.function
    var des = req.query.des
    console.log(name)
    console.log(des)
    setTimeout(function() {
        res.send('这是post方法,我知道了')
    }, 2000);
})

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

1.引入express库和body-parser库(这个库系统已经给了,不需要下载)

var express = require('express')
var body_parser=require('body-parser')
var web = express()
web.use(express.static('public'))
web.use(body_parser.urlencoded({
    extended:false
}))

2.接收并返回数据

function post(){
            var xhr=new XMLHttpRequest()
            xhr.open('post','/function_post')
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            xhr.send('function=这是post方法&des=post方法参数需要写到send里')
            xhr.onreadystatechange=function(){
                if (xhr.readyState==4){
                    console.log(xhr.responseText)
                }
            }
        }

之后的步骤与Get方法一样,这里就不多说了

这里只看一下结果:

服务端:

Ajax之xhr数据请求(基于Node.js平台)

客户端:

Ajax之xhr数据请求(基于Node.js平台)

Form方法

Form方法其实可以理解为Post方法的一个分支,两者除了传参不一样外,其余全都一样,这里就直接写代码了

客户端:

function function_form(){
            var xhr=new XMLHttpRequest()
            var form=new FormData()
            form.append('name','这是Form方法')
            form.append('des','每添加一个参数,就以这种形式追加一次')
            xhr.open('post','/function_form')
            xhr.send(form)
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    console.log(xhr.responseText)
                }
            }
        }

服务端:

1.引入express库,body-parser库和multer库(multer库需要下载,npm install multer)

var express= require('express')
var body_parse = require('body-parser')
var multer=require('multer')
var web = express()
var form=multer()
web.use(express.static('public'))
web.use(body_parse.urlencoded({
    extended:false
}))

2.接收并处理数据,然后返回结果

web.post('/function_form', form.array(),function (req, res) {
    var name = req.body.name
    var des = req.body.des
    console.log(name)
    console.log(des)
    setTimeout(function() {
        res.send('form方法多了一个参数,注意看')
    }, 2000);
})

结果:

服务端:

Ajax之xhr数据请求(基于Node.js平台)

客户端:

Ajax之xhr数据请求(基于Node.js平台)

就说这么多吧