传统的请求方式

传统的web应用程序中，用户向服务器发送一个请求，然后等待，服务器接受到用户的请求然后响应。在这段时间内，用户会只能等待数据传输完成，否则什么事情也不能做。这是因为以往的传输方式为同步处理方式。

Ajax的工作方式

和传统的web应用不同，Ajax采取了异步交互避免了用户请求-等待-应答交互方式的缺点。 Ajax在应用程序和服务器中引入了一个中间层---Ajax引擎，它是用Javascript编写的，在一个隐藏的框架中运行。Ajax引擎负责呈现用户界面， 以及代表用户和服务器进行交互。Ajax引擎允许用户和服务器进行异步的交互。这样就可以实现一边填写表单一边验证的效果。

 xhr.open("get","xxxx.aspx?_dc="+new Date().getTime(),true);

3. Ajax乱码问题 
乱码问题虽然我们目前遇到的不多，但是也属于比较常见的一个问题了。出现的主要原因就是编码不一致导致的。 如果出现乱码问题了，首先检查一下meta声明的charset要和请求的页面返回的charset一致。response.charset="gb2312 or utf-8"

4. 使用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                    

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

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

       $.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("添加失败");
            }
        });                

        $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);
        });                

    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);
    }            

    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);
    }            

                  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:服务器产生内部错误                

(1) 在使用xhr对象发送请求和处理请求响应之前，必须先用js语言创建一个xhr对象。由于xhr对象当前还不是w3c标准，所以才有多种方式进行创建以解决兼容性问题。具体创建方式如下：

                   var xmlhttp;
                    if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                      xmlhttp=new XMLHttpRequest();
                    }else{
                    // code for IE6, IE5
                      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }