《TypeScript图形渲染实战：2D架构设计与实现》 —2.4.3 使用XHR向服务器请求资源文件

2.4.3  使用XHR向服务器请求资源文件

　　我们发现，利用lite-server服务器，就能解决HTML支持的图片、视频和音频等资源从服务器上自动加载的问题。但是像文本文件和二进制文件等，需要使用XHR以编程的方式获取，其中XHR是XMLHttpRequest对象的简称。

　　在本书中，访问服务器的需求其实非常简单，只要满足一个要求：通过GET方式加载文件。对于这个需求，根本不需要编写服务器端函数来处理GET或POST请求，也不需要在服务器端处理请求参数问题，只需要在Web客户端使用XMLHttpRequest以GET方式向服务器请求数据即可。让我们来看一下代码，具体如下：

export class HttpRequest {

     /**

     *

     * @param url { string } 请求资源的url

     * @returns HttpResponse

     */

    public static doGet ( url : string ) : HttpResponse {

        // 初始化XMLHttpRequest对象

        let xhr : XMLHttpRequest = new XMLHttpRequest ( ) ;

        // XHR的open函数的第3个参数true表示异步请求，false表示同步请求

        //本函数是同步请求函数，因此为false

        xhr . open ( "get" , url , false , null , null ) ;

        // 向服务器发送请求

        xhr . send  ( ) ;

        //请求发送成功

        if ( xhr.status === 200 ) {

            //返回自己定义的HttpResponse接口对象

            //这里可以看到接口的第二种用法

            //并没有实现该接口，但是可以用大括号及键值对方式来定义接口（其实和JS定义

            对象是一样的方式）

            //可以把这种接口当成纯数据类来使用

            return { success : true , responseType : " text " , response :

            xhr . response } ;

        } else {

            //请求失败，success标记为false，response返回null

            return { success : false , responseType : " text " , response :

            null } ;

        }

    }

}

　　doGet方法的返回类型是自定义的一个接口，下面来看一下该接口是如何定义的，请参考如下代码：

export interface HttpResponse {

    success : boolean ;               //http请求成功，返回true，否则返回false

    responseType : XMLHttpRequestResponseType ;             //返回请求的资源类型

    response : any ; // 根据请求的类型不同，可能返回的是字符串、ArrayBuffer或

                                   Blob对象，因此使用any类型

}

　　在上面的代码的注释中已经提示过，HttpResponse并没有实现类，使用的是TypeScript接口中的第二种用法。接下来看一下HttpResponse接口中的XMLHttpRequestResponseType这个类型吧。