AJAX 前后台数据交互

一、创建xhr对象 XMLHttpRequest

var xhr = new XMLHttpRequest();

二、等待响应(数据当前请求的状态) onreadystatechange

xhr.onreadystatechange = function(){
    console.log(this.readyState);
}

一、事件 onreadystatechange 在readystate改变

二、readyState 有四个值

0 - 初始化状态
1 - 正在加载(开始创建连接)
2 - 加载完毕(客服端向服务端发送数据)
3 - 正在处理(服务端向客户端返回数据)
4 - 处理完毕(客户端接受数据完毕)

三、传输的数据发生改变(上传图片)

img.onchange = function(){
    xhr.open("POST","XXX.php",true);
    //xhr.open("GET","XXX.php",true);
    var formData = new FormData();
    formData.append("title","天猫");
    formData.append("pic",img.files[0]);
    xhr.send(formData);
    //xhr.send(null);
}

一、FormData 创建键值树传送数据

    var formData = new FormData();
    formData.append("title","天猫");
    formData.append("pic",img.files[0]);  //选中的第一张图片

二、xhr.open( );

三个参数：

2.1 post、get
    前台向后台发送数据：
    post、get —— 差不多一样,send时get值:null;post不写值。
        xhr.open("GET","11.15getdanmu.php",true);
        xhr.send(null);  // 发送数据

        xhr.open("POST","11.15getdanmu.php",true);
        xhr.send();
    后台向前台传数据：
        xhr.open("GET","11.15danmu.php?word=" + word); 
        xhr.send();

        xhr.open("POST","11.15danmu.php");
        xhr.send(formData);

2.2 打开的url，即数据要传送(获取数据)的地址

2.3 是否异步（true / false）
    当该boolean值为true时，服务器请求是异步进行的，也就是脚本执行send（）方法后不等待服务器的执行结果，而是继续执行脚本代码；
    当该boolean值为false时，服务器请求是同步进行的，也就是脚本执行send（）方法后等待服务器的执行结果的返回
    若在等待过程中超时，则不再等待，继续执行后面的脚本代码！

四、客户端接受数据完毕

  xhr.onload = function(){
    console.log(this.responseText);
  }

1、客户端接收后台处理后的值
2、 responseText(响应文本) 客户端发送ajax后台 XML请求，后台接受请求进行处理，处理结果返回给前台的一串数据。