AJAX学习（一）
2021-03-14
AJAX
（尚硅谷）
摘要：Ajax技术的核心是XMLHttpRequest对象（简称XHR），可以通过使用XHR对象获取到服务器的数据，然后再通过DOM将数据插入到页面中呈现。虽然名字中包含XML，但Ajax通讯与数据格式无关，所以我们的数据格式可以是XML或JSON等格式。
AJAX：异步的js和xml。通过AJAX可以再浏览器中向服务器发送异步请求，无刷新获得数据。
XML：可拓展标记语言，被设计用来传输和存储数据。全部都是自定义标签。
现在已经被JSON取代了
AJAX的优点：无需刷新页面与服务器进行通信。
允许根据用户事件来更新部分页面内容。
缺点：没有浏览历史、存在跨域问题、SEO不友好
- HTTP协议：规定了浏览器与服务器之间互相通信的规则。
-
##请求（报文）
重点是格式与参数
~~~
行 POST /URL HTTP/1.1（HTTP版本）
头 Host：atguigu.com
Cookie：name=guigu
User-Agent：chrome 83
空行
体 username=admin&password=admin
（如果是GET请求，请求体可以为空，如果是POST，请求体可以为空）
~~~
##响应（报文）
~~~
行 HTTP/1.1 200 OK （协议版本、响应状态码、响应状态字符串）（方法、url、协议版本）
头 （格式和请求头一样）
Content-Type：text/html；charset=utf-8；空行（必须得有）
体 <html>
<head>
</head>
<body>
<h>
</body>
</html>~~~
- 谷歌浏览器控制台查看通信报文(F12、network）
-
node.JS：就是一个应用程序，可以解析js代码
Express：基于node.js平台、极简的的web开发框架
VSCODE代码部分
express的基本使用（当作服务器）
发送请求
- 设置url参数的方法
- POST请求
- POST参数设置
![]()
- AJAX设置请求头
![]()
- 服务端响应json，向服务端发送请求，服务端返回结果，大多都是json格式
nodemon自动重启（修改服务器之后会自动启动）
- AJAX请求超时和网络异常处理
![]()
- AJAX取消请求
![]()
