前端实现请求进度条

1、前端实现请求进度条

一般使用readyStatechange事件探测HTTP请求的完成。

当正在加载服务器的响应时，XMLHttpRequest对象会发生progress事件，通常每隔50毫秒左右。所以用这些事件可以给用户反馈请求的进度。

• 下载的progress事件属于XMLHttpRequest对象
• 上传的progress事件属于XMLHttpRequest.upload对象。

event.total是需要传输的总字节，event.loaded是已经传输的字节。

自己项目的用的是jquery，局部刷新请求只有$.ajax(),没有XmlHttpRequest()对象，所以需要用$.ajax().settings.

给XmlHttpRequest()对象添加一个progress事件，返回一个新的xhr。这样就可以监听progress事件了。代码如下：

function addProgressForXhr(fn){
   var xhr = $.ajaxSettings.xhr();
   if(typeof fn =="function"){
        xhr.onprogress = fn;
   }
   return xhr
}

$.ajax({
  url:"xxxx",
  type:"get",
  xhr:addProgressForXhr(function(e){
      var percent = e.loaded/e.total;
  })
  success:function(){
     //do something
  }
})

//为jquery的XMLHttpRequest对象添加progress事件
var xhrOnProgress = function (fun) {
xhrOnProgress.onprogress = fun; //绑定监听事件
//使用闭包实现监听绑
return function () {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (xhrOnProgress.onprogress) {
xhr.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}

2、前端可以生成展位图的网站

https://fakeimg.pl/

 <img src="https://fakeimg.pl/850x150/?retina=1&text=数据正在准备中&font=noto">

记一个怪异的现象，前端display:none;

页面一开始进来主要展示区为display:none;之后请求到数据再渲染，正常的布局没有问题，但是出现flex布局时，div展示为宽度缩减，但是visibility:hidden就不会，相当于提前把位置占住了。所以可能会用到上面的占位图。 

3、实现多次发起请求，直到返回已经处理好的数据

使用 了setInteval(fn,3000)

判断条件为data.sate===3，则为已完成，使用clearInterval()，停止发请求。

代码实现如下：

success:checkState();

function checkState(){
   var timer = setInterval(_checkState,3500)
}
function _checkState(){
   $.ajax({
    url:"xxxx",
    type:"get",
    success:function(data){
       if(data.errcode == "0"){
       clearInterval(timer);
       //正常的逻辑操作
       }
    } 
   })
}

4、项目中需要动态组装多选框。注意三点：（1）for 循环多选项目的个数，每次生成一个options。 (2)对于生成的option给text赋值为具体选项值。(3)把每一项都append在select这个元素上面。

function buildSelect(data){
  for(var i=0;i<data.length;i++){
     var opts = document.createElement("option");
     opts.text = data[i]
     selEle.append(opts)
  }
    
}

难点：给select框选择的值绑定事件，取到当前option选项的value值去做需求。option 没有click事件，因此只能用表单事件change.

//路线选择去选择路线数值填充
//选择路线后行车路线图里面的src作出相应改变
function buildOption(data) {
var container = $("#selectArea")
var srtEle = $("#selEle");
$("#selEle").change(function (e) {
$('#mapChartTemp').attr("src", 'http:' + IP + ':8080/' + e.target.value);
})
for (var i = 0; i < data.length; i++) {
var opts = document.createElement("option");
var singleOption = "路线" + (i + 1);
opts.value = data[i];
opts.text = singleOption;
srtEle.append(opts);
}
container.append(srtEle)
}

用e.target.value来取得当前option的值。在e.target对象上面还有属性selectedIndex，用来表示当前选中的选项的索引。

5、onbeforeunload事件在刷新和关闭的时候都会执行，这里可以取消我们的数据刷新请求接口。

6、jquery里面的val()如果不赋值则为取值，需要给input框置空，则$("#id").val("");

7、需求：点击搜索按钮，当数据展示时，搜索按钮置灰，并且不能点击

$("#search").attr("disabled",true);
$("#search").removeAttr("disabled")

8、点击li元素的a标签才能发生跳转，需要点击整个Li元素区域都可以跳转

//li元素只有一个children元素为a元素。.href取其属性
$(".singleTitle").click(function(e){
window.location.href=this.children[0].href;
})