前端实现请求进度条
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/
记一个怪异的现象，前端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难点：给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;
})