AJAX简介

Ajax全称为Asynchronous Javascript And XML，即异步JS和XML。xml是一种用于标记电子文件使其具有结构性的标记语言。XML 被设计用来传输和存储数据，其焦点是数据的内容。HTML 被设计用来显示数据，其焦点是数据的外观。HTML 旨在显示信息，而 XML 旨在传输信息。XML和HTML类似，不同点：HTML中都是预定义标签如h1标签，XML中没有预定义标签，全是自定义标签，用来表示一些数据。由于json更简洁，转换成数据也更容易，xml现在已被JSON取代,所以xml仅了解级别。

xml和json示例：
<student>
    <name>孙悟空</name>
    <age>18</age>
    <gender>男</gender>
</student>
​
{"name":"孙悟空","age":18,"gender":"男"}

通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势：**==无刷新网页即可向服务器发送http请求从而获取数据==**，AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。例如下图获取到搜索你想找的结果，又能在不刷新网页时即可获取相关词条

又如我之前做登陆页面，只有提交表单才能返回取名规则，但ajax可以让刚填完input框就能反馈，如下图

再比如京东的二级分类侧边栏，不是一次性就将所有细枝末节加载出来再display: none;，而是当鼠标经过时ajax才请求数据。可以提高网页效率

今日头条的新闻，往下翻才能刷新说说，但网页没有刷新，也是ajax

AJAX 的特点

AJAX的优点

1. 可以无刷新页面与服务端进行通信
2. 允许你根据用户事件（鼠标事件 键盘事件 表单时间 文档事件）来更新部分页面内容

AJAX 的缺点

1. 没有浏览历史，不能回退。
2. 存在跨域问题（同源）
3. SEO不友好（爬虫获取不到信息）。甚至你用ajax获取的内容，用右键-打开源码（不是F12），都搜不到该数据。因为源代码是你刚打开网页时就准备好的，ajax的效果是后加的。

http

每次请求，请求分请求报文和响应报文。

前者结构是 请求行+请求头+空行+请求体。

请求行：请求类型（常用GET/POST） + url路径后的参数部分（如?tn=monline_4_dg&ie=utf-8&wd=xml是什么意思）+ http版本（如HTTP/1.1）

请求头内容很多，包括

请求体：对于GET请求，为空。对于POST请求，可以不为空，例如username=admin&pwd=admin

后者结构是 响应行+响应头+空行+响应体。

请求行：HTTP版本（如HTTP/1.1） + 响应状态码（如200）+ 响应状态字符串（如OK）

请求头内容很多，是对报文的描述，包括

空行必须有。

响应体：我们F12看到的html代码，就是存在这儿发到browser的，随后被browser提取渲染成网页。

善用Chrome

你可以在响应请求包的Payload里看到传的参，便于调试。

可以在响应体Response里看到HTML代码

这个Request Headers和Response Headers就是请求行+请求头 | 响应行+响应头

点击view source能看到完整无简化的原始的源码

preview是对响应体的预览

简单总结：分析请求报文，去看Request Headers + Payload的Form Data，分析响应报文去看Response Header + Response。如果是get且传参了，还可以去Payload的Query String Parameters看

Node.js简介

js引擎是单独的一个引擎，负责解析js代码。Node.js就是一个js引擎。

检查是否安装好node.js:

Express框架

基于Node.js平台，快速、开放、极简的Web开发框架。由于用它能尽量额外少学点，所以才学它。

npm介绍

npm (全称Node PackageManager，即node包管理器)是Node.js 平台的默认包管理工具、以JavaScript编写的软件包管理系统，用npm来分享和使用代码已经成了前端的标配。

本课程我们需在项目根目录下使用 npm init --yes 和 npm i express分别初始化和安装框架