Ajax前后端交互过程与低级分发器的实现

来源：互联网发布：js最新正则表达式大全编辑：程序博客网时间：2024/05/22 13:59

Ajax工作流程：

(1)用户在页面上执行了某个操作，例如鼠标移动等，会根据用户的操作，页面发出相应的DHTML事件

(2)调用该DHTML事件的客户端JavaScript事件函数，其中初始化一个用以向服务器发送异步请求的XMLHttpRequest对象，同时指定一个回调函数(success or error)，当服务器响应返回时，自动调用该回调函数

(3)服务器收到XMLHttpRequest对象的请求后，进行一系列处理，后台程序运行完毕后，返回客户端所需要的数据

(4)数据处理完毕后，执行JavaScript回调函数，对页面进行更新和修正

下面进行一个简单的前端后台使用Ajax的过程：

/*前端*//* * 将获取的字符串转换为并执行eval()方法 * */var success = function(text) {var tmp = "var json = " + decodeURIComponent(text);eval(tmp);console.log("json:", json);}var error = function(text) {console.log(text);}/* * 初始化XMLHttpRequest对象 * */var ajaxRequest = new XMLHttpRequest();/* * 如果需要将请求发送到服务器，需要使用XMLHttpRequest对象的open()和send()方法 * open(method,url.async) * method:请求的类型;GET或POST * url:文件在服务器上的位置 * async:true(异步)或false * 在这里只介绍POST方法 * */ajaxRequest.open("post", "./ajaxRequest", true);/* * setRequestHeader(header,value) * 向请求添加HTTP头 * header:规定头的名称 * value:规定头的值 * 在POST方式中，这个为"套路"一般的东西，写上即可 * */ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");/* * onreadystatechange事件与responseTest属性 * 1.onreadystatechange: * 当请求发送到服务器时，我们需要执行一些基于响应的任务,每当readyState改变时，就会触发 * onreadystatechange事件,且readyState属性存在XMLHttpRequest的状态信息 * *readyState:存有XMLHttpRequest的状态 *0:请求未初始化 *1:服务器连接已经建立 *2:请求已经接收 *3:请求处理中 *4:请求已经完成，且响应已经就绪 *state: *200:"OK" *404:未找到页面 *我们在onreadystatechange事件中，规定服务器响应,已做好被处理的准备时所执行的任务 *2.responseTest: *如需获取来自服务器的响应，使用XMLHttpRequest对象的responseTest或者responseXML属性 *在这里，我们只讨论前者,responseTest属性返回字符串形式的响应 * */ajaxRequest.onreadystatechange = function() {if(this.readyState == 4) {if(this.status == 200) {success(this.responseText);} else {error(this.responseText);}}};/* * send(string) * 将请求发送到服务器 string:仅用于POST请求 * */ajaxRequest.send("id=20150801&password=3141592"); /* * 后台core: * */ /*定义响应的输出流*/ PrintWriter out = response.getWriter(); /*定义编码格式与类型*/ response.setContentType("text/json; charset=utf-8"); /*转换为json格式*/ out.append("{\"id\":\"" + teacher.getId() + "\"}"); out.flush();

Ajax功能需求与分析（借鉴同学）：

--MEC前、后端思想--

主要面对的应用：
   一些页面不固定，需要经常局部更新、替换的站点。
   例如：购物网站，如淘宝、京东。新闻网等具有时效性的网页，数据变化很快但是样式和结构固定，用户不同两次访问该页面，页面的数据肯定不相同。其实大多数可能在未来更改的页面都需要。

   方案：使用Html模板的思想构造页面。对于一个页面的一些组件，如轮播、模态框、输入框组、导航栏等等做成Html模板。对于模板，只包含必要的结构，而模板中的数据无需填充。而在需要的时候，服务器提供数据。由一系列的手段将数据注入到Html模板中（这需要解析Html模板和服务器提供的数据，并且将数据和模板缺省的信息一一对应，并注入），并且发送到客户端。

   详细过程：
   对于一次用户的访问，即在浏览器地址栏输入url。服务器并非直接向客户端发送渲染后的页面数据，如html、css、js文件等，而仅仅是页面的框架（详细文件信息：css文件包括页面框架的基本样式和未来页面数据填充后可能使用的样式；js文件包括整个页面行为控制，如基本的数据model、用于视图的view、用于页面控制的action等，因为页面的组件是以模板注入的，js文件中应该包含所有的Html模板）。（原始的方式是服务器直接向客户端传输页面需求的所有数据，并且渲染页面，但是这样的页面将是固定的，如果需要下次用户访问更新页面的部分数据，就需要服务器发送新的页面，而新页面仅仅是部分数据不同，若不使用模板就得费时的重新写页面，是很不人性化的）这种解决方案是在用户输入url后，服务器发送页面数据，但是页面的数据并非是最终的数据。仅仅是页面的基本框架数据。此时页面实际上仅仅是框架，是一个站点的基本结构，如淘宝网页面的基本结构，是不包含页面的具体数据的。此时，就需要在js文件中以AJAX方式（必须是AJAX请求方式，因为页面框架无需改变，只需要获取页面数据）再次请求服务器。在本次的AJAX请求中，请求内容是页面的数据，因此要附加对应的数据信息。这里的页面数据，是以Xml文件方式存放于服务器端的（不使用数据库的原因：对于Html页面的数据，往往是层次结构的，而数据库是不好描述这种层次结构的，因而以适合描述层次结构的Xml存放）。因此附加的信息是和该页面对应的Xml文件在服务器的Path。对于服务器端，接收到AJAX请求并且得到附加信息后，需要进找到对应的Xml文件并且解析成JSON字符串（这是为了数据到前端的方便处理）。接着服务器将以json方式将数据发送到客户端。客户端以异步的方式得到数据后并且进行一系列处理（将JSON数据解析，解析成和Html模板对应的数据，并且将数据注入到Html中），然后由浏览器渲染页面。此时的页面就是最终的页面。这样页面更改起来方便。假如一个页面1小时更新一次数据，服务器端就仅仅修改Xml文件的数据，而无需重复准备多个页面。

——————————————————————————————————————————————

**Html模板：
   Html模板应该是一些固定的组件，如模态框、导航栏、输入框组等等的结构，并且以字符串形式存在。
并且需要以一定的规则限制模板，例如需要更改的数据以变量的方式描述，对于重复出现的标签以循环的方式描述。

前端模板请参考mecBase.js

**Html模板需求的数据：
和模板中的变量对应的数据，以JS对象形式存在。值都是字符串。

**服务器端Xml的数据描述：
以一套自定义标签表示Html模板的数据。

——————————————————————————————————————————————
Ajax例子（前端与后台共同分析）:

前端:(这里贴出的js文件中的HTML模板化填充框架，即mecBase.js，暂不开源)

先贴出xml文件：

<html-data version="baseView.login@0.2.1"><html-tag tag-id="navHead" model-name="navigatorWithAction"><model-list key="navList"><items><model key="navStyle"></model><model key="navTarget">#</model><model key="navName">公司简介</model></items><items><model key="navStyle"></model><model key="navTarget">#</model><model key="navName">经典课程</model></items><items><model key="navStyle"></model><model key="navTarget">#</model><model key="navName">教主风采</model></items><items><model key="navStyle"></model><model key="navTarget">#</model><model key="navName">优秀学员</model></items></model-list><model-list key="navActionList"><items><model key="actionId">actionLogin</model><model key="actionHref">login</model><model key="actionStyle">glyphicon-user</model><model key="actionName">登录</model></items></model-list></html-tag>....</html-data>

后台解析好xml文件后，解析后的内容如下
version=baseView.login@0.2.1modelDataList=[tagId=navHeadmodelName=navigatorWithActionmodelData={navList : [{navStyle : "",navTarget : "#",navName : "公司简介",},{navStyle : "",navTarget : "#",navName : "经典课程",},{navStyle : "",navTarget : "#",navName : "教主风采",},{navStyle : "",navTarget : "#",navName : "优秀学员",},],navActionList : [{actionId : "actionLogin",actionHref : "login",actionStyle : "glyphicon-user",actionName : "登录",},],},

在前端获取到后台解析好的数据之后，用js进行处理，处理结果如下：

完成注入后，页面的显示如图：

最终就实现了只需要修改xml文件，就可以让前端内容进行更改，而不用更改源代码

在这里，贴出html的loadding.js文件以及事件响应viewAction中的ajax请求，在访问网站时，运行loadding.js后，前端发出ajax请求,通过发送请求路径，然后后台通过上面的方法送回网页数据并显示。(html文件中，loadding.js在view.js之前加载)

/*loadding.js*/(function () {$$.$elementId();console.log("刷新页面");$$.$ajax({url : "./getIndexViewData",data : {xmlFilePath : "/index_view_data.xml"},async : true,success : function(json) {var getModelDataByTagId = function(modelDataList, tagId) {for(var index = 0; index < modelDataList.length; index++) {var modelData = modelDataList[index];if(modelData.tagId == tagId) {return modelData;}}return null;}var modelDataList = json.modelDataList;for(var index = 0; index < modelDataList.length; index++) {var modelModel = modelDataList[index];var tagId = modelModel.tagId;var element = $$.$elementId(tagId);if(element == null) {continue;}var modelName = modelModel.modelName;var str = modelModel.modelData;str = str.substring(0, str.length - 1);eval("var modelData = " + str + ";");var modelStr = $ $.$setHtmlJson($$.$html(modelName), modelData);$(element).html(modelStr);$ $.$elementId();}viewAction();}});})();/*view.js中的ajax响应*/var student = $ $.$model("student");$ $.$ajax({url : "./userLoginAction",async : true,data : {id : student.getId(),password : student.getPassword()},success : function (json) {var errNo = json.errNo;if(errNo == undefined) {$($ $.$elementId("modalLogin")).modal("hide");var id = json.id;if(id.length == 8) {location = "./video/teacher/videoSender.html?id=" + id;} else {location = "./video/student/videoSelector.html?id=" + id;}} else {$ $.$surface("id.text")(json.errMsg);}}});});

后台:

在前端的的loadding.js发出ajax请求后，后台通过web.xml的配置进行跳转，先贴出web.xml文件

可以看出，在loadding.js中，url对应到后台的com.mec.video.servlet.IndexViewData类

<display-name>Lesson41MecVideo</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> <servlet> <servlet-name>indexViewData</servlet-name> <servlet-class>com.mec.video.servlet.IndexViewData</servlet-class> </servlet> <servlet-mapping> <servlet-name>indexViewData</servlet-name> <url-pattern>/getIndexViewData</url-pattern> </servlet-mapping> <filter> <filter-name>mecDatabase</filter-name> <filter-class>com.mec.video.filter.MecDatabase</filter-class> </filter> <filter-mapping> <filter-name>mecDatabase</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <filter> <filter-name>mecDispatcher</filter-name> <filter-class>com.mec.video.filter.Dispatcher</filter-class> </filter> <filter-mapping> <filter-name>mecDispatcher</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <filter> <filter-name>gateWatcher</filter-name> <filter-class>com.mec.video.filter.GateWatcher</filter-class> </filter> <filter-mapping> <filter-name>gateWatcher</filter-name> <url-pattern>/video/*</url-pattern> </filter-mapping>

在这个IndexViewData类中，我们对前端要求访问的xml文件进行解析，然后返回json字符串，前端获取后，通过loadding.js中的方法解析为网页数据，在这里，贴出其doGet方法

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/json; charset=utf-8");PrintWriter out = response.getWriter();String xmlPath = request.getParameter("xmlFilePath");InputStream is = IndexViewData.class.getResourceAsStream(xmlPath);HtmlModelModel htmlModelModel = null;try {htmlModelModel = HtmlModelParser.xmlHtmlModelParser(is);JSONObject json = JSONObject.fromObject(htmlModelModel);out.append(json.toString());out.flush();} catch (Exception e) {e.printStackTrace();out.append("false");out.flush();}}

前端页面显示后，进行登陆操作，而登陆操作，就会牵扯到分发器(模拟Struts)

模拟分发器基本思路(模拟struts)：

观察上面的web.xml在Filter中，对登陆的路径进行Filter的过滤操作，这个过滤器起名为Dispatcher。如果账号密码验证成功，进行个人页面信息的获取并进行页面的跳转至UserLoginAction，或进行其他响应跳转至不同的后台java类。如果账号密码错误，则直接返回ajax请求，在登陆框上显示账号密码错误。就拿UserLoginAction来进行说明，在这个类中，通过service以及dao的MVC模式，进行到最后的数据库查询。那么在Dispatcher中，我们只能截获账号和密码，如果能塞在UserLoginAction中去呢？核心还是xml的解析,对所有action，我们创建一个xml

<mec-action><action name="userLoginAction" class="com.mec.video.login.action.UserAction"><result type="json" name="RETURN"></result></action></mec-action>

在这个xml中，我们在Filter中形成一个map，将name和calss作为键值放进去，而所有的action都必须实现IAction类，IAction要求实现excute()方法。map的结构为private static final Map<String, IAction> actionMap;实现了接口的类，以接口方式放入map，相应的action，从view.js中的ajax请求中得到，然后进行解析

String uri = httpRequest.getRequestURI();String actionName = null;int projectIndex = uri.indexOf("/", 1);if(projectIndex == -1) {chain.doFilter(request, response);return;}actionName = uri.substring(projectIndex + 1);if(!actionName.endsWith("Action")) {chain.doFilter(request, response);return;}IAction action = actionMap.get(actionName);                if(action instanceof ISessionAware) {ActionSession actionSession = new ActionSession(session);((ISessionAware) action).setSession(actionSession);}                prepareParameter(httpRequest, action);

在UserLoginAction中，我们处理好账号密码匹配情况与错误请求，最后返回一个值和个人账号信息或响应的json字符串，并且通过实现接口，得到Filter中的session与cookie，先讨论返回值，首先贴出UserLoginAction的代码：
public class UserAction implements IAction, ISessionAware, ICookieAware {private UserService userService;private String id;private String password;private IUserInfo userInfo;private ActionSession session;private CookieAction cookie;public UserAction() {userService = new UserService();}public void setId(String id) {this.id = id;}public void setPassword(String password) {this.password = password;}public IUserInfo getUserInfo() {return userInfo;}@Overridepublic String execute() {StringBuilder result = new StringBuilder();userInfo = userService.getUserById(id);String userId = userInfo.getId();String userPassword = userInfo.getPassword();String errMsg = null;if(userId.equals("Error")) {result.append("{\"errNo\":\"000001\"");try {errMsg = URLEncoder.encode(MecBaseConfig.getBaseConfigValue("ERROR_USER_INFO_ERROR"),"utf-8");} catch (UnsupportedEncodingException e) {e.printStackTrace();}result.append(",\"errMsg\":\"" + errMsg + "\"}");return result.toString();}if(!userPassword.equals(password)) {result.append("{\"errNo\":\"000002\"");try {result.append(",\"errMsg\":\"" + URLEncoder.encode(MecBaseConfig.getBaseConfigValue("ERROR_USER_INFO_ERROR"), "utf-8") + "\"}");} catch (UnsupportedEncodingException e) {e.printStackTrace();}return result.toString();}if(userInfo.getStatus().equals("1")) {result.append("{\"errNo\":\"000003\"");try {result.append(",\"errMsg\":\"" + URLEncoder.encode(MecBaseConfig.getBaseConfigValue("ERROR_USER_OUT_DUE"), "utf-8") + "\"}");} catch (UnsupportedEncodingException e) {e.printStackTrace();}return result.toString();}session.addSession("id", id);if(userInfo instanceof StudentModel) {StudentModel student = (StudentModel) userInfo;student.setPassword("");cookie.setCookie("name", student.getName());StudentService studentService = new StudentService();String photoDir = studentService.getStudentPhotoDirByPeopleId(student.getPeopleId());String filename = "E:\\MEC视频库\\学生照片\\" + photoDir+ "\\" + student.getPeopleId() + ".jpg";Image image = Toolkit.getDefaultToolkit().getImage(filename);System.out.println(image.getSource().toString());MecClassService mecClassService = new MecClassService();MecClassModel classInfo = mecClassService.getClassByClassId(student.getId().substring(0, 9));cookie.setCookie("photoSrc", "");String mecClassName = classInfo.getName();String[] mecClassInfoArray = mecClassName.split("@");try {cookie.setCookie("classNameYear", URLEncoder.encode(mecClassInfoArray[0], "utf-8"));cookie.setCookie("className", URLEncoder.encode(mecClassInfoArray[1], "utf-8"));} catch (UnsupportedEncodingException e) {e.printStackTrace();}result.append("{\"id\":\"" + student.getId() + "\"}");} else if(userInfo instanceof TeacherModel) {TeacherModel teacher = (TeacherModel) userInfo;teacher.setPassword("");result.append("{\"id\":\"" + teacher.getId() + "\"}");}return result.toString();}@Overridepublic void setSession(ActionSession session) {this.session = session;}@Overridepublic void setCookie(CookieAction cookieAction) {this.cookie = cookieAction;}}

在Filter中，对多种情况进行处理即可，发出跳转命令或者返回ajax请求，而我们需要在Dispatcher进行反射机制，将它获取到的id和password注入至UserLoginAction
private void prepareParameter(HttpServletRequest request, IAction action) {Class<?> klass = action.getClass();Method[] methods = klass.getMethods();for(Method method : methods) {String methodName = method.getName();if(!(methodName.startsWith("set") && method.getParameterTypes().length == 1&& method.getReturnType().equals(void.class))) {continue;}String property = methodName.substring(3);property = property.substring(0, 1).toLowerCase() + property.substring(1);String value = request.getParameter(property);if(value == null) {continue;}try {method.invoke(action, value);} catch (IllegalAccessException e) {e.printStackTrace();} catch (IllegalArgumentException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}}}

再讨论UserLoginAction对Dispatcher的操作，首先实现接口，在这里贴出两个类

/*接口*/public interface ISessionAware {void setSession(ActionSession actionSession);}/*ActionSession类*/public class ActionSession {private HttpSession session;public ActionSession(HttpSession session) {this.session = session;}public void setSession(String key, String value) {addSession(key, value);}public void addSession(String key, String value) {session.setAttribute(key, value);}public void removeSession(String key) {session.removeAttribute(key);}<br/>

ActionSession实现了Dispatcher中对session的方法，并通过接口，实现了Dispatcher中对session的操作，cookie同理。

阅读全文

0 0