JavaScript的AJAX

 

一、传统的前后端交互方式

1.1、异步和同步的概念

  •  同步(synchronous)    ——    指一个时间段内系统只能有一个进程在执行
  •  异步(asynchronous)    ——    指一个时间段内系统可以有多个进程在执行  

1.2、传统前后端交互的原理

     传统的前后端交互过程:

    传统的前后端交互方式(无AJAX)是同步交互的方式,同步的过程只允许有一个进程在执行。

    服务器在处理数据的时候,客户端不能进行任何操作,处于一个阻塞的状态。

1.3、传统前后端交互方式的缺点

  • 传统的Web网站,提交表单,需要重新加载整个页面
  • 如果服务器长时间未能返回Response,则客户端将会无响应,用户体验很差
  • 服务器返回Response后,浏览器需要加载整个页面,对浏览器的负担也是很大的
  • 浏览器提交表单后,发送的数据量大,造成网络的性能问题

二、AJAX简介

2.1、Ajax概念

    AJAX = 异步JavaScript和XML

    AJAX为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息,意味着用户单击后,可以不必刷新页面也能取得新数据。也就说可以使用AJAX技术取得新数据,然后再通过DOM将新数据插入到页面中。

    AJAX将浏览器原生的通信能力提供给了开发人员,简化了实现同样操作的任务。同时可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

2.2、Ajax原理

    在解释Ajax之前,可以先看一个"领导想找小李汇报工作"的例子:

    领导想找小李问点事,就委托秘书去叫小李,自己就接着做其他事件,直到秘书告诉他小李已经到了,最后小李跟领导汇报工作。

    Ajax请求数据流程与"领导想找小李汇报一下工作"类似:

    使用Ajax的程序,服务端在处理数据的时候,客户端浏览器依然可以执行其他的操作,并没有阻塞状态,也就是一个时间段内可以有多个进程在执行。

    Ajax技术的核心是XMLHttpRequest对象(简称XHR),XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。

    XHR扮演的角色相当于秘书,使得浏览器可以发出HTTP请求和接收HTTP响应。

    XHR能够以异步方式从服务器取得更多信息,意味着用户单击后,可以不必刷新页面也能取得新数据。也就是说可以使用XHR对象取得新数据,然后再通过DOM将新数据插入到页面中。

    Ajax虽然名字中包含XML的成分,Ajax通信与数据格式无关;这种技术就是无须刷新页面即可从服务器取得数据,但不一定是XML数据。

    Ajax的应用案例:

  • 搜索引擎的搜索词动态提示

  • 无刷新验证用户名的唯一性

2.3、Ajax的优缺点

    ①Ajax优点

  • 使用异步方式与服务器通信,页面不需要重新加载,页面无刷新,用户体验好
  • 按需求取数据,减少服务器的负担
  • 使得Web应用程序更为迅捷地响应用户交互
  • Ajax基于标准化的、并被广泛支持的技术,不需要下载浏览器插件或者小程序,但需要客户允许JavaScript在浏览器上执行
  • 浏览器的内容和服务器代码进行分离。页面的内容全部由JavaScript来控制,服务器端负责逻辑的校验和从数据库中拿数据

    ②缺点:

  • 安全问题:将服务器端的方法暴露出来,黑客可利用这一点进行攻击
  • 大量JS代码,容易出错
  • Ajax的无刷新重载,由于页面的变化没有刷新重载那么明显,所以容易给用户带来困扰——用户不太清楚现在的数据是新的还是已经更新过多;现有的解决有:在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等
  • 可能破坏浏览器后退按钮的正常行为
  • 一些手持设备(如手机、PAD等)自带的浏览器现在还不能很好的支持Ajax

三、使用AJAX

    AJAX的技术核心是XMLHttpRequest对象(简称XHR),现在几乎所有浏览器都提供这个原生内置对象,在JavaScript中通过操作XHR对象来使用AJAX。

3.1、创建XMLHttpRequest对象

    创建XMLHttpRequest对象的方式非常简单:

var xhr = new XMLHttpRequest();

3.2、发送请求

    首先需要调用XHR对象的open()方法启动一个请求以备发送(此时没有发送),它接受3个参数:

  • 要发送的HTTP请求类型,比如"GET", "POST"等。
  • 请求的URL
  • 表示是否异步发送请求的布尔值

    示例

// 启动一个GET请求,并没有发送
xhr.open("get", "http://localhost:8080/AjaxTest/AjaxServlet", false);

    如果确认要发送请求,则需要调用send()方法。

    send()方法接受一个参数,即要作为请求主体发送的数据,如果不需要通过请求主体发送数据,则必须传入null。使用Post方式请求就需要传入实体数据,使用Get方式请求就直接传入null。

// 启动一个GET请求,并没有发送
xhr.open("get", "http://localhost:8080/AjaxTest/AjaxServlet", true);
// 发送请求
xhr.send(null);

    由于这次请求是同步的,JavaScript代码会等到服务器响应之后再继续执行。

3.3、接收响应

    XHR对象有许多属性和响应有关:

  • responseText    ——    作为响应主体被返回的文本
  • responseXML    ——    如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保存包含着响应数据的XML DOM文档。
  • status    ——    响应的HTTP状态(HTTP状态码)
  • statusText    ——    HTTP状态的说明(HTTP状态码的相应文本)
  • readyState    ——     表示请求/响应过程的当前活动阶段,只有异步请求的情况下才可以检测到

    在收到响应后,响应的数据会自动填充XHR对象的属性。   

    其中readyState属性表示请求/响应过程的当前活动状态,这个属性可取的值如下:

  • 0    ——    未初始化。尚未调用open()方法
  • 1    ——    启动。已经调用open()方法,但尚未调用send()方法
  • 2    ——    发送。已经调用send()方法,但尚未接收到响应
  • 3    ——    接收。已经接收到部分响应数据
  • 4    ——    完成。已经接收到全部响应数据,而且已经可以在客户端使用了

    为确保接收到适当的响应,应该像下面这样检查上述这两种状态代码:

    只要readyState属性的值由一个值变成另一个值,都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。

    因此,一个完整的XHR发送请求和接收响应应该是这样的:

// 创建XHR对象
var xhr = new XMLHttpRequest();

// 先为XHR对象绑定事件,监听readyState属性变化,也即监听请求/响应的活动过程
xhr.addEventListener("readystatechange", () => {
    // 如果readyState属性等于4,表示已经接收到全部响应数据
    if(xhr.readyState === 4){       
        // 如果请求成功和重定向就打印响应数据,如果给出错误提示
        if((xhr.status === 200) || xhr.status === 304){
            console.log(xhr.responseText);
        }else{
            console("Request was unsuccessful: " + xhr.status);
        }
    }
});

// 启动一个GET请求,并没有发送
xhr.open("get", "http://localhost:8080/AjaxTest/AjaxServlet", true);

// 发送请求
xhr.send(null);

    另外,在接收到响应之前还可以调用abort()方法来取消异步请求:

// 取消异步请求
xhr.abort();

    调用这个方法后,XHR对象会停止触发事件,而且也不再允许访问任何与响应有关的对象属性。 

4.4、HTTP头部信息

    每个HTTP请求和响应都会带有相应的头部信息,其中有的对开发人员有用,有的也没有什么用。

    XHR对象也提供了操作这两种头部(即请求头部响应头部)信息的方法。

    默认情况下,在发送XHR请求的同时,还会发送下列头部信息:

  • Accept    ——    浏览器能够处理的内容类型
  • Accept-Charset    ——    浏览器能够显示的字符集
  • Accept-Encoding    ——    浏览器能够处理的压缩编码
  • Accept-Language    ——    浏览器当前设置的语言
  • Connection    ——    浏览器与服务器之间连接的类型
  • Cookie    ——    当前页面设置的任何Cookie
  • Host    ——    发出请求的页面所在的域
  • Referer    ——    发出请求的页面的URL。注意,HTTP规范将这个头部字段拼写错了,为了保证与规范一致,也只能将错就错了。这个英文单词的正确拼法应该是referrer
  • User-Agent    ——    浏览器的用户代理字符串

    使用setRequestHeader()方法可以设置自定义的请求头部信息。这个方法接收两个参数:

  • 头部字段的名称
  • 头部字段的值。

    服务器在接收到这种自定义的头部信息之后,可以执行相应的后续操作。

    要成功发送请求头部信息,必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()

    示例

        //启动一个请求,以备发送
        xhr.open("get", "example.txt", true);   //异步请求

        xhr.setRequestHeader("MyHeader", "MyValue");

        //发送请求
        xhr.send(null);

    调用XHR对象的getResponseHeader()方法并传入头部字段名称,可以取得相应的响应头部信息。

    调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串。

    示例

                    var myHeader = xhr.getResponseHeader("MyHeader");
                    var allHeaders = xhr.getAllResponseHeaders();

    在服务器端,也可以利用头部信息向浏览器发送额外的、结构化的数据。

    在没有自定义信息的情况下,getAllResponseHeaders()方法通常会返回如下所示的多行文本内容:

4.5、GET请求

    GET是最常见的请求类型,最常用于向服务器查询某些信息。

    必要时,可以将查询字符串参数追加到URL的末尾,以便将信息发送给服务器。

    XHR而言,位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。

    查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码,然后才能放到URL的末尾。

    而且所有名-值对都必须由和号(&)分隔,例如:

        xhr.open("get", "example.php?name1=value1&name2=value2", true);

    下面这个函数可以辅助向现有URL的末尾添加查询字符串参数:

        function addURLParam(url, name, value){
            url += (url.indexOf("?") == -1 ? "?" : "&");
            url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
            return url;
        }

    这个函数接受三个参数:

  • 要添加参数的URL
  • 参数的名称
  • 参数的值

    下面是使用这个函数来构建请求URL的示例:

        var url = "example.php";

        //添加参数
        url = addURLParam(url, "name", "Nicholas");
        url = addURLParam(url, "book", "Professional JavaScript");

        //初始化请求
        xhr.open("get", url, false);

4.6、POST请求

    POST请求通常用于向服务器发送应该被保存的数据。

    POST请求应该把数据作为请求的主体提交。

    POST请求的主体可以包含非常多的数据,而且格式不限

    在open()方法第一个参数的位置传入"post",就可以初始化一个POST请求,例如:

        xhr.open("post", "example.php", true);

    发送POST请求的第二步就是向send()方法中传入某些数据。

    由于XHR最初的设计主要是为了处理XML,因此可以在send()中传入XML DOM文档,传入的文档经序列化之后将作为请求主体被提交到服务器。

    当然,也可以在此传入任何想发送到服务器的字符串。

    默认情况下,服务器对POST请求和提交Web表单的请求并不会一视同仁,因此,服务器端必须有程序来读取发送过来的原始数据,并从中解析出有用的部分。

    可以使用XHR来模仿表单提交:

        首先,将Content-Type头部信息设置为application/x-www-form-urlencoded,也就是表单提交时的内容类型。

        其次,使用serialize()函数将页面中表单的数据序列化为字符串。

        示例

        function submitData(){
            var xhr = createXHR();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                        alert(xhr.responseText);
                    }else{
                        alert("Request was unsuccessful: " + xhr.status);
                    }
                }
            };

            xhr.open("post", "postexample.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            var form = document.getElementById("user-info");
            xhr.send(serialize(form));
        }

    这个函数可以将ID为"user-info"的表单中的数据序列化之后发送给服务器。

    与GET请求相比,POST请求消耗的资源会更多一些。

    从性能角度来看,以发送相同的数据计,GET请求的速度最多可达到POST请求的两倍。

 

五、XMLHttpRequest 2级

    XMLHttpRequest 1级只是把已有的XHR对象的实现细节描述了出来,而XMLHttpRequest 2级则进一步发展了XHR

5.1、FormData

    现代Web应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2级为此定义了FormData类型。

    FormData为序列化表单以及创建于表单格式相同的数据(用于通过XHR传输)提供了便利。

    下面的代码创建了一个FormData对象,并向其中添加了一些数据:

        var data = new FormData();
        data.append("name", "Nicholas");

    这个append()方法接收两个参数:键和值。

    分别对应表单字段的名字和字段中包含的值。可以像这样添加任意多个键值对儿。

    通过向FormData构造函数中传入表单元素,也可以用表单元素的数据预先向其中填入键值对:

        var data = new FromData(document.forms[0]);

    创建了FormData的实例后,可以将它直接传给XHRsend()方法,如下所示:

        xhr.open("post", "postexample.php", true);
        var form = document.getElementById("user-info");
        xhr.send(new FormData(form));

    使用FormData的方便之处体现在不必明确地在XHR对象上设置请求头部。

    XHR对象能够识别传入的数据类型是FormData的实例,并配置适当的头部信息。

5.2、超时设定

    XMLHttpRequest 2级规范为XHR对象添加了一个timeout属性,表示请求在等待响应多少毫秒之后就终止。

    在给timeout设置一个数值后,如果在规定的时间内浏览器还没有接收到响应,那么就会触发timeout事件

    示例:

        //启动一个请求,以备发送
        xhr.open("get", "example.txt", true);   

        xhr.timeout = 1;    //将超时设置为1秒钟
        xhr.ontimeout = function(){
            alert("Request did not return in a second.");
        }

        //发送请求
        xhr.send(null);

5.3、overrideMimeType()方法

    overrideMimeType()方法用于重写XHR响应的MIME类型。

    因为返回响应的MIME类型决定了XHR对象如何处理它,所以提供一种方法能够重写服务器返回的MIME类型是很有用的。

    示例

    假设,服务器返回的MIME类型是text/plain,但数据中实际包含的是XML

    根据MIME类型,即使数据是XMLresponseXML属性中仍然是null

    通过调用overrideMimeType()方法,可以保证把响应当作XML而非纯文本来处理。

        //启动一个请求,以备发送
        xhr.open("get", "text.php", true);   

        xhr.overrideMimeType("text/xml");

        //发送请求
        xhr.send(null);

5.4、进度事件

    Progress Events规范定义了客户端服务器通信有关的事件。

    有以下6个进度事件:

  • loadstart    ——    在接收到响应数据的第一个字节时触发
  • progress    ——    在接收响应期间持续不断地触发
  • error    ——    在请求发生错误时触发
  • abort    ——    在因为调用abort()方法而终止连接时触发
  • load    ——    在接收到完整的响应数据时触发
  • loadend    ——    在通信完成或者触发errorabortload事件后触发

    每个请求都从触发loadstart事件开始,

    接下来是一或多个progress事件,

    然后触发errorabortload事件中的一个,

    最后以触发loadend事件结束。

    ①load事件 

    load事件可以用于替换readystatechange事件。

    load事件处理程序会接收到一个event对象,其target属性就指向XHR对象实例。

    因而可以访问到XHR对象的所有方法和属性。

    示例

        //创建XHR对象
        var xhr = createXHR();
        
        xhr.onload = function(event){
            if((event.target.status >= 200 && event.target.status < 300) || event.target.status == 304){
                alert(event.target.responseText);
            }else{
                alert("Request was unsuccessful: " + event.target.status);
            }
        };
        
        
        //启动一个请求,以备发送
        xhr.open("get", "example.txt", true);   

        //发送请求
        xhr.send(null);

    ②progress事件

    progress事件会在浏览器接收新数据期间周期性地触发。

    onprogress事件处理程序会接收到一个event对象,它包含这四个属性:

  • target      ——    指向XHR对象
  • lengthComputable    ——    表示进度信息是否可用的布尔值
  • position    ——    表示已经接收的字节数
  • totalSize    ——    表示根据Content-Length响应头部确定的预期字节数

    有了这些信息,就可以为用户创建一个进度指示器

    

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值