什么是Ajax？

• ajax全称：Asynchronous JavaScript XML
• 是一种异步加载数据的技术
• 可以通过使用Ajax， 实现页面的局部刷新

Ajax的使用

Ajax的核心对象：XMLHttpRequest对象

1. Get
2. Post

创建过程

1. Get

// 1. 创建ajax对象
var xhr=new XMLHttpRequest();
// 2. 监听请求
xhr.onreadystatechange=function(){
  //当这个xhr对象的onstate事件发生变化的时候触发
  /*
  readyState：
  0：对象已经创建，但还未初始化
  1：对象已经调用open方法
  2：对象已经发送ajax请求
  3：已经返回部分数据
  4：数据已经全部返回
  */
  if(xhr.readyState!=4){
    return;
  }
  if(xhr.state>= 200 && xhr.status<= 300){
    //处理接收的数据
    var data=xhr.reponseText;
  }else{
    //请求失败
    console.error("请求失败");
  }
}
// 3. 打开这个对象
xhr.open('get','./test.txt',true);
// 4. 发送请求
xht.send();

2. Post

// 1. 创建ajax对象
var xhr=new XMLHttpRequest();
// 2. 监听请求
xhr.onreadystatechange=function(){
  //当这个xhr对象的onstate事件发生变化的时候触发
  /*
  readyState：
  0：对象已经创建，但还未初始化
  1：对象已经调用open方法
  2：对象已经发送ajax请求
  3：已经返回部分数据
  4：数据已经全部返回
  */
  if(xhr.readyState!=4){
    return;
  }
  if(xhr.state>= 200 && xhr.status<= 300){
    //处理接收的数据
    var resp=JSON.parse(xhr.reponseText);
    if(resp){
      //todo 登陆成功
    }else{
      //todo 登陆失败
    }
  }else{
    //请求失败
    console.error("请求失败");
  }
}
// 3. 打开这个对象
xhr.open('post','./login.php',true);
// 4. 设置请求头 指明body中数据是何种格式
xhr.setRequestHeader('Content-Type',  'application/x-www-form-urlencoded');
// 5. 发送请求
xht.send('user=root&password=123456');