[项目][准备6] Ajax&Express体验

学习目标

在准备6中，我们将尝试使用Ajax在后台请求数据，并使用Express写一个轻量级的Web服务器配合Ajax进行测试。

由于项目基本会是单页应用，会涉及大量的局部刷新，使用Ajax在后台请求数据是不可或缺的

在准备6中，我们重点使用jQuery中的ajax方法，有关在Webpack下使用jQuery的方法详见准备5

学习参考

下列链接建议详细学习(重点在理解示例)：

• jQuery AJAX简介
• jQuery ajax()方法
• jQuery ajax-ajax()方法

下列链接为Express的预备知识(重点在于学会简单使用npm)：

• Node.js 安装配置
• Node.js 创建第一个应用
• NPM 使用介绍

下列链接建议详细学习(重点在跟着教程完整实践一遍)：

• Node.js Express框架

下列链接作为参考：

• JSON 教程

实践示例

准备工作

• 从这个地址：https://github.com/luxinasp/prepare6.git，clone或zip下载这个项目，得到下方目录结构

目录结构

-prepare6
    -app
        -containers
            App.jsx
        index.js
    .gitignore
    package.json
    server.js
    webpack.config.js

操作步骤

• 打开cmd，切换到prepare6目录

• 下载安装依赖，保持网络畅通，耐心等待完成

npm install

• 开启Express框架编写的Web服务器

npm run server

• 另开一个cmd，同样切换到prepare6目录，启动webpack-dev-server

npm run start

重要说明：webpack-dev-server是提供静态资源的Web服务器，主要功能是处理html和js的的静态请求；而Express那个是接受动态请求的Web服务器，主要功能是处理Ajax后台请求。两者的配合主要是靠webpack-dev-server自带的代理功能，可以把匹配的URL请求转发给Express的Web服务器。

• 打开Chrome浏览器，访问http://localhost:8080，即可看到页面

• Chrome浏览器下启动开发者工具，切换到Network选项卡，可以看到当点击按钮时有POST请求发出

• 观察最开始打开的cmd窗口的输出，可以看到Web服务器接收到请求并根据请求做出了响应

额外说明

在准备6中，webpack-dev-server和Express的配合不是为了对外提供服务，完全是为了帮助开发者测试。

webpack-dev-server有hot patch功能，可以在内存中极速编译并且直接更新浏览器页面，大大减少了开发者编译等待时间；Express实现Web服务器简单，而且可以直接处理json，可以帮助开发者快速简单的验证网页前端的动态功能。

简而言之，准备6讲的重点是Ajax，准备6中的webpack-dev-server和Express都是为Ajax测试服务的。