Ajax总结·

Posted 2020-12-17 lbjn

• Ajax  原理介绍

  • ajax的主要目的是异步处理，也就是刷新整个页面获取数据。就像我们在填写一些表单时候，还没提交系统就会提示是否正确，大大提高了用户体验。
  • 主要原理：在浏览器中存在一个·XHR对象，按照我的理解，XHR在浏览器和服务器之间是一种代理模式，XHR代替浏览器向服务器发送请求，然后再把返回的数据交给XHR，再返回给浏览器。从而实现浏览器不刷新页面更新数据
  • 注意，由于Ajax受到同源策略的影响，不支持跨域请求，以及在调试时候记得要配置在服务器，如tomcat， Apache等

• Ajax  实现基本步骤

  •  1 //创建XHR对象 ie6和ie5 使用·new ActiveXObject(Microsoft.XMLHTTP);
     2 var xhr=new XMLHttpRequest();
     3 //设置请求方法和资源地址
     4 xhr.open("get","php/index.php");
     5 //发送请求
     6 xhr.send();
     7 //当执行完请求后就会调用该函数,无论成功与否
     8 xhr.onload=function(){
     9     //服务端返回的状态码，一般只有200时候才表示成功
    10       console.log(xhr.status);
    11     //返回的内容
    12       console.log(xhr.responseText);
    13 }

• Ajax  get请求

  • 由于get请求向服务器发送请求是将数据按照  ?name=123&……的格式拼凑在URL后面
  • 所以，一般格式为

    //一般可以通过获取表单input的值
    var text= document.getElementById("idname").value;
    //拼接url
    var url ="php/index.php"+"?id="+text;
    //创建XHR对象 ie6和ie5 使用·new ActiveXObject(Microsoft.XMLHTTP);
    var xhr=new XMLHttpRequest();
    //设置请求方法和资源地址
    xhr.open("get",url);
    //发送请求
    xhr.send();
    //当执行完请求后就会调用该函数,无论成功与否
    xhr.onload=function(){
        //服务端返回的状态码，一般只有200时候才表示成功
          console.log(xhr.status);
        //返回的内容
          console.log(xhr.responseText);
    
    }

• Ajax  post请求

  • 相比get请求，post可以发出更多的数据
  • 要发送post请求，数据是以字符串形式放在作为send的参数
  • 并且需要通过  setRequestHeader（）   设置  Content-Type 属性的值，表示用什么编码方式发送数据
    • • • 浏览器的原生 form 表单 　　application/x-www-from-urlencoded
          • • • • 　数据使用类似于get请求的拼接，   name=123&data=456  整合成字符串
        • 但需要发送文件时                  multipart/form-data  
          • • • •  使用该属性时候一般需要通过下里面方式获取表单内容，包括文件
                • 　　let form=document.getElementById("myform"); 
                • 　　let formData = new FormData(form);
        • 表示json数据   　　                application/json
          • • • • 　    大部分原生支持 JSON.stringify（对象），只需要把对象放进去就能变成json字符
        • 表示XML数据 ，基本没人用了现在                    text/xml

  • //一般可以通过获取表单input的值
    var text= document.getElementById("idname").value;
    var data="text="+text;
    //创建XHR对象 ie6和ie5 使用·new ActiveXObject(Microsoft.XMLHTTP);
    var xhr=new XMLHttpRequest();
    //设置请求方法和资源地址
    xhr.open("post","php/index.php");
    //发送请求
    xhr.setRequestHeader("Content-text","application/x-www-from-urlencoded")
    xhr.send(data);
    //当执行完请求后就会调用该函数,无论成功与否
    xhr.onload=function(){
        //服务端返回的状态码，一般只有200时候才表示成功
          console.log(xhr.status);
        //返回的内容
          console.log(xhr.responseText);
    
    }

     

• Ajax  回调函数 onload 和 onreadystatechange比较

  • 　readyState表示Ajax执行的阶段每一个阶段都会执行一次  onreadystatechange 函数  当readyState等于4时候表示执行完毕
     
  •    onload 函数只有当Ajax执行完才会执行
• Ajax的封装原理，创建函数 设置默认值  判断请求方式  判断编码方式  设置返回函数。