经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 程序设计 » PHP » 查看文章
WEB前端第六十一课——xhr对象POST请求、xhr兼容性、timeout、progress
来源：cnblogs　　作者：后来喵　　时间：2021/2/1 12:02:49　　对本文有异议

1.xhr对象发送post请求

　　Ajax中post请求与get请求不同之处在于多了一个表单，而get请求则是通过url发送附加信息。

　　在xhr对象中，post请求可以通过FormData构建表单数据。

　　语法：var formData = new FormData();

　　　　　formData.append('key',value);　　//value为字符串时需要使用引号。

　　　　　xhr.send(formData);

　　说明：formData的创建必须在“xhr.send(formData)”之前！

　　示例：

　　　　var userName = document.querySelector('.userName').value;

　　　　var userCode = document.querySelector('.userCode').value;

　　　　var formData = new FormData();　　//FormData()为系统内置对象类

　　　　formData.append('uName',userName);

　　　　formData.append('uCode',userCode);

　　　　xhr.send(formData);

　　补充：

　　　⑴ GET请求的主要特点：

　　　　GET请求可被缓存，请求保留在浏览器历史记录中

　　　　GET请求可被收藏为书签

　　　　GET请求不应在处理敏感数据时使用

　　　　GET请求有长度限制

　　　　GET请求只应当用于取回数据

　　　⑵ POST请求的主要特点：

　　　　POST请求不会被缓存，不会保留在浏览器历史记录中

　　　　POST请求不能被收藏为书签

　　　　POST请求对数据长度没有要求

　　　⑶ 与POST相比，GET 更简单也更快，并且在大部分情况下都能用。

　　　　然而，在以下情况中，需使用POST请求：

　　　　　　无法使用缓存文件（更新服务器上的文件或数据库）

　　　　　　向服务器发送大量数据（POST没有数据量限制）

　　　　　　发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

　　　　参考资料：w3cschool

2.xhr对象兼容问题

　　xhr对象的获取方式在 IE 和 非IE 环境下需要使用不同的方法。

　　语法：

　　　　IE浏览器支持的方法：ActiveXObject('')

　　　　非IE环境支持的方法：XMLHttpRequest()

　　因此，在创建 xhr 对象时需要进行判断，示例如下：

　　　　if(window.XMLHttpRequest){

　　　　　　var xhr = new XMLHttpRequest();

　　　　}else if(window.ActiveObject){

　　　　　　var xhr = new ActiveXObject('');

　　　　}

　　也可以直接使用三目运算进行处理：

　　　　xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("");

3.请求超时

　　timeout 属性值等于一个整数，用于设置当请求发出后等待接收响应的时间。

　　ontimeout() 方法则是等待超时后，自动执行的回调函数。

　　语法：

　　　　xhr.timeout == n;　　　　//时间单位“毫秒”，表示请求发出后响应等待时间。

　　　　xhr.ontimeout = function(){

　　　　　　console.log('The request for'+url地址+'time out');

　　　　}

　　说明：如果在设置的时间内没能收到后台响应内容，则视为请求超时自动执行ontimeout函数。

　　　　　如果该属性设置等于 0（默认值），表示没有时间限制！

　　代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>原生Ajax请求</title>
  6. <!--    <script src="../JScodeFile/jquery-1.8.3.js"></script>-->
  7. </head>
  8. <body>
  9.     <label for="userName">登录账户</label>
  10.     <input type="text" id="userName" class="userName">
  11.     <br>
  12.     <label for="userCode">登录密码</label>
  13.     <input type="text" id="userCode" class="userCode">
  14.     <br>
  15.     <button>登录</button>
  16. <script>
  17.     var uName = document.querySelector('.userName');
  18.     var uCode = document.querySelector('.userCode');
  19.     var btn = document.querySelector('button');
  20.     btn.onclick=function () {
  21. //      var xhr=new XMLHttpRequest();   //创建对象，准备发送Ajax请求
  22.  
  23. //      考虑浏览器兼容性问题，创建 xhr 对象时需要进行判断。
  24.         if(window.XMLHttpRequest){
  25.             var xhr = new XMLHttpRequest();
  26.         }else{
  27.             var xhr = new ActiveXObject();
  28.         }
  29.         xhr.onreadystatechange=function () {    //监听后台接收请求状态的变化
  30.             if (xhr.readyState==4){             //判断当前请求进行到何种状态，属性值 4 表示后台已经接收到前台请求
  31.                 if (xhr.status==200){           //判断前台是否准确接收到后台反馈的数据，属性值 200 表示通信成功
  32.                     console.log(xhr.responseText);  //获取后台反馈的完整数据，json串
  33.                     console.log(typeof xhr.responseText);   //返回结果为 string 类型
  34.                     console.log(JSON.parse(xhr.responseText));   //解析返回结果转换为对象
  35.                 }
  36.             }
  37.         }
  38.         xhr.timeout=2000;       //超时设置单位“毫秒”！！
  39.         xhr.ontimeout=function(){
  40.             alert('访问超时，请刷新页面重新加载。')
  41.         }
  42. //      使用 get 方式发送请求：
  43.         xhr.open('get',"xhr.php?name="+uName.value+"&code="+uCode.value,true);
  44. //         xhr.open('get',"xhr.php?name="+$('.userName').val()+"&code="+$('.userCode').val(),true);
  45.         xhr.send(null);
  46.  
  47. //      使用 post 方式发送请求：
  48. /*        xhr.open('post','xhr.php',true);
  49.         var formD = new FormData();
  50.         formD.append('name',uName.value);
  51.         formD.append('code',uCode.value);
  52.         xhr.send(formD);*/
  53.     }
  54. </script>
  55. </body>
  56. </html>
  1. <?php
  2. /*    $name1=$_POST['name'];
  3.     $code1=$_POST['code'];*/
  4.     $name1=$_GET['name'];
  5.     $code1=$_GET['code'];
  6.     $res = array('msg'=>'ok','info'=>$_GET);
  7.     $res['userName']=$name1;
  8.     $res['userCode']=$code1;
  9. //    sleep(3);       //设置服务器睡眠，单位“秒”！！
  10.     echo json_encode($res);
  11. ?>

4.进度条

　　⑴ progress

　　　　HTML中使用<progress>标签用于定义运行中的任务进度。

　　　　progress属性有：

　　　　　　max，设置任务完成的值；

　　　　　　value，设置任务当前进度值。

　　　　注意：<progress>需要与JS配合使用显示任务进度；

　　　　　　<progress>不能用于表示度量衡，如存储空间使用情况（使用<meter>标签）

　　⑵ progress常用属性

　　　　lengthComputable，返回一个布尔值，表示当前进度是否有可计算长度，

　　　　　　　　　　　　　默认为true，表示进度没有100%，进度100%时变为false；

　　　　total，返回一个整数，表示当前进度的总长度，

　　　　　　如果是通过HTTP下载资源，表示内容本身长度，不包含HTTP头部的长度，

　　　　　　如果lengthComputable属性值为false，则total属性无法取得正确的值。

　　　　loaded，返回一个数值，表示当前进度已经完成的数量，

　　　　　　该属性值除以total属性值，可以得到目前进度的百分比。

　　⑶ upload

　　　　upload是XMLHttpRequest对象的一个属性，其属性值亦是一个对象，

　　　　　　该对象定义了addEventListener()方法和整个progress事件集合。

　　代码示例：

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>进度条</title>
  6. </head>
  7. <body>
  8.     <progress max="1" value="0"></progress>
  9.     <input type="file" name="tempFile" class="tempFile" multiple><br>
  10.     <button onclick="fileSubmit()">上传文件</button>
  11.     <script>
  12.         function fileSubmit() {
  13.             var files=document.querySelector('.tempFile').files;
  14.         //  发送文件需要使用POST方式，创建FormData对象。
  15.             var fileData=new FormData();
  16.             for (var i=0,file;file = files[i];i++){
  17.         //  将文件添加到FormData对象中。
  18.                 fileData.append('fileName',file.name);
  19.             }
  20.         //  使用append方法添加到FormData的数据，并不是以对象属性的方式存储，外界无法直接访问到数据
  21.         //  需要使用 for of 方法才能在控制台中打印输出。
  22.             for (var value of fileData.values()){
  23.                 console.log(value);
  24.                 console.log(typeof value);
  25.             }
  26.         //  Ajax请求对象
  27.         //     var xhr=new XMLHttpRequest();    //直接创建
  28.             if (window.XMLHttpRequest){         //兼容性方式创建
  29.                 var xhr=new XMLHttpRequest();
  30.             }else if(window.ActiveXObject){
  31.                 var xhr=new ActiveXObject('');
  32.             }
  33.             // var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('');
  34.         //  监听请求响应通信状态
  35.             xhr.onreadystatechange=function () {
  36.                 if (xhr.readyState==4){
  37.                     if (xhr.status==200){
  38.                         console.log(JSON.parse(xhr.responseText));      //FormData添加文件时，无法直接解析输出！
  39.                     }
  40.                 }
  41.             }
  42.         //  任务进度监听，当上传进度发生改变时，回调函数自动执行
  43.             var progressBar = document.querySelector('progress');
  44.             xhr.upload.onprogress=function(eve){
  45.                 if (eve.lengthComputable){
  46.                     progressBar.value = (eve.loaded/eve.total);
  47.                 }
  48.             }
  49.         //  准备发送请求上传文件
  50.             xhr.open('post','progress.php',true);
  51.             xhr.send(fileData);
  52.         }
  53.     </script>
  54. </body>
  55. </html>
  1. <?php
  2.     echo json_encode($_POST['fileName']);
  3. ?>

 

原文链接：http://www.cnblogs.com/husa/p/14313241.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

PHP热门文章

  • 收藏了8年的PHP优秀资源，都给你整理好了
  • php对微信支付回调处理的方法（合集）
  • 聊聊TCP连接耗时的那些事儿
  • php如何比较两个浮点数是否相等详解
  • PHP实现PDO操作mysql存储过程示例
  • 富文本编辑器新增导入word功能，自动转为html，可直接显示图片
  • curl put方式上传文件
  • thinkphp3.2模块名如何不区分大小写?
  • php去掉字符串的最后一个字符
  • WebSocket 长连接 及超时问题解决

    • PHP推荐文章

  • 【workerman】uniapp+thinkPHP5使用GatewayWorker实现实时通讯
  • PHP转Go系列 | ThinkPHP与Gin框架之API接口签名设计实践
  • MagicArray:像php一样，让Go业务代码不再卷！
  • 2023年的PHP项目部署笔记。什么？还有人用PHP？
  • [CTF/Web] PHP 反序列化学习笔记
  • PHP的序列化和反序列化入门
  • 详解PHP实现HTTP服务器过程
  • 高效率开发Web安全扫描器之路（一）
  • PHP实现微信扫码登录功能的两种方式总结
  • PHP内存溢出的解决方法详解

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号