js原生态的Ajax实现+Struts2

来源：互联网发布：网络主播面试什么条件编辑：程序博客网时间：2024/05/16 23:43

Ajax概述

Ajax是Asynchronous JavaScript and XML的缩写，也叫做异步的JavaScript和XML。

同步和异步的区别

同步：当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面进入假死状态，当这个AJAX执行完毕后才会继续运行其他代码，页面假死状态才会解除。也就是说，如果用ajax的话，同步那就没有什么意义了。

异步：当JS代码加载到当前的AJAX的时候，这时候浏览器在发送请求的同时，也在解析页面的代码，也就是说浏览器同时在做两件事。

js原生态代码实现

一般分四个步骤：创建对象XMLHttpRequest对象、连接数据库、发送请求、处理响应结果函数

以Struts2为例

测试页面testAjax.jsp：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>My JSP 'login.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script type="text/javascript">/**考虑到浏览器的不同，创建XMLHttpRequest的方法也不同*/function createXMLHttpRequest() {try {//符合大部分浏览器return new XMLHttpRequest();} catch (e) {//符合IE6.0try {return new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {//符合IE5.5及更低的版本try {return new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {alert("未识别浏览器类型");throw e;}}}}window.onload = function() {/**获取文本框的DOM对象*/var username1 = document.getElementById("username");/**为文本框对象添加失去焦点事件监听器*/username1.onblur = function() {/**Ajax的四步操作：创建XMLHttpRequest对象、连接数据库、发送请求、处理响应结果*//**第一步：创建获取XMLHttpRequest对象*/var xmlHttp = createXMLHttpRequest();/**第二步：连接数据库，open方法，*参数1：采用POST请求方式*参数2：请求后台资源 ValidateUsernameServlet*参数3：采用异步请求方式，true*/xmlHttp.open("POST", "/StrutsTest/ajax.action", true);//因为是POST请求方式，所以需要设置请求体，是固定的xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");/**第三步：发送请求，send方法*参数就是要传递给后台服务器的，使用使用像键值对那样的方式，如果有多个就使用&链接*将用户名的内容value传送*/xmlHttp.send("username="+username1.value);/**第四步：处理服务器传回来的结果,onreadystatechange*如果为1：在span标签中输出“用户名已经被注册”*如果为0：什么都不用做*/xmlHttp.onreadystatechange = function() {console.log("正常");if(xmlHttp.readyState==4 && xmlHttp.status==200) {//双重判断，xmlHttp的状态为4（说明服务器响应结束），服务器响应成功为200var flag = xmlHttp.responseText;//服务器响应返回的结果var info = document.getElementById("red");info.innerHTML = flag;}};};};</script>  </head>    <body>    <form>    username:<input type="text" name="username" id="username"><span id="red"></span><br />    password:<input type="password" name="password"><br />    address:<input type="text" name="address"><br />    <input type="submit" value="login">    </form>  </body></html>

测试配置文件struts.xml：

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN""http://struts.apache.org/dtds/struts-2.3.dtd"><struts>    <constant name="struts.enable.DynamicMethodInvocation" value="false" />    <constant name="struts.devMode" value="true" /><!-- 设置表单提交数据的格式，对get和post都有用 -->    <constant name="struts.i18n.encoding" value="UTF-8"/>    <package name="yxd" namespace="/" extends="struts-default"><action name="ajax" class="com.yxd.action.TestAjaxAction" method="testAjax"></action>    </package>

测试Action：

package com.yxd.action;import java.io.IOException;import javax.swing.plaf.basic.BasicSliderUI.ActionScroller;import org.apache.struts2.ServletActionContext;import com.opensymphony.xwork2.ActionSupport;/** *  * @ProjectName StrutsTest * @package com.yxd.action * @ClassName TestAjaxAction.java * @Author YXD * @Time 2017年5月9日 下午7:36:27 * @Description 测试Ajax * */public class TestAjaxAction extends ActionSupport {private String username;public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}/** *  * @throws IOException  * @Method testAjax * @Return String * @Descritption  * 要求：必须返回值是NONE，或者是null */public String testAjax() throws IOException {//静态数据jackString realname = "jack";if(realname.equals(this.getUsername())) {//设置编码为utf-8，可以显示中文ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");ServletActionContext.getResponse().getWriter().print("<font style='color:red;'>用户名已经存在</font>");} else if("".equals(this.getUsername())) {//设置编码为utf-8ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");ServletActionContext.getResponse().getWriter().print("<font style='color:red;'>用户名不能为空</font>");} else {ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");ServletActionContext.getResponse().getWriter().print("<font style='color:green;'>用户名可以注册</font>");}return NONE;}}

总结：

以上是我的一些学习心得，在运行的时候主要有下面一些需要注意的问题

首先Struts2的环境必须要配置完整，这里没有说明web.xml和jar包的补充和导入。
这里只是简单测试了ajax的功能，并不代表只有这些，可以的话可以试试同步和Get方式。
当用户输入框内容后，失去焦点的时候才会触发ajax。
Action中的方法返回值必须是NONE或者null，而且后台传回到前台的数据只能通过response对象传递。
后期会说明SpringMVC的方式有何不同，但是主要的还是用response对象。
这里用的是原生态的js，以后会使用现在主流的JQuery来实现。

0 0