今天完成的事情

表单验证部分基本完成，但是自己写的校验器还是有问题

明天计划的事情

写路由，写登入页面的模板

遇到的问题

export function passwordValidator(control: FormControl): any {
 const PASSWORDD = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/;
 let valid = PASSWORDD.test(control.value);
 console.log(valid);
 return valid ? null : {password: {descpassword: '密码不能包含特殊字符'}}
}

这是自己写的一个检验器，但是每次console出来的都是false，暂时没有找到原因。

收获

写点小课堂的东西吧。

什么是AJAX

1. 背景介绍

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。 Ajax的概念由杰西·詹姆士·贾瑞特所提出。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

2. 只是剖析

a. 传统的请求方式
传统的web应用程序中，用户向服务器发送一个请求，然后等待，服务器接受到用户的请求然后响应。在这段时间内，用户会只能等待数据传输完成，否则什么事情也不能做。这是因为以往的传输方式为同步处理方式。
b. Ajax的工作方式
和传统的web应用不同，Ajax采取了异步交互避免了用户请求-等待-应答交互方式的缺点。 Ajax在应用程序和服务器中引入了一个中间层---Ajax引擎，它是用Javascript编写的，在一个隐藏的框架中运行。Ajax引擎负责呈现用户界面， 以及代表用户和服务器进行交互。Ajax引擎允许用户和服务器进行异步的交互。这样就可以实现一边填写表单一边验证的效果。

3. 常见问题

常见问题：
a. IE浏览器下面的缓存问题
b. 跨域问题
c. Ajax乱码问题
d. 使用post时需要设置请求体的编码格式
e. Ajax对象属性的大小写问题

4. 解决方案

a. 缓存问题：
在IE浏览器下面使用get请求时，如果第一次请求了数据之后IE会自动缓存数据，如果下一次再发送同样的 请求的时候浏览器会自动先去找缓存显示出来，所以如果请求的数据有变化的时候，这里是看不到变化的。
解决办法：
xhr.open("get","xxxx.aspx?_dc="+new Date().getTime(),true);
就是在请求的后面 加上_dc=。。。让url变成唯一，或者是，改成post请求。
b. 跨域问题：
这是我们目前见到的最多的，也是最熟悉的一个问题。本地上面直接采用Nginx跨域实现。注意 Nginx跨域可以同时配置多个接口的，就是多写几个location就好了，然后location后面带的参数不一样就可以了。
**c. Ajax乱码问题 **
乱码问题虽然我们目前遇到的不多，但是也属于比较常见的一个问题了。出现的主要原因就是编码不一致导致的。 如果出现乱码问题了，首先检查一下meta声明的charset要和请求的页面返回的charset一致。response.charset="gb2312 or utf-8"
d. 使用post提交的时候需要设置请求头(编码参数)

       XHR:        content-Type: application/x-www-form-urlencoded                    content-Type: multipart/form-data        jQuery:     content-Type: application/x-www-form-urlencoded        $http:      content-Type: application/json        http:       content-Type: application/json

使用原生Ajax需要先设置请求参数(open):

xhr.open("post","xxxx.aspx",true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

e. Ajax对象属性的大小写问题:

     if (xhr.readystate == 4)  // IE ok  /  firefox error
     if (xhr.readyState == 4)

同理还有属性 responseText，responseXML。
习惯采用驼峰形式的写法可以避免这个问题。

5. 编码实战

a. jQuery方法:

$.ajax({
           url: "student-ajax/student", //端口
           type: "POST",               //方法
           dataType: "json",           //编码格式
           data: {
               name: $("#names").val(),
               qq: $("#QQs").val(),
           },
           success: function(data){
               console.log(data);
               if(data.code === 200){
                   alert($("#names").val() + "学员信息" +data.message);
               }else{
                   alert(data.message);
               }
           },
           error: function(data){
               console.log(data);
               alert("添加失败");
           }
       });

b. AngularJS方法

$http({
           method:'get',     //同样的参数
           url:('/a/a/all/document?type=1&page='+$scope.page),
           headers:{'Content-Type':'application/x-www-form-urlencoded'}
       })
       .success(function (response) {    //处理方法
           console.log(response.total);
           console.log(response);
           console.log(aaa);
           // if (response.message === "查询成功") {
            $scope.userList = response.data;
            $scope.userTotal = response.total;
           $scope.page=response.page;
           // console.log($scope.userList.total);
       });

c. Angular 2 方法Obserable()

   getLogMes(user: User): Observable<CurrentUser> {
   const LOG_URL = 'xxx/xxx/xxx';
   //json
   // let body = JSON.stringify({'name': user.name, 'pwd': user.password});
   // let headers = new Headers({'Content-Type': 'application/json'});
   //string
   let body = `name=${user.name}&pwd=${user.password}`;
   let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
   let options = new RequestOptions({headers: headers});
   return this.http.post(LOG_URL, body, options)
     .map(this.extractData)
     .catch(this.handleError);
   }

该方法返回一个Obverable流，但是调用getLogMes()方法会并不会发送请求，还需要订阅这个流才会发送请求。
d. Angular 2 方法Primise()

   getLogMes(user: User): Primise<any> {
   const LOG_URL = 'xxx/xxx/xxx';
   //json
   // let body = JSON.stringify({'name': user.name, 'pwd': user.password});
   // let headers = new Headers({'Content-Type': 'application/json'});
   //string
   let body = `name=${user.name}&pwd=${user.password}`;
   let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
   let options = new RequestOptions({headers: headers});
   return this.http.post(LOG_URL, body, options)
       .toPromise()
     .map(this.extractData)
     .catch(this.handleError);
   }

返回一个Promise()对象，调用getLogMes()方法后会直接发送求。
e. 原生ajax

   var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象;
   request.onreadystatechange = function () { // 状态发生变化时，函数被回调;
       if (request.readyState === 4) { // 成功完成
           // 判断响应结果:
           if (request.status === 200) {
               // 成功，通过responseText拿到响应的文本:
           } else {
               // 失败，根据响应码判断失败原因:
           }
       } else {
           // HTTP请求还在继续...
       }
   }
   // 发送请求:
   request.open("POST","/skill-ajax/a/login",true);
   request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   request.send();
   alert('请求已发送，请等待响应...');
 // readyState值说明
 // 0,初始化,XHR对象已经创建,还未执行open
 // 1,载入,已经调用open方法,但是还没发送请求
 // 2,载入完成,请求已经发送完成
 // 3,交互,可以接收到部分数据
 // status值说明
 // 200:成功
 // 404:没有发现文件、查询或URl
 // 500:服务器产生内部错误

6. 扩展思考：常见的异步操作有哪些？

1. 回调函数：
   funA(funB(...));
2. Promise

   (new Promise(functton (resolve, reject) {}))
   .then(funA)
   .then(funB)

3. Obervable
   Rxjs的核心对象。

7. 参考文献

a. 什么是跨域
b. AngularJS中then和success的区别
c. Ajax常见问题
d. JavaScript Promise迷你书

8. 相关链接

PPT:https://ptteng.github.io/PPT/PPT/js-05%20ajax-cd122.html

腾讯视频: https://v.qq.com/x/page/u050704xpgu.html

日报链接: http://www.jnshu.com/daily/24188?dailyType=others&total=76&page=1&uid=9948&sort=0&orderBy=3

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~

我的邀请码：99483716，或者你可以直接点击此链接：IT修真院