一、远古ajax实现方式如下：

1、前端请求后台，后台设置返回 http状态码204

2、运用img图片（或css/javascript等）的加载机制，请求后台

3、post提交数据，运用iframe标签，能post提交，且页面不刷新

二、现代ajax（运用XMLHttpRequest）：

<html>

    <head>

    <meta charset="utf-8">

        <script type="text/javascript">

            //创建http请求

            function createHttp(){

                var xml = null;

                if(window.XMLHttpRequest){

                    xml = new XMLHttpRequest(); //现在主流浏览器，包括IE7和以上版本

                }else if(window.ActiveXObject){

                    xml = new ActiceXObject('Microsoft.XMLHTTP');   //兼容IE6的浏览器

                }

                return xml;

            }

            //构造发送请求

            function httpStart(){

                var xml = createHttp(); //创建http对象

                xml.open('GET','./2020-02-22.php',true); //第一个参数：设置请求方式， 第二个参数：设设置请求  第三个参数：设置同步还是异步

                xml.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');  //设置为post请求, 必须在open() 之后、send() 之前调用setRequestHeader

                xml.send(null); //设置请求发送的数据,数据的格式：像get传参 key1=value1&key2=value2

                xml.onreadystatechange = function(){ //请求的状态每次变化都会触发这个函数

                    var state = this.readyState;   //请求的状态值0-1-2-3-4 5个代表值，其中4代表成功

                    if(state == 4){

                        console.log('请求状态码：'+state)

                        var text = this.responseText;  //获取返回的主体信息

                        console.log('返回主体：'+text)

                        var response = this.response;

                        console.log('返回信息：'+response)

                        var responseType = this.responseType;

                        console.log('返回数据类型：'+responseType)

                        var status = this.status;

                        console.log('返回的状态码：'+status)

                        var statusText = this.statusText;

                        console.log('返回的状态信息：'+statusText)

                        var responseXML = this.responseXML;

                        console.log('返回的xml信息：'+responseXML) //返回xml类型对象

                        var getResponseHeader = this.getResponseHeader('Content-length'); //http返回的属性名

                        console.log('返回请求的数据长度：'+getResponseHeader)

                        var getAllResponseHeaders = this.getAllResponseHeaders();

                        console.log('返回请求的全部信息：'+getAllResponseHeaders)

                    }

                }

            }

        </script>

    </head>

    <body>

        <button onclick="httpStart()">点击我</button>

    </body>

</html>

三、HTML5简单带进度条的文件上传

<!DOCTYPE html>

<html>

<head>

    <meta charset='utf-8'>

    <script type="text/javascript">

        function selfile(){

            var div2 = document.getElementById('div2');

            var file = document.getElementById('file').files[0];//html5新属性，获取上传文件对象

            var fm = new FormData(); //html5新属性，创建表单对象

            fm.append('file',file);

            var xml = new XMLHttpRequest(); //创建请求

            xml.open('POST','dfadf.php',true);

            xml.upload.onprogress = function (ev){//绑定上传的文件的监听事件

                if(ev.lengthComputable){//开始上传的标志

                    var progress = 100*ev.loaded/ev.total;//上传文件的大小/文件总大小

                    div2.style.width = progress + '%';

                    div2.innerHTML = parseInt(progress) + '%';

                }

            }

            xml.send(fm);

        }

    </script>

    <style type="text/css">

    #div1{

        width:500px;

        height:30px;

        border: 1px solid green;

    }

    #div2{

        width: 0%;

        height:100%;

        background: green;

    }

    </style>

</head>

    <body>

        <h1>html5进度条文件上传</h1>

        <div id="div1">

            <div id="div2"></div>

        </div>

        <input id="file" type="file" name="点击上传" onchange="selfile();" >

    </body>

</html>

ajax-属性、原理、实现html5进度条上传文件的更多相关文章

  1. PHP+ajaxForm异步带进度条上传文件实例

    在使用ajaxForm方法之前,首先需要安装form.js的插件,网上有: 一.首先说用法,ajaxForm可以接收0或1个参数,该参数可以是一个变量.一个对象或回调函数,这个对象主要有以下参数: v ...

  2. ajax利用html5新特性带进度条上传文件

    http://blog.csdn.net/pkgray/article/details/27591283 http://www.matlus.com/html5-file-upload-with-pr ...

  3. ajaxfileupload原理及用法，主要用于即想用ajax序列化传递参数，又必须上传文件

    一,原理 AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的功能,选择它因 ...

  4. 对Ajax连接的认识~为毛不能上传文件！！！

    最近做毕设的时候需要用到上传图片的功能,但是我的毕设全部的传输都是基于ajax的请求,百度了一圈发现TMD居然说ajax不能上传文件!!当时我就不乐意了啊,那难道其他人都用的是黑科技吗?!又来网上的大 ...

  5. ajax ＋jsp＋iframe无刷新上传文件[转]

    http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...

  6. AJAX-----15HTML5实现进度条上传

    目的当然还是为了提高用户的体验度嘛,, 废话不多说走码.... <!DOCTYPE html> <html lang="en"> <head> ...

  7. 通过Ajax提交form表单来提交上传文件

    Ajax 提交form方式可以将form表单序列化 然后将数据通过data提交至后台,例如: $.ajax({      url : "http://localhost:8080/" ...

  8. html5 拖拽上传文件时，屏蔽浏览器默认打开文件

    参考: https://www.cnblogs.com/kingsm/p/9849339.html

  9. Android上传图片到PHP服务器并且支持浏览器上传文件（word、图片、音乐等）

    暑假已经过了一半了,这才完成计划当中的第二个任务.虽然进度是慢了点.但也算是暑假的收获吧.下面我就把我学习当中的收获记录在此. 还是跟以往一样,先上图片. 操作的步骤:打开程序---->选择上传 ...

随机推荐

  1. 【译文连载】 理解Istio服务网格（第三章 流控）

    第3章 流控.............................................................................................. ...

  2. Centos7更改屏幕显示率

    第一种,在虚拟机中安装VMwareTools,之后在虚拟机菜单栏"查看"这一项选择立即适应窗口. 第二种,修改/boot/grub2/grub.cfg配置文件,在终端输入su,输入 ...

  3. 重读es6， 正确了解promise中catch的用法

    前言 在最近的项目中,用到了es6的promise语法,发现promise.prototype.catch 并不只是单单reject抛出的回调函数,所以今天做一些笔录,防止以后在项目中又碰到这样的问题 ...

  4. 安装Debian的磨磨唧唧

    安装Debian的磨磨唧唧 唆使VMware罢工的微软 这两天心血来潮想折腾,拆了我亲爱的Ubuntu.装个Debian 不过因为加入了微软的insider版本 就很尴尬的发现当我打开我的VMware ...

  5. 永久关闭linux swap

    一般来说,Linux的虚拟内存会根据系统负载自动调整.内存页(page)swap到磁盘会显著的影响Kafka的性能,并且Kafka重度使用page cache,如果VM系统swap到磁盘,那说明没有足 ...

  6. 【阿里云IoT+YF3300】15.阿里云物联网小程序构建

    2013年8月,“轻应用”概念提出,但是仅仅活跃四年随后淡出 ,直到2017年1月9号借助微信小程序成功续命.一时间,以微信小程序和支付宝小程序为代表的轻应用解决方案迅速贯穿多个环节,成为“万物互联” ...

  7. 【算法总结】图论/dp-动态规划 大总结

    写于一只蹲在角落的蒟蒻-Z__X... 2020.2.7,图论和 \(dp\) 终于告一段落.蓦然回首,好似已走过许多...不曾细细品味,太多太多又绵延不断地向我涌来... 谨以此纪念 逝去 的图论和 ...

  8. Spring MVC系列之JDBC Demo（SpringBoot）（七）

    前言 前面我们了解了Spring MVC的基本使用,其实和.NET或.NET Core MVC无异,只是语法不同而已罢了,本节我们将和和数据库打交道,从最基础的JDBC讲解起,文中若有错误之处,还望指 ...

  9. ASP.NET MVC通用权限管理系统(响应布局)源码更新介绍

    一.asp.net mvc 通用权限管理系统(响应布局)源码主要以下特点: AngelRM(Asp.net MVC)是基于asp.net(C#)MVC+前端bootstrap+ztree+lodash ...

  10. new function 到底做了什么？如何自己实现new function

    前言 这是继function 与 Function 关系后写下的. 写这个起源于,我无聊的时候看到一道题目: 'foo' == new function() { var temp=String('fo ...