【Ajax】Ajax 简介

Ajax 简介

Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术。它通过使用 JavaScript、XML（现在更常用的是 JSON）和异步通信来实现在不重新加载整个页面的情况下与服务器进行数据交换。

Ajax 的优点

1. 异步通信：Ajax 使用异步方式与服务器进行通信，不需要刷新整个页面，减少了不必要的数据传输和页面加载时间。
2. 用户体验：通过部分更新页面内容，实现动态加载数据和实时更新，提升用户体验和交互性。
3. 前后端分离：通过 Ajax，前后端的数据交换能更加灵活，可以实现前后端的解耦，提高开发效率。
4. 增量更新：只更新需要变动的部分，而不是整个页面刷新，减少了网络流量，提高了网页的性能。
5. 可扩展性：Ajax 可以与其他技术和工具结合使用，如使用 RESTful API、使用第三方库等，增加了开发的灵活性和可扩展性。

Ajax 的缺点

1. 安全性：使用 Ajax 可能会面临跨域请求的安全限制，需要特殊处理，如设置 CORS（跨源资源共享）头部信息。
2. SEO 不友好：由于 Ajax 是动态更新页面内容，而不是刷新整个页面，对搜索引擎优化 (SEO) 不友好，搜索引擎可能无法正确解析异步加载的内容。
3. 增加复杂性：使用 Ajax 增加了前端代码的复杂性，需要处理更多的异步请求和错误处理。
4. 需要处理并发：由于 Ajax 是异步的，当同时发起多个请求时，需要注意并发请求的管理和处理。

HTTP 请求与响应

HTTP 请求的组成部分

1. 请求行：包含了请求的方法、目标资源的 URL 和使用的协议版本。

GET /path/to/resource HTTP/1.1

• 请求方法：表示要执行的操作类型，常见的有 GET、POST、PUT、DELETE 等。
• URL：指定要请求的资源的路径。
• 协议版本：指示使用的 HTTP 协议版本，如 HTTP/1.1。

2. 请求头部：包含了关于请求的额外信息，如用户代理、内容类型、认证信息等。头部以键值对的形式表示，每个键值对一行。

Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
Content-Type: application/json

• Host：指定目标服务器的主机名和端口号。
• User-Agent：标识发起请求的客户端信息，如浏览器类型和版本。
• Content-Type：指定请求的主体内容的类型，如表单数据、JSON 数据等。

3. 请求体（可选）：在某些情况下，请求可能包含请求体，用于发送数据给服务器。例如，在 POST 请求中，请求体通常包含要提交的表单数据或 JSON 数据。

{ "username": "john", "password": "secret" }

HTTP 响应的组成部分

1. 响应状态行：包含了响应的协议版本、状态码和相应的状态消息。

HTTP/1.1 200 OK

• 协议版本：指示使用的 HTTP 协议版本，如 HTTP/1.1。
• 状态码：表示请求的处理结果的数值代码，如 200 表示成功，404 表示资源未找到，500 表示服务器内部错误等。
• 状态消息：是对状态码的简短描述，如 "OK" 表示成功。

2. 响应头部：包含了关于响应的元信息，如内容类型、缓存控制、认证信息等。头部以键值对的形式表示，每个键值对一行。

Content-Type: text/html
Cache-Control: no-cache
Content-Length: 1024

• Content-Type：指示响应体的数据类型，如 text/html、application/json 等。
• Cache-Control：控制缓存的行为，如 no-cache、max-age 等。
• Content-Length：指示响应体的字节长度。

3. 响应体：包含了实际的响应数据，如 HTML 内容、JSON 数据、图像、音频等。响应体的内容根据 Content-Type 头部进行解析。

    


    
Hello, World!

GET 请求 & POST 请求

GET 请求和 POST 请求只有请求方式不一样，其他都一样。

为了降低前后端联调的沟通成本，很多开发者会以 RESTful API 规范使用 GET / POST 请求。

1. 约定参数传递方式：
   1. GET 请求：参数通过 URL 的查询字符串（query string）进行传递。
      参数附加在 URL 后面，以 ? 开头，参数之间使用 & 分隔。例如：https://example.com/api/data?id=123&name=John。
   2. POST 请求：参数通过请求的消息体（request body）进行传递。
2. 约定使用场景：
   1. GET 请求：用于获取数据，例如从服务器获取页面内容、资源文件等。
      GET 请求是幂等的，多次重复的 GET 请求对服务器的数据不会产生影响。
   2. POST 请求：用于提交数据，例如提交表单数据、创建新资源等。
      POST 请求可能对服务器状态进行修改，每次提交可能会产生不同的结果。

query string & request body：

1. 安全性：以 query string 的方式传递参数，会将参数暴露在 URL 中。以 request body 的方式传递参数，会将参数封装在请求体中。相对来讲 request body 确实会安全一些。但需要注意的是，不论以 query string 还是 request body 的方式传递参数，都是明文传输的，都是不安全的。

2. 请求长度限制：由于浏览器会限制 URL 的长度，一般为 2M 左右。所以，以 query string 的方式传递的参数是有长度限制的，而以 request body 的方式传递的参数则没有长度限制。