ajax是怎样传输数据的?

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.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);

 

posted @ 2017-11-15 00:29  云淡风轻xin  阅读(3917)  评论(2编辑  收藏  举报