常见的前端ajax请求方式post和get

AJAX

即 Asynchronous [e’sɪŋkrənəs] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

get方式

发送get请求的步骤

//1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

//2. 设置请求行
// 第一个参数:请求方式  get/post
// 第二个参数:请求的地址 需要在url后面拼上参数列表
xhr.open("get", "01.php?name=Jepson");

//3. 设置请求头
//请求头中可以设置Content-Type,用以说明请求主体的内容是如何编码
,get请求时没有请求体,无需设置

//4. 设置请求体
//get请求的请求体为空,因为参数列表拼接到url后面了
xhr.send(null);

注意点 :

• get请求,设置请求行时,需要把参数列表拼接到url后面
• get请求不用设置请求头, 不用说明请求主体的编码方式
• get请求的请求体为null

post方式

发送post请求的步骤:

var xhr = new XMLHttpRequest();

// 1. 设置请求行 post请求的参数列表在请求体
xhr.open("post", "02.php");

// 2. 设置请求头, post 请求必须要设置 content-type, 标记请求体内容的解析方式,
 不然后端无法解析获取数据
xhr.setRequestHeader( "content-type", "application/x-www-form-urlencoded" );

// 3. 设置请求体
xhr.send( "name=Jepson&age=18" );

注意点 :

• post请求, 设置请求行时, 不拼接参数列表
• post必须设置请求头中的content-type为application/x-www-form-urlencoded,
  标记请求体解析方式
• post 请求需要将参数列表设置到请求体中