ajax是指一种创建交互式网页应用的网页开发技术。

AJAX产生的背景：

以前做数据交互的时候，大家通常选择使用表单的方式提交数据，表单提交这种方式，默认的时候会由当前页面跳转到action页面，所以用户体验及其糟糕，所以需要想办法让当前页面，不跳转的同时把数据传递过去，把服务器(后端)响应的内容拿回来。

特点: 在不提交整个页面的情况下, 实现页面的局部刷新; (让当前页面，不跳转的同时把数据传递过去，把服务器(后端)响应的内容拿回来。)

ajax 也需要在服务器环境下 (live server 本地假服务可以做前端页面展示但是没有后端和数据库)

1. 创建ajax请求(构造函数创建)

var xhr = new XMLHttpRequest();
console.log(xhr.readyState); // 0 请求未初始化只是创建了请求 还未进行任何操作

2. 配置请求相关的信息 (请求方式请求地址是否异步)

xhr.open(type,url,bool) 
type 请求方式 (get post) 
url 请求地址 (1.txt) 
bool 是否异步(默认 true:异步) 
xhr.open("get", "../data/1.txt", true);

3. 发送请求

xhr.send(); 
console.log(xhr.readyState); // 1 异步原因导致

4.等待后端(服务端) 响应绑定事件,监听xhr.readyState的改变 => 当xhr.readyState改变时触发此事件

xhr.onreadystatechange = function () { 
  console.log("请求的状态改变:", xhr.readyState); // 2 3 4 // 
xhr.readyState == 4 请求已经有响应结果 
// xhr.status==200 响应结果也是成功的 
if (xhr.readyState == 4 && xhr.status == 200) { 
// ajax请求后端 后端返回响应的数据(text json html) 
  console.log(xhr.responseText); } 
}

xhr.readyState 请求的状态

0 请求未初始化 (只是创建了请求还未进行任何操作)

1 已经建立请求,配置了请求相关的信息,但是请求还未发送

2 请求已发送, 但是正在处理中（通常现在可以从响应中获取内容头）

3 后端正在处理中通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成

4 响应已完成, 返回响应的结果 (请求还要继续,请求成功,跑路了(),请求失败,服务器出错)

xhr.status 后端返回的响应状态码(响应的结果)

1** 信息，服务器收到请求，需要请求者继续执行操作

2** 成功，操作被成功接收并处理

3** 重定向，需要进一步的操作以完成请求

4** 客户端错误，请求包含语法错误或无法完成请求

5** 服务器错误，服务器在处理请求的过程中发生了错误

200：ok，页面正确打开，并得到完整的响应内容。

301：被请求的资源已永久移动到新位置

302：请求的资源临时从不同的 URI响应请求

304：缓存

404：页面不存在。

500：常指后端代码发生错误

503：由于临时的服务器维护或者过载，服务器当前无法处理请求。

get

以get方式传递的数据会拼接在url之后以?分隔

GET 关联数据广泛接收前端以GET方式传递过来的数据 (form传递/ajax传递),我们可以使用超级全局变量

GET 来对应字段(键名)接收数据

请求的流程=>前端发送请求 (携带数据) => 后端后端接收请求,对应字段名(键名)接收数据,处理 => 返还数据给前端

$obj = array(); 
if($user&&$pwd){
  $obj["status"] = true; 
  $obj["detail"] = "用户名:$user,密码:$pwd;";
}else{
  $obj["status"] = false;
  $obj["detail"] = "请传入完整参数";
} 
  echo json_encode($obj);

post

数据类型 FormData => xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

POST 广泛接收以POST方式传递过来的数据 (form传递/ajax传递),我们可以使用超级全局变量 $_POST 来对应字段(键名)的数据

$user = $_POST["user"]; // 对应字段名 user 接收用户名
$pwd = $_POST["pwd"]; // 对应字段名 pwd 接收密码

ajax详解