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