ajax是怎样传输数据的?

ajax是怎样传输数据的?

ajax是什么鬼呢？其实不难理解，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。

 

Web的运作原理就是：一次http请求对应一个页面,这也是form表单提交之后会刷新页面的原因

如果用户停留在这个页面中，同时发生新的HTTP请求，就必须用javascrpt发送这个新的请求，接收到数据后，在用javascript更新页面，这样，用户就感觉自己仍然停留在当前的也民安，但是数据是不断更新的

 

用javascritp写一个完整的AJAX要注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。

 

AJAX的两种传输：post和get

基本步骤：

　　　　1.创建连接

　　　　2.客户端向服务端发送数据

　　　　3.服务端向客户端返回数据

　　　　4.客户端接收数据完毕

<div id="div"></div>
<input type="file" id="pic" />
<img src="" alt="" id="image" style="width:400px;height:30/>
<script>
//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.onload=function(){
　　　　console.log(this.responseText);
    }

　　　//发送数据
　　　//post
　　　　var img = document.getElementById("pic");
　　　　img.onchange=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);
</script>