发表于： 2017-03-18 22:26:47
1 1154
一、今天完成的事情：
1.修改了前台页面，路由跳转的时候不能在页面顶部的bug；
2.修改了人才显示框的样式，具体还是需要等待UI图出来根据UI图来做；
3.学习了ajax
二、明天要做的事情：
1.测试后端出来的接口
三、遇到的问题：
ajax没怎么看懂，发一段笔记上来大家一起学习一下：
1.当函数执行到ajax的时候，会发送一个异步请求，返回的东西会存放在消息队列中，消息队列我觉得就是函数的执行栈，以先进先出的原则，所以我们的异步回调会在最后执行；
2.如果存在异步请求，它就会执行，然后将它的返回放进event loop中（事件循环），等到主线程空闲了之后，才会去读取事件循环中的东西，然后反应到页面中。
3.异步的服务器请求基于xmlHttpRequest对象，有10个普通属性和9个方法；
1.readyState属性（只读）请看下表
2.onreadystatechange事件回调方法，在readystate改变的时候会触发，所以在一个周期中它会被触发四次；而且它之中还会被传入Event实例：如图
3.status，属性，表示http请求状态，初始值为0，如果服务器没有显示的指定状态值，那它默认会是200；
4.statusText，只读属性，表示服务器返回的信息，status=20X的时候，它是一个大写的OK，其他的需要参考返回的参数
5.onloadstart事件回调方法；它触发的时机在发送请求之前，在ready state===1之后，也就是1和2之间触发，它默认会传入一个progressEvent事件进度对象，看图：
它之中有三个比较重要的只读属性，lengthComputable，表示长度是否可以计算，值为布尔值；loaded，表示已加载的资源的大小，不包括http header；total表示表示需要加载的整个文件的大小；
6.onprogress在readyState===3的时候触发（文件尚未加载完，还在加载中），它会传入progressEvent对象，我们可以通过e.loaded/e.total来获取当前下载的进度；
7.onload方法，在请求成功之后触发（只会在readystatu===4之后触发），它只是捕捉到一个成功的状态，然后执行一些回调函数；
8.onloadend（收到响应时，readystatu===4之后触发，未收到响应时，在readystatu===2时触发 ），默认传入一个progeressEvent对象；
9.timeout，设置ajax超时的时长，为0时不生效，为字符串时，如果字符串中全为数字就能正确转换成数字，如果不是，会抛出错误；
10.onTimeout，在超时的时候触发，回调函数；
11.response responseText,只读属性，response服务器返回的内容，response Text表示响应的文本形式；
12.responseXML，表示它是不是有效的xml，默认为null，若无效，则报错；
13.responseType，表示响应的类型，分为五种，arrarybuffer、blob、document、json、text；
14.responseURL，返回ajax最终的url，如果请求中存在着重定向，那么会返回重定向之后的url；
15.withCredentials，是一个布尔值，默认为flase，表示跨域请求中不发送cookies等信息，当它为true时，cookies、autorization header、tls客户端证书，都可以正常接受和发送，显然它的值对于同域请求并没有影响；
16.abort方法，此方法调用后，会取消ajax请求，调用之后readyState会被设置为0；
17.getResponseHeader，调用这个方法后，如果header中存在同名的name，它的值会以字符串的形式组合在一起，它可以这么使用：
console.log(xmlHttpRequest.getResponseHeader("content.type"))
18.getAllresponseHeader,调用这个方法，可以获取所有安全的ajax响应头，它们将以key：value的形式组合在一起
19.setRequestHeader,用于设置响应头 xhr.setRequestHeader("Content-type","application/json")，
20.onerror，用于在请求出现错误的时候执行；
21.upload属性，默认返回一个XMLHttprequestUpload对象，用于上传资源，它有如下几个方法：onloadstart,onprogress,onabort,onerror,onload,ontimeout,onloadend,这几个方法和xml里的几个方法是一样的，其中onprogress事件的回调方法可以查看当前的进度；
22.overrideMimeType方法，强制指定response的MIME类型，也就是强制修改content-type，
现代浏览器都支持xhr2级，它能够传输文件、获取进度、使用formData对象管理表单，还提供Access-Control-Allow-Origin等header，设置为*时，表示允许任何域名的请求；从而实现cors访问；可以设置timeout和ontimeout对于超时进行处理；
但是ie10以下并不支持xhr2，它们只能支持XDomainRequest，它不支持跨域传入cookie，只能设置请求头的content-type的字段，不能访问请求头的信息；
我们还需要知道，在jq中，有一个$.ajax()对象，它实际上就是通过ajax方法来实现的，并且实现了兼容；它返回的是jqxhr对象，它还有三个回调函数，fall、done、always，字面意思，失败、完成、结束的时候
作者更推荐我们使用
Axios
来进行只有ajax的编译；
我觉得还可以看看请求头的选择，等会儿再看吧
今天还学到了一个东西，跳转到页面的时候，保持在页面顶端：
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
还有通过路由状态来判断加不加这个class，可以用在顶部导航栏
<li class="nav-page" ui-sref="app.findElite"
ng-class="{navChoice: $state.includes('app.findElite')||$state.includes('app.companyList')||$state.includes('app.talentDetail')}">
找精英<span class="nav-page-underline"></span>
</li>
返回列表
评论