AJAX笔记

AJAX笔记

菜鸟教程-AJAX
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

一般步骤

1. 创建ajax对象【var xhr = new XMLHttpRequest();】
2. 打开对象【xhr.open(‘get’,‘ajax.txt’,true);】
3. 发送请求【xhr.send();】
4. 监听请求【xhr.onreadystatechange = function(){};】

例1：关于GET

<script>
  var xhr = new XMLHttpRequest();//创建ajax对象
  xhr.onreadystatechange = function(){
   //当xhr对象的readystate属性发生了改变，这个事件就会触发
   //readystate：
   //0 ===》 xhr对象已经创建，但是还没有进行初始化操作
   //1 ===》 xhr对象已经调用了open
   //2 ===》 xhr已经发出ajax请求
   //3 ===》 已经返回了部分数据
   //4 ===》 说明数据已经全部返回
   if(xhr.readyState !== 4){
    return;
    }
   if(xhr.status>=200 && xhr.status<=300){
    //数据放在xhr.responsetext的属性中（string类型的数据）
    document.querySelector('h1').innerHTML = xhr.responseText;
   }
   else{
    console.error('请求失败');
   }
  }
  xhr.open('get','ajax.txt',true)//打开这个对象
  xhr.send();//发送请求
 </script>

AJAX 创建对象

var xhr = new XMLHttpRequest();

AJAX 请求

xhr.open('get','ajax.txt',true);
xhr.send();

xhr.open(‘get/post’,url,true/false)
参数一（get/post）：请求类型get/post
参数二（url）：文件位置
参数三（true/false）：异步true，同步false

关于GET和POST
菜鸟教程
与POST相比，GET更简单也更快，并且在大部分情况下都能用，然而，在以下情况中请使用POST请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST没有数据量限制）
发送包含位置字符的用户输入时，POST比GET更稳定也更可靠

例2：关于POST

 <script>
  //1.创建xhr对象
  var xhr = new XMLHttpRequest();
  //5.监听数据返回
  xhr.onreadystatechange = function(){
   if(xhr.readyState !== 4){return;}
   if(xhr.status>=200 && xhr.status<=300){
    var resp = JSON.parse(xhr.responseText);
    is(resp.result){
     alert('登录成功');
    }else{
     alert('登录失败');
    }
   }else{
    console.error('请求失败');
   }
  }
  //2.配置这个对象
  xhr.open('post','login.php',true);
  //3.设定请求头，指明body中的数据是什么格式
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  //4.发送数据
  xhr.send('user=gap&password=123456');
 </script>

异步
菜鸟教程
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true

AJAX 监听

  xhr.onreadystatechange = function(){
  if(xhr.readyState !== 4){
    return;
    }
   if(xhr.status>=200 && xhr.status<=300){
         document.querySelector('h1').innerHTML = xhr.responseText;
   }
   else{
    console.error('请求失败');
   }
  }

当xhr对象的readystate属性发生了改变，这个事件就会触发
readystate：
0 ===》 xhr对象已经创建，但是还没有进行初始化操作
1 ===》 xhr对象已经调用了open
2 ===》 xhr已经发出ajax请求
3 ===》 已经返回了部分数据
4 ===》 说明数据已经全部返回
status：
200：完成
404：未找到页面
当readystate的值为4，status的值为200时，响应就绪