ajax是怎样传输数据的?

蔚落 2021-09-30 10:54 586阅读 0赞

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

转载于:https://www.cnblogs.com/ydfqixn/p/7836118.html