前后端异步请求调用方法、装置、设备及介质

技术领域

本发明实施例涉及网页开发技术领域，尤其涉及一种前后端异步请求调用方法、装置、设备及介质。

背景技术

异步JavaScript和XML(英文全称为：Asynchronous Javascript And XML，简称为：Ajax)技术是一种用于创建更好更快以及交互性更强的Web应用程序的技术。Ajax技术能够使网页应用能够快速地将增量更新呈现在用户界面上，不需要重载整个页面，所以被广泛使用。

目前前端调用前后端异步请求(简称：Ajax请求)来获取服务端的数据时，在预发布环境和线上环境下，所调用Ajax请求时的域名和接口不同。具体调用Ajax请求时主要有两种方案来实现。第一种方案是在预发布环境下采用第一种域名和接口。在线上环境下通过手动将第一种域名和接口修改为第二种域名和接口来实现。第二种方案是使用前端脚手架，在预发布环境和线上环境来配置脚手架不同的打包命令来修改域名和接口来实现。

在实现本发明过程中，发明人发现现有技术中至少存在如下问题：由于均需要对域名和接口进行修改，所以确定正确的域名和接口的效率较低，并且修改过程中容易出现疏忽，导致在不同环境下调用Ajax请求时的域名和接口准确性较低。

发明内容

本发明实施例提供一种前后端异步请求调用方法、装置、设备及介质，用以解决现有技术中确定正确的域名和接口的效率较低，并且修改过程中容易出现疏忽，导致在不同环境下调用Ajax请求时的域名和接口准确性较低的技术问题。

第一方面，本发明实施例提供一种前后端异步请求调用方法，包括：

确定调用前后端异步Ajax请求时对应的访问环境；

根据所述访问环境加载对应的超文本标记语言HTML落地页，并从所述HTML落地页中解析出对应访问环境下Ajax请求的域名；

在所述HTML落地页中加载对应的静态资源，并利用所述静态资源将对应访问环境下Ajax请求的域名及接口标识进行拼接，以获得对应访问环境下的接口；

通过所述接口向对应访问环境的网页应用服务器发送Ajax请求，以实现对Ajax请求的调用。

第二方面，本发明实施例提供一种前后端异步请求调用装置，包括：

确定模块，用于确定调用前后端异步Ajax请求时对应的访问环境；

加载模块，用于根据所述访问环境加载对应的超文本标记语言HTML落地页；

解析模块，用于从所述HTML落地页中解析出对应访问环境下Ajax请求的域名；

所述加载模块，还用于在所述HTML落地页中加载对应的静态资源；

拼接模块，用于利用所述静态资源将对应访问环境下Ajax请求的域名及接口标识进行拼接，以获得对应访问环境下的接口；

发送模块，用于通过所述接口向对应访问环境的网页应用服务器发送Ajax请求，以实现对Ajax请求的调用。

第三方面，本发明实施例提供一种电子设备，包括：至少一个处理器，存储器及收发器；

所述处理器、所述存储器与所述收发器通过电路互联；

所述存储器存储计算机执行指令；所述收发器，用于与网页应用服务器收发数据；

所述至少一个处理器执行所述存储器存储的计算机执行指令，使得所述至少一个处理器执行如第一方面任一项所述的方法。

第四方面，本发明实施例提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现如第一方面任一项所述的方法。

第五方面，本发明实施例提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现第一方面任一项所述的方法。

本发明实施例提供的前后端异步请求调用方法、装置、设备及介质，通过确定调用前后端异步Ajax请求时对应的访问环境；根据访问环境加载对应的超文本标记语言HTML落地页，并从HTML落地页中解析出对应访问环境下Ajax请求的域名；在HTML落地页中加载对应的静态资源，并利用静态资源将对应访问环境下Ajax请求的域名及接口标识进行拼接，以获得对应访问环境下的接口；通过接口向对应访问环境的网页应用服务器发送Ajax请求，以实现对Ajax请求的调用，由于加载对应的HTML落地页和静态资源是对Ajax请求进行调用的必要环节，所以直接将每种访问环境下对应的Ajax请求的域名写入到对应的HTML落地页中，并通过静态资源将Ajax请求的域名及接口标识进行拼接获得对应的接口，无需再专门通过修改的方式来确定正确的域名和接口，有效提高了确定正确的域名和接口的效率。并且每种访问环境下的域名是提前写入到对应的HTML落地页中的，所以不会由于疏忽或其他原因导致域名和接口的错误，所以提高了不同环境下调用Ajax请求时的域名和接口准确性。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

图1是可以实现本发明实施例的前后端异步请求调用方法在预发布环境下的网络架构图；

图2是可以实现本发明实施例的前后端异步请求调用方法在线上环境下的网络架构图；

图3是本发明一实施例提供的前后端异步请求调用方法的流程示意图；

图4是本发明另一实施例提供的前后端异步请求调用方法的流程示意图；

图5是本发明另一实施例提供的前后端异步请求调用方法中步骤201的流程示意图；

图6是本发明另一实施例提供的前后端异步请求调用方法中步骤208的流程示意图；

图7是本发明另一实施例提供的前后端异步请求调用方法中步骤209的流程示意图；

图8是本发明另一实施例提供的前后端异步请求调用方法中步骤210的流程示意图；

图9是本发明另一实施例提供的前后端异步请求调用方法中步骤211的流程示意图；

图10是本发明一实施例提供的前后端异步请求调用装置的结构示意图；

图11是用来实现本发明实施例的前后端异步请求调用方法的电子设备的结构示意图；

图12是用来实现本发明实施例的前后端异步请求调用方法的电子设备的框图。

通过上述附图，已示出本公开明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围，而是通过参考特定实施例为本领域技术人员说明本公开的概念。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

首先对本发明实施例所涉及的名词进行解释：

前后端异步请求：简称：Ajax请求。前端与服务端的一种http交互，交互过程中，前端需要发送Ajax请求，在发送Ajax请求时需要确定统一资源定位符URL，也称为发送Ajax请求的接口。

前端脚手架：前端脚手架可以为前端项目搭建开发环境，还可以将整个前端工程按某种规则进行打包处理。

Javascript：是前端网页开发语言，其是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。是开发Web页面的脚本语言。

需要说明的是，本发明实施例中示例出的测试域名，测试接口及线上域名和线上接口的举例并非是真实的，只是按照域名和接口的形式做的举例说明。

为了清楚理解本申请的技术方案，首先对现有技术的方案进行详细介绍。

目前前端调用Ajax请求获取服务端的数据时，在预发布环境和线上环境下，所调用Ajax请求时的域名和接口不同。下面对预发布环境和线上环境下，所调用Ajax请求时的域名和接口进行举例说明：在预发布环境下，调用Ajax请求时，Ajax请求的测试域名如可以为“http://beta-color.jdl.id”,测试接口URL可以为“http://beta-color.jdl.id/getUser”。在线上环境下，调用Ajax请求时，Ajax请求的线上域名如可以为“http://color.jdl.id”，线上接口URL可以为“http://color.jdl.id/getUser”。

目前调用Ajax请求时主要有两种方案来实现。第一种方案是在预发布环境下采用第一种域名和接口。在线上环境下通过手动将第一种域名和接口修改为第二种域名和接口来实现。第二种方案是使用前端脚手架，在预发布环境和线上环境来配置脚手架不同的打包命令来修改域名和接口来实现。

具体地，在第一种方案中，在预发布环境进行测试的时候，前端javascript代码里设置的Ajax请求的域名是“http://beta-color.jdl.id”，为第一种域名。然后用这个域名去拼接接口标识，形成第一种接口，进而进行Ajax请求的调用。在测试完成，在线上环境下，再手动修改javascript代码设置的Ajax请求域名及接口，将Ajax请求的域名改为第二种域名，为“http://color.jdl.id”，然后用这个请求域名去拼接接口标识，形成第二种接口。

在第二种方案中，使用前端脚手架，配置脚手架的打包命令。在部署javascript代码前，输入不同的打包命令，改变ajax请求域名变量的值。例如在预发布环境下，输入打包命令“npm run test”，去改变javascript代码中ajax请求域名变量的值，最终使这个变量被赋值为“http://beta-color.jdl.id”,然后当前端发送ajax请求的时候，就会拼接这个变量的值，达到接口为“http://beta-color.jdl.id/getUser”的结果。在线上环境下，输入打包命令“npm run build”去改变javascript代码中ajax请求域名变量的值，最终使这个变量被赋值为“http://color.jdl.id”,然后当前端发送ajax请求的时候，就会拼接这个变量的值，达到接口为“http://color.jdl.id/getUser”的结果。

在第一种方案中，需要手动修改域名和接口，使确定正确的域名和接口的效率较低。而在第二种方案中，虽然不需要手动修改域名和接口，但为了适应预发布环境与线上环境，需要两个命令来回切换输入，这就难以避免在即将要部署线上环境的时候，因为疏忽或者其他原因输入了预发布环境的打包命令，导致不同环境下调用Ajax请求时的域名和接口准确性较低。

所以面对现有技术的技术问题时，发明人通过创造性的研究发现，虽然当前前端开发框架的类型很多，但最终开发完成后，一般都是通过webpack打包，打包后形成的主要资源类型是一致的。而对于Ajax请求调用环节来说，与其相关的资源有HTML落地页(又称为：index.html)及静态资源(又称为：js)。由于在需求开发完成以后，HTML落地页主要负责一些页面属性设置和静态资源的引入，在后续的需求迭代中，几乎大部分的代码改动最终会被webpack打包出新的静态资源文件，但HTML落地页却几乎不改动。所以依赖HTML落地页很少会被改动的这个性质，将预发布环境和线上环境的HTML落地页进行区分，并且将预发布环境下的Ajax请求的域名写入到预发布环境下的HTML落地页中，将线上环境下的Ajax请求的域名写入到线上环境下的HTML落地页中。并且可利用对应访问环境下的静态资源将对应Ajax请求的域名及接口标识进行拼接，以获得对应访问环境下的接口，进而通过接口向对应访问环境的网页应用服务器发送Ajax请求，以实现对Ajax请求的调用。由于将每个访问环境下的Ajax请求的域名写入到了对应的访问环境下的HTML落地页中。所以即使访问环境不同，也可通过加载对应的HTML落地页和静态资源来获取到对应访问环境下Ajax请求的域名和接口，进而实现对Ajax请求的调用。由于加载对应的HTML落地页和静态资源是对Ajax请求进行调用的必要环节，所以直接将每种访问环境下对应的Ajax请求的域名写入到对应的HTML落地页中，并通过静态资源将Ajax请求的域名及接口标识进行拼接获得对应的接口，无需再专门通过修改的方式来确定正确的域名和接口，有效提高了确定正确的域名和接口的效率。并且每种访问环境下的域名是提前写入到对应的HTML落地页中的，所以不会由于疏忽或其他原因导致域名和接口的错误，所以提高了不同环境下调用Ajax请求时的域名和接口准确性。

所以发明人基于上述的创造性发现，提出了本发明实施例的技术方案。下面对本发明实施例提供的前后端异步请求调用方法在不同访问环境下的网络架构进行介绍。

图1是可以实现本发明实施例的前后端异步请求调用方法在预发布环境下的网络架构图，如图1所示，在预发布环境下的网络架构中包括：电子设备1、预发布环境对应的HTML落地页服务器21、第一HTML落地页代码库211、预发布环境对应的静态资源服务器31、第一静态资源代码库311及预发布环境对应的网页应用服务器41。其中，第一HTML落地页代码库211位于预发布环境对应的HTML落地页服务器21中，用于存储预发布环境下的HTML落地页。预发布环境下的HTML落地页为第一HTML落地页。第一静态资源代码库311位于预发布环境对应的静态资源服务器31中，用于存储预发布环境下的静态资源。预发布环境下的静态资源为第一静态资源。电子设备1分别与预发布环境对应的HTML落地页服务器21、预发布环境对应的静态资源服务器31及预发布环境对应的网页应用服务器41通信连接。则在预发布环境下，电子设备1作为前端向预发布环境对应的网页应用服务器41发送Ajax请求时，电子设备1从预发布环境对应的HTML落地页服务器21的第一HTML落地页代码库211中加载第一HTML落地页。并从第一HTML落地页中解析出预发布环境下Ajax请求的域名。如预发布环境下Ajax请求的域名为：“http://beta-color.jdl.id”。并从预发布环境对应的静态资源服务器31的第一静态资源代码库311中加载第一静态资源，将第一静态资源加载到HTML落地页中。利用静态资源将预发布环境下Ajax请求的域名及接口标识进行拼接，以获得预发布环境下的接口。进而电子设备1通过接口向预发布环境的网页应用服务器41发送Ajax请求，以实现对Ajax请求的调用。

图2是可以实现本发明实施例的前后端异步请求调用方法在线上环境下的网络架构图，如图2所示，在线上环境下的网络架构中包括：电子设备1、线上环境对应的HTML落地页服务器22、第二HTML落地页代码库221、线上环境对应的静态资源服务器32、第二静态资源代码库321及线上环境对应的网页应用服务器42。其中，第二HTML落地页代码库221位于线上环境对应的HTML落地页服务器22中，用于存储线上环境下的HTML落地页。线上环境下的HTML落地页为第二HTML落地页。第二静态资源代码库321位于线上环境对应的静态资源服务器32中，用于存储线上环境下的静态资源。线上环境下的静态资源为第二静态资源。电子设备1分别与线上环境对应的HTML落地页服务器22、线上环境对应的静态资源服务器32及线上环境对应的网页应用服务器42通信连接。则在线上环境下，电子设备1作为前端向线上环境对应的网页应用服务器42发送Ajax请求时，电子设备1从线上环境对应的HTML落地页服务器22的第二HTML落地页代码库221中加载第二HTML落地页。并从第二HTML落地页中解析出对应访问环境下Ajax请求的域名。如线上环境下Ajax请求的域名为：“http://color.jdl.id”。并从线上环境对应的静态资源服务器32的第二静态资源代码库321中加载第二静态资源，将第二静态资源加载到HTML落地页中。利用静态资源将线上环境下Ajax请求的域名及接口标识进行拼接，以获得线上环境下的接口。进而电子设备1通过接口向线上环境的网页应用服务器42发送Ajax请求，以实现对Ajax请求的调用。

下面以具体地实施例对本发明的技术方案以及本发明的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本发明的实施例进行描述。

实施例一

图3是本发明一实施例提供的前后端异步请求调用方法的流程示意图，如图3所示，本实施例提供的前后端异步请求调用方法的执行主体为前后端异步请求调用装置，该前后端异步请求调用装置位于电子设备中，电子设备为前端设备。则本实施例提供的前后端异步请求调用方法包括以下几个步骤：

步骤101，确定调用前后端异步Ajax请求时对应的访问环境。

其中，访问环境可以为预发布环境，也可以为线上环境，本实施例中对此不作限定。

本实施例中，在预发布环境和在线上环境下，电子设备作为前端所访问的服务器不同。在预发布环境下，电子设备访问的服务器为预发布环境网页应用服务器。而在线上环境下，电子设备访问的服务器为线上环境网页应用服务器。而电子设备在访问预发布环境网页应用服务器时，需要配置预发布环境网页应用服务器的host，并将预发布环境网页应用服务器的host与Ajax请求的域名进行绑定。而电子设备在访问线上环境网页应用服务器时，无需将线上环境网页应用服务器的host与Ajax请求的域名进行绑定。所以电子设备可通过判断网页应用服务器的host是否与Ajax请求的域名进行绑定来确定调用Ajax请求时对应的访问环境。

其中，host是根据TCP/IP for Windows的标准来工作的，host包含预发布环境网页应用服务器的IP地址和主机名的映射关系。

步骤102，根据访问环境加载对应的超文本标记语言HTML落地页，并从HTML落地页中解析出对应访问环境下Ajax请求的域名。

其中，超文本标记语言简称HTML。所以超文本标记语言落地页简称为HTML落地页。

本实施例中，预先将不同访问环境的落地页存储到不同的服务器中，并且在每个访问环境的HTML落地页中预先写入了对应访问环境的Ajax请求的域名。所以确定访问环境后，从对应访问环境的HTML落地页服务器中加载HTML落地页，并对HTML落地页进行解析，获得对应访问环境下Ajax请求的域名。

示例性的，在预发布环境下，在对应HTML落地页中预先写入的Ajax请求的域名可以为“http://beta-color.jdl.id”。在线上环境下，在对应HTML落地页中预先写入的Ajax请求的域名可以为“http://color.jdl.id”。

其中，在每个访问环境的HTML落地页中预先写入对应访问环境的Ajax请求的域名时，可以先定义Ajax请求的域名变量，然后再对Ajax请求的域名变量进行赋值的方式进行写入。或者以其他方式进行写入，本实施例中对此不作限定。

步骤103，在HTML落地页中加载对应的静态资源，并利用静态资源将对应访问环境下Ajax请求的域名及接口标识进行拼接，以获得对应访问环境下的接口。

本实施例中，在调用Ajax请求时，不仅需要加载HTML落地页，而且还需要在HTML落地页中引入对应的静态资源。而在每种访问环境中，静态资源分别存储到对应的服务器中，所以根据访问环境从对应的服务器中获取静态资源，然后将静态资源加载到对应的HTML落地页中。具体地，可将静态资源加载到HTML落地页的底部。

本实施例中，在每种访问环境中，静态资源中可包括Ajax请求对应接口的接口标识。而且在HTML落地页中还包括对应访问环境的Ajax请求的域名，所以可利用静态资源将对应访问环境下Ajax请求的域名及接口标识进行拼接，以形成对应访问环境下的接口。

继续步骤102进行示例性说明：在预发布环境下，在对应HTML落地页中预先写入的Ajax请求的域名可以为“http://beta-color.jdl.id”，接口标识为“getUser”，则拼接后的预发布环境下Ajax请求的接口为：“http://beta-color.jdl.id/getUser”。在线上环境下，在对应HTML落地页中预先写入的Ajax请求的域名可以为“http://color.jdl.id”，接口标识为“getUser”，则拼接后的线上环境下Ajax请求的接口为：“http://color.jdl.id/getUser”。

步骤104，通过接口向对应访问环境的网页应用服务器发送Ajax请求，以实现对Ajax请求的调用。

本实施例中，在确定出对应访问环境下的接口后，通过接口访问对应访问环境的网页应用服务器，即通过接口向对应访问环境的网页应用服务器发送Ajax请求，进而从对应访问环境的网页应用服务器中获取数据，并反馈给电子设备。

本实施例提供的前后端异步请求调用方法，通过确定调用前后端异步Ajax请求时对应的访问环境；根据访问环境加载对应的超文本标记语言HTML落地页，并从HTML落地页中解析出对应访问环境下Ajax请求的域名；在HTML落地页中加载对应的静态资源，并利用静态资源将对应访问环境下Ajax请求的域名及接口标识进行拼接，以获得对应访问环境下的接口；通过接口向对应访问环境的网页应用服务器发送Ajax请求，以实现对Ajax请求的调用，由于加载对应的HTML落地页和静态资源是对Ajax请求进行调用的必要环节，所以直接将每种访问环境下对应的Ajax请求的域名写入到对应的HTML落地页中，并通过静态资源将Ajax请求的域名及接口标识进行拼接获得对应的接口，无需再专门通过修改的方式来确定正确的域名和接口，有效提高了确定正确的域名和接口的效率。并且每种访问环境下的域名是提前写入到对应的HTML落地页中的，所以不会由于疏忽或其他原因导致域名和接口的错误，所以提高了不同环境下调用Ajax请求时的域名和接口准确性。

实施例二

图4是本发明另一实施例提供的前后端异步请求调用方法的流程示意图，如图4所示，本实施例提供的前后端异步请求调用方法，在实施例一提供的前后端异步请求调用方法的基础上，对步骤102-步骤103的进一步细化，并且还包括了对不同访问环境对应的HTML落地页写入对应的Ajax请求的域名，并对HTML落地页进行存储及部署的步骤，以及对不同访问环境的静态资源进行存储并部署的步骤。则本实施例提供的前后端异步请求调用方法包括以下几个步骤：

步骤201，确定预发布环境对应的第一HTML落地页和线上环境对应的第二HTML落地页。

作为一种可选实施方式，如图5所示，本实施例中，步骤201包括以下步骤：

步骤2011，获取预设HTML落地页。

本实施例中，由于在根据需求对网页应用开发完成后，即使需求在不断迭代，但HTML落地页也很少被改动，所以可获取网页应用开发完成后的HTML落地页作为预设HTML落地页。

其中，网页应用开发完成后的HTML落地页可通过webpack对开发完成后的Javascript代码打包后获取到。

步骤2012，在预设HTML落地页中的第一预设位置定义Ajax请求的域名变量。

步骤2013，将Ajax请求的域名变量赋值为预发布环境对应的Ajax请求的域名，以确定第一HTML落地页。

步骤2014，将Ajax请求的域名变量赋值为线上环境对应的Ajax请求的域名，以确定第二HTML落地页。

本实施例中，在预设HTML落地页中确定第一预设位置，在该第一预设位置对Ajax请求的域名变量进行定义。由于不同访问环境下，Ajax请求的域名不同。所以可对不同访问环境下预设HTML落地页中的Ajax请求域名变量赋值成不同的值，以形成不同访问环境下的HTML落地页。

具体地，本实施例中，如Ajax请求域名变量为“requestDomain”，示例性的，将Ajax请求的域名变量赋值为预发布环境对应的Ajax请求的域名可表示为：“requestDomain＝‘http://beta-color.jdl.id’”。将Ajax请求的域名变量赋值为线上环境对应的Ajax请求的域名可表示为：“requestDomain＝‘http://color.jdl.id’”。

其中，将Ajax请求的域名变量赋值为预发布环境对应的Ajax请求的域名后，将该预设HTML落地页确定为第一HTML落地页。将Ajax请求的域名变量赋值为线上环境对应的Ajax请求的域名后，将该预设HTML落地页确定为第二HTML落地页。

步骤202，将第一HTML落地页存储到预发布环境对应的第一HTML落地页代码库中，并将第二HTML落地页存储到线上环境对应的第二HTML落地页代码库中。

本实施例中，由于第一HTML落地页和第二HTML落地页中写入的Ajax请求的域名不同，代表了不同访问环境下的Ajax请求的域名。所以为了能够快速准确地获取到对应访问环境下的Ajax请求的域名，将第一HTML落地页和第二HTML落地页分开进行存储。具体地，将第一HTML落地页存储到预发布环境对应的HTML落地页代码库中，将第二HTML落地页存储到线上环境对应的HTML落地页代码库中。

其中，第一HTML落地页代码库为预发布环境对应的HTML落地页代码库。第二HTML落地页代码库为线上环境对应的HTML落地页代码库。

步骤203，将第一HTML落地页代码库部署到预发布环境对应的HTML落地页服务器中，并将第二HTML落地页代码库部署到线上环境对应的HTML落地页服务器中。

本实施例中，将第一HTML落地页代码库部署到预发布环境对应的HTML落地页服务器中，并将第二HTML落地页代码库部署到线上环境对应的HTML落地页服务器中，能够使第一HTML落地页代码库和第二HTML落地页代码库进行更有效地隔离。

步骤204，确定预发布环境对应的第一静态资源和线上环境对应的第二静态资源。

其中，预发布环境对应的静态资源为第一静态资源，线上环境对应的静态资源为第二静态资源。

本实施例中，网页应用预发布后，由webpack对预发布后的Javascript代码进行打包，可获取到第一静态资源。同理，在网页应用上线后，由webpack对上线的Javascript代码进行打包，可获取到第二静态资源。

步骤205，将第一静态资源存储到预发布环境对应的第一静态资源代码库中，并将第二静态资源存储到线上环境对应的第二静态资源代码库中。

步骤206，将第一静态资源代码库部署到预发布环境对应的静态资源服务器中，并将第二静态资源代码库部署到线上环境对应的静态资源服务器中。

本实施例中，为了将不同访问环境的静态资源进行区分，将第一静态资源存储到预发布环境对应的静态资源代码库中，并将第一静态资源代码库部署到预发布环境对应的静态资源服务器中。而将第二静态资源存储到线上环境对应的静态资源代码库中，并将第二静态资源代码库部署到线上环境对应的静态资源服务器中。

其中，第一静态资源代码库为预发布环境对应的静态资源代码库。第二静态资源代码库为线上环境对应的静态资源代码库。

步骤207，确定调用Ajax请求时对应的访问环境。

本实施例中，步骤207的实现方式与实施例一中的步骤101的实现方式类似，在此不再一一赘述。

步骤208，根据访问环境加载对应的HTML落地页。

作为一种可选实施方式，如图6所示，本实施例中，步骤208包括以下步骤：

步骤2081，根据访问环境确定部署对应HTML落地页代码库的HTML落地页服务器。

步骤2082，从HTML落地页服务器内的HTML落地页代码库中加载对应访问环境的HTML落地页。

本实施例中，由于不同访问环境的HTML落地页分别存储到对应HTML落地页服务器的HTML落地页代码库中，所以对对应访问环境的HTML落地页服务器进行访问，以从对应代码库中获取到对应HTML落地页。

需要说明的是，在对预发布环境下的HTML落地页服务器进行访问时，需要根据预发布环境下的HTML落地页服务器的host来确定预发布环境下的HTML落地页服务器的IP地址和主机名，以完成对预发布环境下的HTML落地页服务器的访问。

步骤209，从HTML落地页中解析出对应访问环境下Ajax请求的域名。

作为一种可选实施方式，如图7所示，本实施例中，步骤209包括以下步骤：

步骤2091，获取HTML落地页中定义Ajax请求的域名变量的第一预设位置。

步骤2092，根据第一预设位置解析出对应访问环境下Ajax请求的域名。

本实施例中，由于在将Ajax请求的域名变量定义到对应的HTML落地页中时，是在第一预设位置进行定义的，所以可获取到HTML落地页中定义Ajax请求的域名变量的第一预设位置，从第一预设位置开始对HTML落地页进行解析，进而获取到对应访问环境下Ajax请求的域名。

步骤210，在HTML落地页中加载对应的静态资源。

作为一种可选实施方式，如图8所示，本实施例中，步骤210包括以下步骤：

步骤2101，根据访问环境确定部署对应静态资源代码库的静态资源服务器。

步骤2102，从静态资源服务器内的静态资源代码库中获取对应的静态资源。

本实施例中，由于不同访问环境的静态资源分别存储到对应静态资源服务器的静态资源代码库中，所以对对应访问环境的静态资源服务器进行访问，以从对应代码库中获取到对应静态资源。

需要说明的是，在对预发布环境下的静态资源服务器进行访问时，需要根据预发布环境下的静态资源服务器的host来确定预发布环境下的静态资源服务器的IP地址和主机名，以完成对预发布环境下的静态资源服务器的访问。

步骤2103，将静态资源加载到对应的HTML落地页中。

具体地，本实施例中，获取到静态资源后，将静态资源加载到对应访问环境HTML落地页的底部，使HTML落地页引入对应的静态资源，实现对对应访问环境下调用Ajax请求的准备工作。

步骤211，利用静态资源将对应访问环境下Ajax请求的域名及接口标识进行拼接，以获得对应访问环境下的接口。

作为一种可选实施方式，如图9所示，本实施例中，步骤211包括以下步骤：

步骤2111，利用静态资源获取对应访问环境下的HTML落地页中的Ajax请求的域名。

本实施例中，由于静态资源加载到对应访问环境下的HTML落地页中，所以可从第一预设位置获取到Ajax请求的域名。

步骤2112，从静态资源中获取第二预设位置存储的接口标识。

本实施例中，在静态资源中存储有接口标识，具体可存储在第二预设位置，所以可从第二预设位置获取到接口标识。

需要说明的是，预发布环境和线上环境下调用Ajax请求时的接口标识可以相同。

步骤2113，将Ajax请求的域名及接口标识采用预设分隔符进行拼接，以获得对应访问环境下的接口。

本是实施例中，预设分隔符可以为“/”，或者也可以为前端与网页应用服务器约定的其他预设分隔符，本实施例中对此不作限定。

步骤212，通过接口向对应访问环境的网页应用服务器发送Ajax请求，以实现对Ajax请求的调用。

本实施例中，步骤212的实现方式与实施例一中的步骤104的实现方式类似，在此不再一一赘述。

本实施例提供的前后端异步请求调用方法，在确定预发布环境对应的第一HTML落地页和线上环境对应的第二HTML落地页时，获取预设HTML落地页；在预设HTML落地页中的第一预设位置定义Ajax请求的域名变量；将Ajax请求的域名变量赋值为预发布环境对应的Ajax请求的域名，以确定第一HTML落地页；将Ajax请求的域名变量赋值为线上环境对应的Ajax请求的域名，以确定第二HTML落地页，通过对变量赋值的方式，能够快速准确地将Ajax请求的域名写入到对应访问环境的HTML落地页中。

本实施例提供的前后端异步请求调用方法，确定预发布环境对应的第一HTML落地页和线上环境对应的第二HTML落地页；将第一HTML落地页存储到预发布环境对应的第一HTML落地页代码库中，并将第二HTML落地页存储到线上环境对应的第二HTML落地页代码库中；将第一HTML落地页代码库部署到预发布环境对应的HTML落地页服务器中，并将第二HTML落地页代码库部署到线上环境对应的HTML落地页服务器中。能够使第一HTML落地页代码库和第二HTML落地页代码库进行更有效地隔离。为不同访问环境下加载对应的HTML落地页，以对不同访问环境下Ajax请求域名的区分做准备。

本实施例提供的前后端异步请求调用方法，在利用所述静态资源将对应访问环境下Ajax请求的域名及接口标识进行拼接，以获得对应访问环境下的接口时，利用静态资源获取对应访问环境下的HTML落地页中的Ajax请求的域名；从静态资源中获取第二预设位置存储的接口标识；将所述Ajax请求的域名及所述接口标识采用预设分隔符进行拼接，以获得对应访问环境下的接口，使静态资源获取对应的Ajax请求的域名时，直接从对应的HTML落地页中获取，而无需根据访问环境再进行Ajax请求的域名的区分，提高了对应访问环境下接口的拼接效率。

实施例三

图10是本发明一实施例提供的前后端异步请求调用装置的结构示意图，如图10所示，本实施例提供的前后端异步请求调用装置30包括：确定模块31，加载模块32，解析模块33，拼接模块34，发送模块35。

其中，确定模块31，用于确定调用前后端异步Ajax请求时对应的访问环境。加载模块32，用于根据访问环境加载对应的超文本标记语言HTML落地页。解析模块33，用于从HTML落地页中解析出对应访问环境下Ajax请求的域名。加载模块32，还用于在HTML落地页中加载对应的静态资源。拼接模块34，用于利用静态资源将对应访问环境下Ajax请求的域名及接口标识进行拼接，以获得对应访问环境下的接口。发送模块35，用于通过接口向对应访问环境的网页应用服务器发送Ajax请求，以实现对Ajax请求的调用。

可选地，访问环境包括：预发布环境及线上环境。相应地，本实施例提供的前后端异步请求调用装置30，还包括：存储模块和部署模块。

其中，确定模块31，还用于确定预发布环境对应的第一HTML落地页和线上环境对应的第二HTML落地页。存储模块，用于将第一HTML落地页存储到预发布环境对应的第一HTML落地页代码库中，并将第二HTML落地页存储到线上环境对应的第二HTML落地页代码库中。部署模块，用于将第一HTML落地页代码库部署到预发布环境对应的HTML落地页服务器中，并将第二HTML落地页代码库部署到线上环境对应的HTML落地页服务器中。

可选地，确定模块31，在确定预发布环境对应的第一HTML落地页和线上环境对应的第二HTML落地页时，具体用于：

获取预设HTML落地页；在预设HTML落地页中的第一预设位置定义Ajax请求的域名变量；将Ajax请求的域名变量赋值为预发布环境对应的Ajax请求的域名，以确定第一HTML落地页；将Ajax请求的域名变量赋值为线上环境对应的Ajax请求的域名，以确定第二HTML落地页。

可选地，加载模块32，在根据访问环境加载对应的HTML落地页时，具体用于：

根据访问环境确定部署对应HTML落地页代码库的HTML落地页服务器；从HTML落地页服务器内的HTML落地页代码库中加载对应访问环境的HTML落地页。

可选地，解析模块33，具体用于：获取HTML落地页中定义Ajax请求的域名变量的第一预设位置；根据第一预设位置解析出对应访问环境下Ajax请求的域名。

可选地，确定模块31，还用于确定预发布环境对应的第一静态资源和线上环境对应的第二静态资源。存储模块，还用于将第一静态资源存储到预发布环境对应的第一静态资源代码库中，并将第二静态资源存储到线上环境对应的第二静态资源代码库中。部署模块，还用于将第一静态资源代码库部署到预发布环境对应的静态资源服务器中，并将第二静态资源代码库部署到线上环境对应的静态资源服务器中。

可选地，加载模块32，在HTML落地页中加载对应的静态资源时，具体用于根据访问环境确定部署对应静态资源代码库的静态资源服务器；从静态资源服务器内的静态资源代码库中获取对应的静态资源；将静态资源加载到对应的HTML落地页中。

可选地，拼接模块34，具体用于：

利用静态资源获取对应访问环境下的HTML落地页中的Ajax请求的域名；从静态资源中获取第二预设位置存储的接口标识；将Ajax请求的域名及接口标识采用预设分隔符进行拼接，以获得对应访问环境下的接口。

本实施例提供的前后端异步请求调用装置可以执行图3-图9所示方法实施例的技术方案，其实现原理和技术效果与图3-图9所示方法实施例类似，在此不再一一赘述。

实施例四

图11是用来实现本发明实施例的前后端异步请求调用方法的电子设备的结构示意图，如图11所示，本实施例提供的电子设备40包括：存储器41，处理器42及收发器43。

处理器42、存储器41与收发器43通过电路互联；

存储器41存储计算机执行指令；收发器43，用于与网页应用服务器收发数据；

至少一个处理器42执行存储器存储的计算机执行指令，使得至少一个处理器执行上述实施例一或实施例二中的方法。

实施例五

图12是用来实现本发明实施例的前后端异步请求调用方法的电子设备的框图，如图12所示，该电子设备500可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

其中，电子设备500可以包括以下一个或多个组件：处理组件502，存储器504，电源组件506，多媒体组件508，音频组件510，输入/输出(I/O)接口512，传感器组件514，以及通信组件516。

处理组件502通常控制装置500的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件502可以包括一个或多个处理器520来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件502可以包括一个或多个模块，便于处理组件502和其他组件之间的交互。例如，处理组件502可以包括多媒体模块，以方便多媒体组件508和处理组件502之间的交互。

存储器504被配置为存储各种类型的数据以支持在装置500的操作。这些数据的示例包括用于在装置500上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器504可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件506为装置500的各种组件提供电力。电源组件506可以包括电源管理系统，一个或多个电源，及其他与为装置500生成、管理和分配电力相关联的组件。

多媒体组件508包括在装置500和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件508包括一个前置摄像头和/或后置摄像头。当装置500处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件510被配置为输出和/或输入音频信号。例如，音频组件510包括一个麦克风(MIC)，当装置500处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器504或经由通信组件516发送。在一些实施例中，音频组件510还包括一个扬声器，用于输出音频信号。

I/O接口512为处理组件502和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件514包括一个或多个传感器，用于为装置500提供各个方面的状态评估。例如，传感器组件514可以检测到装置500的打开/关闭状态，组件的相对定位，例如组件为装置500的显示器和小键盘，传感器组件514还可以检测装置500或装置500一个组件的位置改变，用户与装置500接触的存在或不存在，装置500方位或加速/减速和装置500的温度变化。传感器组件514可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件514还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件514还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件516被配置为便于装置500和其他设备之间有线或无线方式的通信。装置500可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件516经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，通信组件516还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，装置500可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器504，上述指令可由装置500的处理器520执行以完成上述方法。例如，非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

一种非临时性计算机可读存储介质，当该存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行实施例一或实施例二提供的前后端异步请求调用方法。

在示例性实施例中，还提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行上述实施例一或实施例二中提供的前后端异步请求调用方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本发明旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求书指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求书来限制。