`

AJAX和JSON Web开发前后台交互

AJAXJSONXMLHttpRequestStruts1.X 
阅读更多

 

工具：myeclipse6.0

环境：支持Struts1.x的Javaweb动态工程

简介：ajax前后台的数据交互实现依赖于XMLHttpRequest对象；

         json实现将后台业务逻辑处理过的数据封装送给前台。

 

实例1：

前台JSP页面--pages/ajax.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%>">
    
	<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">
	-->
	
	 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>ajax样例</title>
        <style type="text/css">
        td {width: 100px;}
        </style>
        <script type="text/javascript" src="/ajax/pages/json2.js"></script>
        <script type="text/javascript">
          function getXHR()
          {
              try
              {
                   return new XMLHttpRequest();
              }
              catch(e)
              {
                  try
                  {
                      return new ActiveXObject("Microsoft.XMLHTTP");
                  }
                  catch(e)
                  {
                      return new ActiveXObject("Msxml2.XMLHTTP");
                  }
              }
          }
          
          function getInfo()
          {
              var xhr = getXHR();
              xhr.open("POST", "/ajax/emp.do?method=getInfo", true);
              xhr.onreadystatechange = function() 
              {
                  if (xhr.readyState == 4) 
                  { 
                      var empInfo = JSON.parse(xhr.responseText);
                      document.getElementById("id").value = empInfo.id;
                      document.getElementById("name").value = empInfo.name;
                      document.getElementById("age").value = empInfo.age;
                      document.getElementById("sal").value = empInfo.sal; 
                      document.getElementById("desc").value = empInfo.desc; 
                      var sexRadios = document.getElementsByName("sex");
                      for(var i=0;i<sexRadios.length;i++)
                      {
                          if(sexRadios[i].value == empInfo.sex)
                              sexRadios[i].checked = true;
                      }
                  }
              }
              xhr.send();
          }
        </script>

  </head>
  
  <body>
    <fieldset style="width: 300px">
           <legend>人员信息</legend>
           <table width="100%">
               <tr><td>ID</td><td><input type="text" id="id" /></td></tr>
               <tr><td>姓名</td><td><input type="text" id="name" /></td></tr>
               <tr><td>年龄</td><td><input type="text" id="age" /></td></tr>
               <tr><td>性别</td><td><input type="radio" value="0" name="sex" />男<input type="radio" value="1" name="sex" />女</td></tr>
               <tr><td>薪资</td><td><input type="text" id="sal" /></td></tr>
               <tr><td colspan="2">备注</td></tr>
               <tr><td colspan="2"><textarea rows="5" id="desc" style="width: 100%"></textarea></td></tr>
           </table>
       </fieldset>
       <input type="button" value="获取数据" onclick="getInfo()"/>
  </body>
</html>

 

配置Struts1.2支持--/ajax/WebRoot/WEB-INF/struts-config.xml：

 

 

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE struts-config PUBLIC
          "-//Apache Software Foundation//DTD Struts Configuration 1.3//EN"
          "http://struts.apache.org/dtds/struts-config_1_3.dtd">
<struts-config>
    <action-mappings>
        <action type="com.neusoft.ajax.EmpAction" scope="request" parameter="method" path="/emp" />
    </action-mappings>
</struts-config>

 

后台数据包装后发送到前台处理--/ajax/src/com/neusoft/ajax/EmpAction.java

 

 

package com.neusoft.ajax;

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;
import org.json.JSONException;
import org.json.JSONObject;

public class EmpAction extends DispatchAction
{
    public ActionForward getInfo(ActionMapping mapping, ActionForm form, HttpServletRequest request,
            HttpServletResponse response) throws IOException, JSONException
    {
        JSONObject obj = new JSONObject();
        obj.put("id", 1001);
        obj.put("name", "Will");
        obj.put("age", 28);
        obj.put("sex", 0);
        obj.put("sal", 2000);
        obj.put("desc", "some infomation");
        response.getWriter().write(obj.toString());
        return null;
    }
    
    public ActionForward getMsg(ActionMapping mapping, ActionForm form, HttpServletRequest request,
            HttpServletResponse response) throws IOException, JSONException
    {
        response.getWriter().write("Hello,AlvinKing , A message from server");
        return null;
    }
}

 

实例2：

 

共用实例1的后台处理类，前台页面--/ajax/WebRoot/pages/ajax1.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%>">
    
	<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">
	-->
	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>ajax样例</title>
		<style type="text/css">
		</style>
		<script type="text/javascript">
		  function getXHR()
		  {
			  try
			  {
				   return new XMLHttpRequest();
			  }
			  catch(e)
			  {
				  try
				  {
					  return new ActiveXObject("Microsoft.XMLHTTP");
				  }
				  catch(e)
				  {
					  return new ActiveXObject("Msxml2.XMLHTTP");
				  }
			  }
		  }
		  
		  function getMsg()
		  {
			  var xhr = getXHR();
			  xhr.open("POST", "/ajax/emp.do?method=getMsg", true);
			  xhr.onreadystatechange = function() 
			  {
				  if (xhr.readyState == 4) 
				  { 
					  document.getElementById("msg").value = xhr.responseText;
				  }
			  }
			  xhr.send();
		  }
		</script>
		
		

  </head>
  
  <body>
     <textarea rows="5" cols="100" id="msg"></textarea>
	   <input type="button" value="获取数据" onclick="getMsg()"/>
  </body>
</html>
 

最后配置工程启动xml，--/ajax/WebRoot/WEB-INF/web.xml

 

 

<?xml version="1.0" encoding="ISO-8859-1"?>

  <!DOCTYPE web-app PUBLIC
	"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
	"http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>
  <display-name>ajax</display-name>
  
  <!-- Standard Action Servlet Configuration -->
  <servlet>
    <servlet-name>action</servlet-name>
    <servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
    <init-param>
      <param-name>config</param-name>
      <param-value>/WEB-INF/struts-config.xml</param-value>
    </init-param>
    <load-on-startup>2</load-on-startup>
 </servlet>


  <!-- Standard Action Servlet Mapping -->
  <servlet-mapping>
    <servlet-name>action</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>


  <!-- The Usual Welcome File List -->
  <welcome-file-list>
    <welcome-file>pages/ajax.jsp</welcome-file>
  </welcome-file-list>

</web-app>
分享到：
| 导入导出dmp格式数据库
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax+json实例

    AJAX+JSON在.NET环境中的应用大大提高了Web应用程序的交互性和效率，减少了不必要的页面刷新，提升了用户体验。通过理解并熟练掌握AJAX的异步通信机制以及JSON的数据交换格式，开发者能够构建出更加高效、流畅的Web...

    jquer ajax + json + jackson 进行前后台数据交互

    里面有所需jar包，如jackson-annotations，jackson-core，jackson-databind，jstl-1.2，mysql-connector-java-5.1.7-bin，standard，不需再花多余C币

    前台ajax与后台json传递

    在Web开发中，前后端数据交互是至关重要的一个环节，特别是在动态网页应用中。"前台Ajax与后台Json传递"这个主题就是关注如何高效地实现这一交互过程。Ajax（Asynchronous JavaScript and XML）技术允许我们在不刷新...

    jquery+webservice前后台交互，返回值json

    在IT行业中，前后台交互是实现网页动态功能的关键步骤，而`jQuery`、`AJAX`和`WebService`是这一过程中的重要技术组件。这里我们将深入探讨如何利用`jQuery`结合`WebService`来实现JSON格式的数据交换，以及如何通过...

    Ajax与servlet后台交互，数据类型JSON

    本知识点主要探讨如何利用Ajax进行前后台数据交换，特别是当后台服务（Servlet）返回的数据类型为JSON（JavaScript Object Notation）时。 **一、Ajax简介** Ajax是一种在不刷新整个网页的情况下，与服务器交换数据...

    简单Ajax实例(带前后台交互)

    本实例以JSP页面为例，详细阐述Ajax在前后台交互中的应用。 一、Ajax基础概念 1. XMLHttpRequest对象：它是Ajax的核心，负责与服务器建立连接并发送请求，接收响应。 2. 异步：Ajax的核心特性是异步处理，这意味着...

    c# webform无刷新前后台交互

    总结来说，C# WebForm实现无刷新前后台交互涉及的技术包括AJAX、UpdatePanel、WebMethod、jQuery、SignalR等，并且需要理解JSON数据交换、错误处理和状态管理等关键概念。通过这些技术的综合运用，开发者可以构建出...

    C#，AJAX读写JSON

    总的来说，这个项目涉及到的知识点包括C#编程、JSON序列化和反序列化、AJAX技术、JavaScript操作JSON、ASP.NET Web开发以及资源文件的使用。这些技能在现代Web开发中是非常重要的，能够帮助开发者构建响应式、高性能...

    C# 前后台交互访问

    "C# js和后台交互"这个主题主要探讨的是如何使C#运行在服务器端，处理由JavaScript发起的请求，并将结果返回给前端。 Ajax（Asynchronous JavaScript and XML）是实现这种交互的核心技术之一，它允许网页在不刷新...

    平台java前端ajax，json请求

    本话题主要关注在Web平台中，使用Java后端和JavaScript前端进行JSON数据交互的过程，具体涉及到AJAX（Asynchronous JavaScript and XML）技术以及JSON（JavaScript Object Notation）数据格式。 **1. AJAX**：AJAX ...

    maven+ajax+json

    综上所述，"maven+ajax+json"代表的是使用Maven构建的Web项目，通过Ajax技术和JSON进行前后端数据交互。结合SSM框架，可以构建出高效、灵活的企业级应用。在实际开发中，理解并熟练掌握这些技术，对于提升开发效率和...

    ajax 解析json数据

    在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。JSON（JavaScript Object Notation）是一种轻量级的...

    jQuery+get/post+Ajax+Json

    在本文中，我们将深入探讨jQuery、Ajax以及Json在Web开发中的应用，特别是在数据交互方面的实践。标题"jQuery+get/post+Ajax+Json"揭示了这一技术组合如何在现代Web应用程序中实现高效的数据通信。 首先，jQuery是...

    struts2.2 项目搭建 以及与 struts2-json jquery 前后台进行交互

    在"Struts2.2 项目搭建 以及与 struts2-json jquery 前后台进行交互"的主题中，我们主要会探讨以下几个知识点： 1. **Struts2 项目搭建**： - **环境配置**：首先需要安装JDK，设置好环境变量，然后安装Apache ...

    通过ajax进行前后台交互

    页面通过ajax与后台进行前后台数据交互 .

    AJAX和struts2传递JSON数组

    在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种技术，它允许我们在不刷新整个页面的情况下与服务器进行异步数据交换。而Struts2是一个基于MVC（Model-View-Controller）架构的Java Web框架，它极大地...

    前后台交互的实时进度条 支持多浏览器

    总的来说，实现"前后台交互的实时进度条"涉及了Web开发的多个方面，包括前后端通信、实时数据传输、前端组件设计和后端接口设计等。通过这个资源，开发者可以深入理解并掌握这些技术，提升Web应用的用户体验。

    Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建各种动态、交互式的图表，如折线图、柱状图、饼图等。在这个"Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子"中，我们将...

    Ajax（json） 开发实例

    **Ajax（JSON）开发实例详解** ...总结，Ajax结合JSON在Web开发中广泛应用，通过异步通信提高了用户体验，而JSON作为数据交换格式，使得前后端交互更为简单。理解并掌握这些技术，能让你在开发过程中更加得心应手。

Magicbox
Global site tag (gtag.js) - Google Analytics