AJAX到底是什么,今天介绍一下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{  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{  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迷你书

 

原文

未经允许不得转载:绿岛小站 » AJAX到底是什么,今天介绍一下AJAX

赞 (0)

评论 0

评论前必须登录!

登陆 注册