ajax是什么鬼呢?其实不难理解,它只是一个哥们“发明”的缩写:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求。
Web的运作原理就是:一次http请求对应一个页面,这也是form表单提交之后会刷新页面的原因
如果用户停留在这个页面中,同时发生新的HTTP请求,就必须用javascrpt发送这个新的请求,接收到数据后,在用javascript更新页面,这样,用户就感觉自己仍然停留在当前的也民安,但是数据是不断更新的
用javascritp写一个完整的AJAX要注意:AJAX请求是异步执行的,也就是说,要通过回调函数获得响应。
AJAX的两种传输:post和get
基本步骤:
1.创建连接
2.客户端向服务端发送数据
3.服务端向客户端返回数据
4.客户端接收数据完毕
html代码 <div id="div"></div> <input type="file" id="pic" /> <img src="" alt="" id="image" style="width:400px;height:30/> script代码: //创建一个xhr对象 var xhr = new XMLHttpRequest();
//请求过程中,readStatehi发生变化 //0 - 初始状态, //1 - 开始创建连接 //2 - 客户端向服务端发送数据 //3 - 服务端开始想客户端返回数据 //4 - 客户端接收数据完毕
xhr.onreadystatechange=function(){ console.log(this.readyState);//1 2 3 4 }
//请求状态可以有另一种写法,意义相同,表明后台已经成功返回数据 //等同于:if(this.readyState==4){}
xhr.οnlοad=function(){
console.log(this.responseText);
}
//发送数据
//post
var img = document.getElementById("pic");
img.οnchange=function(){
xhr.open("post","11.14jsonData.php",true);\
//FormData()建立对象传送数据
var formData = new FormData();
formData.append("title","京东方");
formData.append("data","2017-11-14");
formData.append("pic",img.files[0]);//选中的第一张图片
//2.发送数据:send()方法
xhr.send(formData);
}
//get
xhr.open("GET","11.14jsonData.php?action=1&data=abc",true);
xhr.send(null);