JS中的前后端交互技术ajax

ajax（Asynchronous JavaScript And XML）：异步的JavaScript和数据传输

1. 数据传输格式
   ① XML：适合重量级数据，通过标签传输，解析较复杂
   ② JSON：适合轻量级数据，通过字符串传输，解析较容易（经常使用）
2. 语法
   ① 声明ajax对象：let xhr = new XMLHttpRequest();
   ② 预设请求方式、要访问的地址、是否异步：xhr.open(‘get/post’, url, true/false);
   ③ 发送请求：xhr.send();
   ④ 等待响应：通过事件处理函数onreadystatechange监听readystate变化
3. readyState取值
   ① 0：调用open方法之前
   ② 1：调用send方法之后，发送请求时
   ③ 2：send方法完成，已经接收到所有相应数据
   ④ 3：正在解析数据
   ⑤ 4：解析完成
4. get请求

   let xhr = new XMLHttpRequest();   // 声明ajax对象
   xhr.open('get', './get.php?username=xxx&password=yyy', true); // 预设get请求方式、拼接查询字符串的地址、是否异步
   xhr.send(); // 向服务器发送请求
   xhr.onreadystatechange = function() {  // 等待数据相应
   	if (xhr.readyState === 4 && xhr.status === 200) { // 解析完成且状态码为200时，进行后续操作
   		console.log(xhr.responseText);	
   	}
   1
   2
   3
   4
   5
   6
   7

5. post请求

   let xhr = new XMLHttpRequest(); // 声明ajax对象
   xhr.open('post', 'post.php', true); // 预设post请求方式，要访问的地址，是否异步
   xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); // 设置请求头部，用来解析传入的参数
   xhr.send('username=xxx&password=yyy'); // 向服务器发送请求，需要传入queryString
   xhr.onreadystatechange = function () { // 等待数据响应
   	if (xhr.readyState === 4 && xhr.status === 200) { // 解析完成且状态码为200时，进行后续操作
   		console.log(xhr.responseText);
   	} 
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9