AJAX 前后台数据交互

96
大大的小小小心愿
2017.11.16 21:53 字数 209

一、创建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请求,后台接受请求进行处理,处理结果返回给前台的一串数据。

基础