WEB开发:如何用js来模拟服务器的ajax响应,不依赖服务器来编写前端代码

一、问题的提出

目前web前端开发,主流的思路是:

1)编写静态的html文件(不使用模板技术,与服务器无关)

2)页面通过ajax与服务器交互,进行数据的传输,数据格式为json格式

这里存在一个问题,因为有大量的与服务器的ajax交互,前端代码的编写与测试对服务器的依赖很大。这有时可能会影响前端的开发效率。

本文我们提出一种方法,就是通过用js模拟服务器的请求响应,使的前端代码可以独立开发和调试,当最后实际与服务器交互时,只需替换下api即可,工作量很小。

二、解决方案

具体的做法是:

1、定义一个js类,如:

function MockServer(){

}

2、定义一个方法,如:

MockServer.prototype.ajax = function(url,paras,handle){

}

正常情况下,页面中需要向服务器发送ajax请求,需要调用相应的ajax api (具体的api依赖所使用的框架,一般开发web前端都会使用某个或多个框架,如最常用的jquery框架)。但不管是使用哪个框架的ajax api,其核心的信息包括三个部分:

1)请求的url。 服务器针对不同的url会给出不同的处理。

2)js传给服务器的参数,通常是一个json对象

3)服务器处理返回消息的回调函数

我们这里提供的ajax方法的参数正好是这三部分内容。

这时编写js代码时,就先调用这个ajax方法发送请求。到时再替换具体框架的api,这个工作量相对很小的,只需替换下api即可,其它代码基本不用变。

上面定义的ajax中组装需要返回到浏览器的数据(是个json对象),然后调用调用者提供的handle回调函数,参数就是要返回的json对象。

因为ajax的请求时异步响应的,为了使流程更加真实,我们在这个ajax方法中使用setTimeout方法来实现异步的响应。该方法的实现代码如下:

MockServer.prototype.ajax = function(url,paras,handle){ var result={}; ............. //给result对象设置值,该result对象就是返回到ajax请求的数据 window.setTimeout(handle,parseInt(10*Math.random())+10,result); }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwxzwx.html