繁忙带懒,好久没更新文章了(其实主要是眷恋留住你们有的化前面文章知识点的时日,哈哈哈)。

俺们于眼前文
《从编程小白及全栈开发:基于框架开发服务端》蒙,初步学习了哪些运用Node.js服务端框架Express来修后端服务,并基于Express,对我们以前之简单计算器程序的代码进行了平不善重构。如果你是只新家的话,相信经过看和推行前面的几乎首稿子,你早已会开投机写有代码了,并能够针对一个顺序的一一组成部分建立由进一步清晰直观的认识,知道呀是客户端,什么是服务端。

今天,在这个基础及,我眷恋进行一下你们对于客户端的知道。如果自身从未猜错的话,应该多丁犹见面管网页,移动app,桌面程序等用户直接可以操作的一些,当做客户端。从一个顺序的用户角度来说,这种说法是未曾错的。不过,从程序本身来说吧,客户端的定义就是会见广阔多,来拘禁下图:

每当该图示意的系中,我们发出多独后端服务(在一个实在的软件系统遭到,这个是死广泛的),这些后端服务中为会相互的进展调用;后端服务也会见调用其他第三方提供的劳动。这种情况下,我们见面把提供劳务之称之为服务端,调用服务之称之为客户端。因此,该图中的界面UI后端服务1后端服务2每当该简单的限外,都足以吃称呼客户端:界面UI后端服务1后端服务2的客户端;后端服务1后端服务2第三方服务1的客户端,以此类推。

客户端调用服务端的时光,需要按照先的预约,也即是我们经常说之商。到目前为止,我们付出的服务都是冲HTTP协议,所以在客户端我们呢还需要采取HTTP协议来倡导调用。

当浏览器被调用HTTP服务

以浏览器中,我们平常可以由此<form>表单或XMLHttpRequest的来调用服务端的HTTP服务。

使用<form>

咱先来拘禁一下运<form>,如何来调用我们事先写的计算器后端服务/calc

每当咱们的html代码会如是这样:

<form class="calculator" action="/calc" method="GET">
    <input type="text" id="num1" name="num1">

    <select id="operator" name="operator">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>

    <input type="text" id="num2" name="num2">

    <button type="submit">计算</button>
</form>

于这表单中,<form>签上的action性设置也目标调用的劳务路径,method安装也调用所下的HTTP方法。然后于<form>表单下的<input><select>且亟待装及name特性,它们会被用做调用服务之参数誉为,传递及服务端。

使用XMLHttpRequest

使用XMLHttpRequest调用的章程,也就算是咱熟悉的AJAX,其实以咱们事先的计算器示例代码中便已使了:

function calc() {
    // 获取id为num1的输入框
    var num1El = document.getElementById('num1');

    // 从num1输入框获取文字内容并转换成数字类型
    var num1 = parseFloat(num1El.value);

    // 获取id为num2的输入框
    var num2El = document.getElementById('num2');

    // 从num2输入框获取文字内容并转换成数字类型
    var num2 = parseFloat(num2El.value);

    // 获取id为operator的下拉框
    var operatorEl = document.getElementById('operator');

    // 从下拉框获取当前选中的内容
    var operator = operatorEl.value;

    // 后端服务的地址
    var requestUrl = '/calc';

    // 要发送到后端的数据
    var requestParams = 'num1=' + num1 + '&num2=' + num2 + '&operator=' + encodeURIComponent(operator);

    // 把上面的地址和数据拼到一起来
    var url = requestUrl + '?' + requestParams;

    // 创建一个XMLHttpRequest对象,通过它来和后端服务进行通信交互
    var xhr = new XMLHttpRequest();

    // 设置当后端请求产生反馈后的处理
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            // 成功
            if (xhr.status === 200) {
                alert('计算结果是:' + xhr.responseText);
            }
            // 失败
            else {
                alert('请求服务器失败');
            }
        }
    };

    // 开始发送请求
    xhr.open('GET', url, true);
    xhr.send(null);
}

以此代码中,直接下了XMLHttpRequest的API来展开服务之调用,没有考虑到在不同浏览器上的兼容问题,代码也比较长,在如今底实际付出被,我们曾休极端会动用了,取而代之的凡下经过好封装的开源库,如jQuery,
axios等。

咱来拘禁一下行使这些开源库的API是如何来贯彻等价的劳务调用功能的。

当下是采用jQuery改写成的本:

function calc() {
    $.ajax({
        method: 'get',
        url: '/calc',
        data: {
            num1: parseFloat($('#num1').val()),
            num2: parseFloat($('#num2').val()),
            operator: $('#operator').val()
        }
    }).then(function (result) {
        alert('计算结果是:' + result);
    }).catch(function () {
        alert('请求服务器失败');
    });
}

假如这是行使axios改写成的版本:

function calc() {
    axios({
        method: 'get',
        url: '/calc',
        params: {
            num1: parseFloat(document.getElementById('num1').value),
            num2: parseFloat(document.getElementById('num2').value),
            operator: document.getElementById('operator').value
        }
    }).then(function (response) {
        alert('计算结果是:' + response.data);
    }).catch(function () {
        alert('请求服务器失败');
    });
}

可以看出,使用jQuery或axios改写的版本,从代码上来说,要比较采用原始XMLHttpRequest
API的本要言简意赅,而且还支持Promise,所以于形容异步流程控制代码方面,显得要惠及多。另外,这些库都考虑到了浏览器之间的兼容问题,所以同样的代码在不同之浏览器上运行,都不要紧问题。

在Node.js中调用HTTP服务

关押罢浏览器端的调用,我们重新转至服务端来。在Node.js的服务端代码中,如果一旦发起对任何HTTP服务之调用的话,Node.js提供了一个名叫http的模块。

咱以Node.js中失去调用一个天气预报的API,代码看起会是这样子的:

const http = require('http');

http.get('http://www.weather.com.cn/data/sk/101190401.html', function (req, res) {
    let result = '';
    req.on('data', function (data) {
        result += data;
    });
    req.on('end', function () {
        console.info(result);
    });
});

施行就段代码,可以获近似如下的结果:

{“weatherinfo”:{“city”:”苏州”,”cityid”:”101190401″,”temp”:”17″,”WD”:”东南风”,”WS”:”2级”,”SD”:”44%”,”WSE”:”2″,”time”:”17:05″,”isRadar”:”0″,”Radar”:””,”njd”:”暂无真相”,”qy”:”1017″,”rain”:”0″}}

大凡匪是也杀简单的?这是Node.js自带的模块,其实还有众多老三方的开源库可以就此,比如request,或者是前提到了之axios(它以支持浏览器端和Node.js端)。作为都栈JS开发,我们蛮期待代码复用性强,风格统一,因此,我推荐无论在浏览器端还是Node.js端,我们且可合以axios来修HTTP服务调用代码。

故此,我们继承来用axios改写一下地方的代码:

记得先安装一下axios模块:
npm install axios

const axios = require('axios');

axios({
    method: 'get',
    url: 'http://www.weather.com.cn/data/sk/101190401.html'
}).then(function (response) {
    console.log(response.data);
}).catch(function () {
    console.log('请求服务器失败');
});

总结

经过上述简单的事例,希望能够给您触类旁接,然后经过自己的深深上了解,完全掌握客户端和劳动端的定义,以及两者之间的内在联系。

点击下充斥本文的完好代码

新的一样年,学习创造新的价。
迎关注同斤代码的一连串课程《从编程小白到全栈开发》

相关文章

网站地图xml地图