part0_Web基础设施

网页与服务器的交互方式

传统方式

实例应用一

进入主界面

进入note界面

在note界面新建笔记

提交表单会引起5个HTTP请求，第一个是表单提交事件。这是一个HTTP POST请求，指向服务器地址newnote,这是由表单的action和method属性决定的。表单提交的数据可观察到正是输入的note数据：

服务器回应的是HTTP状态代码302。这是一个URL重定向，服务器要求浏览器对头信息Location中定义的地址–即地址notes做一个新的HTTP GET请求。
于是，浏览器重新加载了笔记页面。重载又引起了三个HTTP请求：获取样式表（main.css）、JavaScript代码（main.js）和笔记的原始数据（data.json）。

由于获得的HTML中包括有图片的链接，浏览器又做了一次HTTP-Get，从服务器上获取图片kuva.png，同理当返回的html中包含有其他需要加载资源的标签，浏览器都会再次向服务器发起请求,如引入css和JavaScript。

AJAX

实例应用
SPA风格的网站并不像我们的样例应用那样从服务器上单独获取所有的页面，而是只由一个从服务器上获取的HTML页面组成，其内容由在浏览器中执行的JavaScript来操作。

进入单页应用note界面

在note界面新建笔记

可以看见，浏览器只向服务器发送一条请求，HTTP—POST，发送的内容为新建笔记的数据，包括内容和时间戳。

表单默认处理会将数据发送到服务器并导致一个新的GET请求。所以需要该事件处理程序立即调用方法e.preventDefault()来阻止表单提交的默认处理。

服务器返回创建成功的信息。

总结

• 应用的HTML文档可以是一个保存在服务器目录中的静态文本文件。服务器也可以根据应用代码，例如使用数据库中的数据，动态地形成HTML文档。
• 在传统的 web 应用中，浏览器只从服务器上获取HTML文档，按照指示渲染HTML，而所有的应用逻辑都在服务器上。

制图工具