HTML5游戏引擎（十二）-发送http请求——GET 方法 & POST 方法 & 发送请求 & 发送带参数的请求 & 加载位图文件

HTML5游戏引擎（十二）-发送http请求——GET 方法 & POST 方法 & 发送请求 & 发送带参数的请求 & 加载位图文件

发送http请求

Egret 中封装了 XMLHttpRequest 进行异步的数据交互。

GET 方法

GET 方法是 HTTP　请求的默认方法，数据经过简单的编码发送出去，并作为 URL 的一部分发送到服务器。由于浏览器对 URL 长度的限制，提交的数据长度也有限制。

POST 方法

POST 方法克服了 GET 方法的一些缺点，可以发送较大的数据.数据也不再是明文发送的。出于安全的考虑一般选用 POST 方法。 POST 提交的数据也可以从标准输入输出流中获取。

发送请求

var request = new egret.HttpRequest();
request.responseType = egret.HttpResponseType.TEXT;
request.open("http://httpbin.org/get",egret.HttpMethod.GET);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send();
// 回调函数的绑定和浏览器有些区别
request.addEventListener(egret.Event.COMPLETE,this.onGetComplete,this);
request.addEventListener(egret.IOErrorEvent.IO_ERROR,this.onGetIOError,this);
request.addEventListener(egret.ProgressEvent.PROGRESS,this.onGetProgress,this);

上面发送了一个 GET 请求到http://httpbin.org/get，然后添加回调事件，当请求成功或者失败之后来获取数据。

通过COMPLETE事件的response属性可获取到返回的信息。通过 ProgressEvent 事件的bytesLoaded和bytesTotal获取可加载进度。回调函数代码如下：

private onGetComplete(event:egret.Event):void {
    var request = <egret.HttpRequest>event.currentTarget;
    console.log("get data : ",request.response);
    var responseLabel = new egret.TextField();
    responseLabel.size = 18;
    responseLabel.text = "GET response: \n" + request.response.substring(0, 50) + "...";
    this.addChild(responseLabel);
    responseLabel.x = 50;
    responseLabel.y = 70;
}
private onGetIOError(event:egret.IOErrorEvent):void {
    console.log("get error : " + event);
}
private onGetProgress(event:egret.ProgressEvent):void {
    console.log("get progress : " + Math.floor(100*event.bytesLoaded/event.bytesTotal) + "%");
}

发送 POST 请求的代码如下:

var request = new egret.HttpRequest();
request.responseType = egret.HttpResponseType.TEXT;
//设置为 POST 请求
request.open("http://httpbin.org/post",egret.HttpMethod.POST);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send();
request.addEventListener(egret.Event.COMPLETE,this.onPostComplete,this);
request.addEventListener(egret.IOErrorEvent.IO_ERROR,this.onPostIOError,this);
request.addEventListener(egret.ProgressEvent.PROGRESS,this.onPostProgress,this);

添加回调函数：

private onPostComplete(event:egret.Event):void {
    var request = <egret.HttpRequest>event.currentTarget;
    console.log("post data : ",request.response);
    var responseLabel = new egret.TextField();
    responseLabel.size = 18;
    responseLabel.text = "POST response:\n" + request.response.substring(0, 50) + "...";
    this.addChild(responseLabel);
    responseLabel.x = 300;
    responseLabel.y = 70;
}
private onPostIOError(event:egret.IOErrorEvent):void {
    console.log("post error : " + event);
}
private onPostProgress(event:egret.ProgressEvent):void {
    console.log("post progress : " + Math.floor(100*event.bytesLoaded/event.bytesTotal) + "%");
}

发送带参数的请求

上面我们发送了一段空的请求到服务端，实际使用过程中一般都需要发送带参数的请求到服务端。

发送数据的格式：在 HTTP 客户端发送的数据，一般以key和value的形式组成，多个数据之间用&相连。拼接之后形成如下的形式:

key1=value1&key2=valueP2

通过 GET 方法发送的参数会加到 URL 的后面拼接起来，并以?分隔。POST 方法发送的参数需要先设置 HTTP 请求的头信息，告诉服务端是以什么样的形式来发送的数据。我们最常用的就是application/x-www-form-urlencoded,表示我们以key和value方式来格式化参数。服务端也可以用同样的方法来取到参数。

发送 POST 请求. 需要注意的是发送 POST 请求需要将参数放到send方法的参数中发送出去。并且要设置其响应头，在我们的例子中使用key value 的方式来格式化参数，这里需要设置响应头Content-Type为application/x-www-form-urlencoded。修改上面 POST 请求相应代码如下:

//拼接参数
var params = "p1=postP1&p2=postP2";
var request = new egret.HttpRequest();
request.responseType = egret.HttpResponseType.TEXT;
request.open("php/post_test.php",egret.HttpMethod.POST);
//设置响应头
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//发送参数 post
request.send(params);
// 发送参数 get, 通过url传递
request.send();

加载位图文件

Egret 提供了 ImageLoader 类，用于加载位图文件。

例如 ImageLoader 类通过如下代码加载位于 ‘resource/egret.png’ 的图片：

//实例化图片加载器
var imgLoader:egret.ImageLoader = new egret.ImageLoader;
//添加回调函数
imgLoader.once( egret.Event.COMPLETE, this.imgLoadHandler, this ); 
//加载图片
imgLoader.load( "resource/assets/bg.jpg" );

在所定义的回调事件中，可以用下面的方式获取该图片对应的 BitmapData，并以此来创建位图：

imgLoadHandler( evt:egret.Event ):void{
    let loader:egret.ImageLoader = evt.currentTarget;
   //加载完成之后，loader会有一个data属性，可以读取到图片
    let bmd:egret.BitmapData = loader.data;
    //创建纹理对象
    let texture = new egret.Texture();
    texture.bitmapData = bmd;
    //显示对象装载
	let bmp:egret.Bitmap = new egret.Bitmap(texture);
    this.addChild(bmp);
}