HTTP报文及ajax基础知识

HTTP报文及AJAX基础知识

HTTP报文

HTTP报文的格式如下：

<HTTP请求报文>
<请求头>
<请求体>

<HTTP响应报文>
<响应头>
<响应体>

其中，请求头和响应头以键值对形式出现，每个键值对占一行，键和值之间使用一个冒号加一个空格隔开；请求体和响应体可以为空，也可以包含各自的具体数据。

HTTP请求报文主要包括以下几个部分：

• 请求行：包括请求方法、请求URL和HTTP协议版本；
• 请求头：包括客户端浏览器信息、cookie信息、Accept-Language等浏览器和请求的相关信息；

• 请求体：包括请求的具体数据，比如：

• GET请求：请求参数以查询字符串的方式出现在URL中，没有请求体；

• POST请求：通过表单提交或者ajax提交数据，请求数据包含在请求体中。

HTTP响应报文主要包括以下几个部分：

• 状态行：包括HTTP版本、状态码和状态信息；
• 响应头：包括服务器端的详细信息，比如Content-Type、Content-Length等；
• 响应体：包括服务器端返回的数据，比如HTML页面、JSON数据等。

AJAX基础知识

AJAX即Asynchronous JavaScript and XML，是一种基于JavaScript和XML技术的异步数据交互技术。

AJAX的基本原理是利用了XMLHttpRequest对象，通过JavaScript代码向服务器发送请求并接收响应，从而实现了页面部分更新、异步加载数据、无需刷新页面就能更新页面等功能。

AJAX的实现主要包括以下几步：

1. 创建XMLHttpRequest对象；
2. 使用open()方法设置请求的方式、请求的URL和是否是异步请求；
3. 使用send()方法发送请求；
4. 监听XMLHttpRequest对象的onreadystatechange事件，处理服务器返回的响应数据；
5. 解析服务器返回的数据，更新页面。

AJAX示例1：XMLHttpRequest对象的初步使用

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求的方式、URL和是否是异步请求
xhr.open('GET', '/api/data', true);

// 发送请求
xhr.send();

// 监听状态变化事件
xhr.onreadystatechange = function() {
  // 处理服务器返回的响应数据
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
}

以上代码中，我们通过创建XMLHttpRequest对象，使用open()方法设置请求的方式、URL和是否为异步请求，发送请求并监听XMLHttpRequest对象的onreadystatechange事件，处理服务器返回的响应数据。

AJAX示例2：利用jQuery库实现

$.ajax({
  type: 'GET',
  url: '/api/data',
  success: function(data) {
    console.log(data);
  }
});

以上代码中，我们使用jQuery库中的ajax()方法，通过传入type、url和success等属性，向服务器发送GET请求并处理服务器返回的响应数据，更加简洁方便。