LayaAir HttpRequest 网络访问

心已赠人 2022-04-03 05:20 420阅读 0赞

**目录**

HttpRequest·概述

HttpRequest·运用

环境准备

get请求

post 请求

--------------------

# HttpRequest·概述 #

1、项目中经常会使用 http 请求，LayaAir 引擎中 [laya.net.HttpRequest ][laya.net.HttpRequest]就是专门用于处理 http 网络请求，其实质包装的就是原生的 XMLHttpRequest

2、XMLHttpRequest 这个原生的类其实很庞大，功能很强大，laya 对其的封装只是满足基本的需求，一些特殊的需求比如文件上传等，需要自己进行扩展

*  详细的`XMLHttpRequest`，请看 [W3C的xhr 标准][W3C_xhr];
 *  `XMLHttpRequest`发各种类型的数据，可以参考[发送数据][Link 1]和[html5rocks上的这篇文章][html5rocks]
 *  了解`XMLHttpRequest`的基本使用，可以参考[MDN的XMLHttpRequest介绍][MDN_XMLHttpRequest]；
 *  想了解跨域请求，则可以参考[W3C的 cors 标准][W3C_ cors];

3、更多关于原生 XMLHttpRequest 可以参考 Laya官网介绍：[https://ldc.layabox.com/doc/?nav=zh-js-1-6-0][https_ldc.layabox.com_doc_nav_zh-js-1-6-0]，本文只对如何编码使用进行说明。

<table> 
 <tbody> 
  <tr> 
   <td style="width:138px;"><strong>Package</strong></td> 
   <td>laya.net</td> 
  </tr> 
  <tr> 
   <td style="width:138px;"><strong>类</strong></td> 
   <td>public class HttpRequest</td> 
  </tr> 
  <tr> 
   <td style="width:138px;"><strong>Inheritance</strong></td> 
   <td>HttpRequest <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181220173904580">EventDispatcher <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181220173904580"> Object</td> 
  </tr> 
 </tbody> 
</table>

4、HttpRequest 通过封装 HTML XMLHttpRequest 对象提供了对 HTTP 协议的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力

5、HttpRequest 只提供以异步的形式返回 Web 服务器的响应，并且能够以文本或者二进制的形式返回内容

6、建议每次请求都使用新的 HttpRequest 对象，因为每次调用该对象的send方法时，都会清空之前设置的数据，并重置 HTTP 请求的状态，这会导致之前还未返回响应的请求被重置，从而得不到之前请求的响应结果

<table> 
 <tbody> 
  <tr> 
   <th colspan="1">Property</th> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=Core&amp;class=laya.net.HttpRequest#data" rel="nofollow">data</a> : *&nbsp; &nbsp; [read-only] 返回的数据。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=Core&amp;class=laya.net.HttpRequest#http" rel="nofollow">http</a> : *&nbsp; &nbsp;[read-only] 本对象所封装的原生 XMLHttpRequest 引用。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=Core&amp;class=laya.net.HttpRequest#url" rel="nofollow">url</a> : String&nbsp; &nbsp;[read-only] 请求的地址。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <th colspan="2">Method</th> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/index.html?category=Core&amp;class=laya.net.HttpRequest#send%28%29" rel="nofollow">send</a>(url:String, data:* = null, method:String = get, responseType:String = text, headers:Array = null):void&nbsp; <span style="color:#f33b45;">发送 HTTP 请求</span></p> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>url:String</code> — 请求的地址。大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。</td> 
  </tr> 
  <tr> 
   <td><code>data:*</code> (default = <code>null</code>) — (default = null)发送的数据，当 method为post，使用 data设置传递的数据</td> 
  </tr> 
  <tr> 
   <td><code>method:String</code> (default = <code>get</code>) — (default = "get")用于请求的 HTTP 方法。值包括 "get"、"post"、"head"。</td> 
  </tr> 
  <tr> 
   <td><code>responseType:String</code> (default = <code>text</code>) — (default = "text")Web 服务器的响应类型，可设置为 "text"、"json"、"xml"、"arraybuffer"。</td> 
  </tr> 
  <tr> 
   <td><code>headers:Array</code> (default = <code>null</code>) — (default = null) HTTP 请求的头部信息。参数形如key-value数组：key是头部的名称，不应该包括空白、冒号或换行；value是头部的值，不应该包括换行。比如["Content-Type", "application/json"]。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <th colspan="1" style="width:129px;">Event</th> 
   <th>Summary</th> 
  </tr> 
  <tr> 
   <td style="width:129px;"> <p><a href="https://layaair.ldc.layabox.com/api/index.html?category=Core&amp;class=laya.net.HttpRequest#event:complete" rel="nofollow">complete</a></p> </td> 
   <td>请求结束后调度。Event.type property = <code>Event.COMPLETE</code></td> 
  </tr> 
  <tr> 
   <td style="width:129px;"> <p><a href="https://layaair.ldc.layabox.com/api/index.html?category=Core&amp;class=laya.net.HttpRequest#event:error" rel="nofollow">error</a></p> </td> 
   <td>请求出错时调度。Event.type property = <code>Event.ERROR</code></td> 
  </tr> 
  <tr> 
   <td style="width:129px;"> <p><a href="https://layaair.ldc.layabox.com/api/index.html?category=Core&amp;class=laya.net.HttpRequest#event:progress" rel="nofollow">progress</a></p> </td> 
   <td>请求进度改变时调度。Event.type property = <code>Event.PROGRESS</code></td> 
  </tr> 
 </tbody> 
</table>

# HttpRequest·运用 #

## 环境准备 ##

下面是一个 Java 服务器后台控制层代码，用于提供客户端的 get 与 post 请求。

/**
         * 请求地址：http://localhost:8080/coco/getTest
         */
        @RequestMapping(value = "getTest")
        public void getTest(String id, String name, String address, HttpServletResponse response) {
            try {
                System.out.println(new Date() + " Get 访问 .id=" + id + "\tname=" + name + "\taddress=" + address);
                PrintWriter printWriter = response.getWriter();
                printWriter.write("{\"message\":\"Get Success\"}");
                printWriter.flush();
                printWriter.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    
        /**
         * post 请求地址：http://localhost:8080/coco/postTest
         */
        @RequestMapping(value = "postTest", method = RequestMethod.POST)
        public void postTest(String id, String name, String info, HttpServletResponse response) {
            try {
                System.out.println(new Date() + " Post 访问 .id=" + id + "\tname=" + name + "\taddress=" + info);
                PrintWriter printWriter = response.getWriter();
                printWriter.write("{\"message\":\"Post Success\"}");
                printWriter.flush();
                printWriter.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

## get请求 ##

//初始化引擎
        Laya.init(1136,640);
        var xhr = new Laya.HttpRequest();//创建HttpRequest对象
        xhr.http.timeout = 10000;//设置超时时间；
        //once：使用 EventDispatcher 对象注册指定类型的事件侦听器对象，以使侦听器能够接收事件通知，此侦听事件响应一次后自动移除
        //on：使用 EventDispatcher 对象注册指定类型的事件侦听器对象，以使侦听器能够接收事件通知。两者参数是完全一样的
        //注意默认情况下必须是Laya.Event.COMPLETE的形式，而不能是Event.COMPLETE，否则会触发不了回电函数
        xhr.on(Laya.Event.PROGRESS,this,processHandler);
        xhr.once(Laya.Event.ERROR,this,errorHandler);
        xhr.once(Laya.Event.COMPLETE,this,completeHandler);
    
        //发送http请求——get请求时参数必须带在路径中，此时第二个参数空着即可
        //如果是 post请求，则参数必须放在第二个参数中，格式同样是：a=xxxx&b=xxx
        //xhr.send("data/city.json")表示请求 bin目录下的 data/city.json 文件
        xhr.send("http://localhost:8080/coco/getTest?id=110&name=张三&address=南海大道","","get","text");
    
        //请求进度改变时调度，通常用于文件上传等
        function processHandler(data){
            console.log("请求进行中："+data);
        }
        //请求出错时调度
        function errorHandler(data){
            console.log("请求错误："+data);
        }
        //请求结束后调度 ———— 其中的参数就是服务器放的数据
        function completeHandler(data){
            console.log("请求成功...");
            console.log("返回数据1："+data);
            console.log("返回数据2："+xhr.data);//也可以使用HttpRequest的属性data获取服务器返回的数据
            console.log("请求地址："+xhr.url);//HttpRequest的属性url返回请求的路径
        }

![20181220172640233.gif][]

## post 请求 ##

//初始化引擎
        Laya.init(1136,640);
        var xhr = new Laya.HttpRequest();//创建HttpRequest对象
        xhr.http.timeout = 10000;//设置超时时间；
        //once：使用 EventDispatcher 对象注册指定类型的事件侦听器对象，以使侦听器能够接收事件通知，此侦听事件响应一次后自动移除
        //on：使用 EventDispatcher 对象注册指定类型的事件侦听器对象，以使侦听器能够接收事件通知。两者参数是完全一样的
        //注意默认情况下必须是Laya.Event.COMPLETE的形式，而不能是Event.COMPLETE，否则会触发不了回电函数
        xhr.on(Laya.Event.PROGRESS,this,processHandler);
        xhr.once(Laya.Event.ERROR,this,errorHandler);
        xhr.once(Laya.Event.COMPLETE,this,completeHandler);
    
        //发送http请求——get请求时参数必须带在路径中，此时第二个参数空着即可
        //如果是 post请求，则参数必须放在第二个参数中，格式同样是：a=xxxx&b=xxx，通常项目中都会采用json格式进行数据传递
        xhr.send("http://localhost:8080/coco/postTest","id=120&name=李四&address=后海大道","post","json");
    
        //请求进度改变时调度，通常用于文件上传等
        function processHandler(data){
            console.log("请求进行中："+data);
        }
        //请求出错时调度
        function errorHandler(data){
            console.log("请求错误："+data);
        }
        //请求结束后调度 ———— 其中的参数就是服务器放的数据
        function completeHandler(data){
            console.log("请求成功...");
            //json对象取值，两种方式 Obj.property、Obj[property]
            console.log("返回数据1："+data,JSON.stringify(data),data["message"]);
            console.log("返回数据2："+xhr.data.message);//也可以使用HttpRequest的属性data获取服务器返回的数据
            console.log("请求地址："+xhr.url);//HttpRequest的属性url返回请求的路径
        }

![2018122017385157.gif][]

[laya.net.HttpRequest]: https://layaair.ldc.layabox.com/api/index.html?category=Core&class=laya.net.HttpRequest
[W3C_xhr]: https://www.w3.org/TR/XMLHttpRequest/
[Link 1]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data
[html5rocks]: http://www.html5rocks.com/zh/tutorials/file/xhr2/
[MDN_XMLHttpRequest]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
[W3C_ cors]: https://www.w3.org/TR/cors/
[https_ldc.layabox.com_doc_nav_zh-js-1-6-0]: https://ldc.layabox.com/doc/?nav=zh-js-1-6-0
[20181220172640233.gif]: /images/20220403/f760aed616e64c15a34b286d16d2c2b9.png
[2018122017385157.gif]: /images/20220403/5fc4845f4c4e46acacfe8ed4b02c1199.png