一个用于J2EE应用程序的Backbase Ajax前端

  动态HTML技术已经出现了多年。最近,Google的最新Web应用程序GMail、Google Suggests和Google Maps,在前端页面中重新引入了基于标准的DHTML开发模型。Google证明了,DHTML开发模型能够让开发人员创建具有可视化吸引力和高度交互式的Rich Internet Application(丰富网络应用程序,RIA)。

  Adaptive Path公司的Jesse James Garrett为这个基于标准的RIA开发模型创造了术语Ajax (Asynchronous JavaScript + XML)。与传统的基于页面的Web应用程序模型相比,Ajax有3点不同之处:

  • 有一个客户端引擎担任用户界面(UI)和服务器之间的中介。
  • 用户行为由客户端引擎处理,而不是生成发往服务器的页面请求。
  • XML数据在客户端引擎和服务器之间传输。

  换言之,Ajax解决方案包括一个客户端引擎,它用于呈现用户界面,并使用XML格式与服务器通信。这个引擎由很多JavaScript函数组成,位于Web浏览器中,它不需要插件,也不需要用户安装。

  基于Ajax的RIA正在迅速成为Web应用程序前端的基准,因为它可以同时提供二者的优点:丰富性和可达性。Ajax应用程序和桌面应用程序一样丰富,响应高度灵敏,并且可以在一个页面上提供所有数据,无需刷新页面。它们还拥有基于标准的浏览器应用程序的可达性特点,这类应用程序可以在不具备浏览器插件或客户端applet的情况下进行部署。

  Backbase所提供的Ajax软件具有以下特点:基于标准、功能全面且易于使用。Backbase Presentation Client (BPC)基于Ajax技术,它使用称为Backbase XML (BXML)的附加标签扩展了DHTML。Backbase XML Server Edition for J2EE (BXS)包含了一些服务器端的组件,利用这些组件,J2EE开发人员可以快速开发J2EE应用程序的Ajax前端。

  在本文中,我使用Backbase为Java Pet Store开发了一个基于Ajax的前端。该案例分析说明了如何使用Backbase技术作为J2EE应用程序的Ajax表示层。您可以查看文中所描述的应用程序的在线演示,网址是http://www.backbase.com/xmlserver

Backbase Ajax表示层

  Web开发人员应该能够轻松创建具有以下特点的Rich Internet Application (RIA):完全基于HTML标准(W3C),不需要最终用户安装插件,速度超快,能够在所有浏览器上进行操作,并与J2EE运行时和开发环境完全集成。RIA利用客户端(Web浏览器)资源创建和管理用户界面,从而为最终用户提供一个响应灵敏而且具有应用程序风格的用户界面。

  这种方法最近被称为Ajax。Ajax这个术语的灵感来源于Gmail、Google Maps和Google Suggests这类应用程序,它把现有的浏览器技术提高到了一个新的水平上。RIA从根本上改进了在线应用程序的可用性和有效性。Ajax RIA只使用标准的浏览器技术(如JavaScript、XHTML和XMLHttpRequest对象)就做到了这一点。通过使用XMLHttpRequest,在将数据异步加载到界面中时就无需刷新页面。

  Backbase在J2EE架构中提供一个Ajax表示层,它结合了目前的J2EE服务器和先进的富客户端技术的优点。Backbase表示层控制了富用户界面的每个方面:与最终用户的交互模型,与后端系统的集成,以及整个客户端-服务器通信。Backbase直接提供了用于聚合来自任意位置的XML的下一个范型,将数据绑定到先进的富用户界面控件,并在一个统一的富用户界面中交付组合应用程序。

  Backbase表示层由一个客户机和一个服务器组成。Backbase Presentation Client (BPC)是一个基于Ajax的GUI引擎,它允许开发人员以声明性的方式快速构建RIA。Backbase XML(BXML)是对XHTML的扩展。它为开发人员提供了交付富前端功能的附加标签(B tag)。Backbase XML Server (BXS)提供一种XML流水线架构,利用它可以从Web服务、数据库或Java对象获取数据,可以聚合和转换这些数据,并将其绑定到BPC中的UI元素。BPC和BXS相结合,可以在Web浏览器和应用服务器之间搭建一座功能强大的桥梁,并提供一个分布在客户端和服务器上的完整的富Internet表示层。

  图1说明了在逻辑和物理应用程序架构中,Backbase所处的位置。应用程序由一个J2EE后端和一个基于Ajax的RIA前端组成。从逻辑上说,Backbase提供了表示层,而J2EE提供了业务逻辑和数据层。从物理上说,表示层分布在客户端和服务器上。在客户端上,Backbase使用BPC扩展了浏览器。在服务器上,Backbase使用BXS扩展了应用服务器。

图1. Backbase富Internet表示层

Pet Store案例分析

  我们将使用Java Pet Store作为案例来分析如何为J2EE应用程序添加Backbase RIA前端。Java Pet Store Demo是Sun Microsystems提供的一个示例应用程序,其目的是为了演示如何使用Java 2 Platform, Enterprise Edition(J2EE)构建Web应用程序(详情请参见http://java.sun.com/developer/releases/petstore)。

  Java Pet Store是业内一个著名的参考应用程序(pet store还有.NET和Flash版本)。由于以下两个原因,它成为为J2EE应用程序添加基于Ajax的RIA前端的完美案例:

  • Java Pet Store是一个完整的Web应用程序。

    Sun设计Pet Store的目的是演示所有常见的Web应用程序功能。通过使用Pet Store作为案例,我可以说明为J2EE应用程序添加RIA层的所有方面。

    作为一个典型的在线商店,它包含以下功能:

    • 浏览产品类别。
    • 在购物车中添加和删除物品。
    • 填写订单表单。
    • 提交订单。
  • Java Pet Store有一个传统的HTML前端。

    使用RIA前端的目的是提供更简单和响应更灵敏的GUI,以及通常更为丰富的Web用户体验。我将说明,如何通过Backbase RIA技术极大地改进应用程序的前端,同时无需对后端和总体系统需求做任何修改。

    Pet Store的RIA前端将通过以下方式改善可用性:

  • 把前端变为一个单页面的界面(SPI)。
  • 提供更先进的UI控件(如模态弹出式菜单)。
  • 使用可视化效果(例如,把宠物放入购物车)。
  • 更加有效地利用电脑屏幕的操作区域。

RIA Pet Store前端

  在这一节中,我将讨论经过改进的新Pet Store RIA前端。

  下面的两个屏幕快照演示了前端的改进。要获得对Backbase RIA前端更直观的感受,请访问http://www.backbase.com/xmlserver上的在线演示,或者到http://www.backbase.com/download下载Backbase社区版本。

下面两个图对两个前端进行了可视化的比较。图2显示的是原来静态的多页面HTML前端。图3显示的是新的Backbase SPI前端:

图2. 原始HTML前端

图3. 新Backbase前端

  Backbase为创建丰富的单页面Web界面提供了许多可能性。下面列出了一些Pet Store所使用的例子。

  • 选项卡式的单页面浏览

    在Web界面上,不同的动物种类(狗、猫等等)被表示为不同的选项卡。点击一个选项卡就会打开相应的类别,显示可供出售的宠物。

    在Backbase SPI中,无需刷新页面就可以打开选项卡。BPC只从服务器请求所需的数据,然后更新客户端的视图。SPI机制可以极大地缩短响应时间,让客户随心所欲地在类别之间来回穿梭。

  • 活动的多功能界面

    界面有三个主要功能——类别浏览、购物车和页面引导历史记录,它们在界面上都是一直可见的。因此,购物者总是能够查看购物车的当前内容或最近看过的宠物的记录。

    这些功能是高度同步的:浏览一个宠物时,历史记录将自动更新为在记录中显示该宠物。定购一个宠物时,它将被添加到购物车中。上述一切都发生在客户端的一个页面上(例如,无需重新加载页面就可以更新界面的各个部分)。

  • 界面变化的流畅可视化效果

    进行浏览时,客户将会看到不断变化的界面视图。例如,他可以按照价格和名称对宠物进行排序。界面需要根据新的排列顺序显示更新以后的宠物清单。

    在Backbase RIA前端中,以前的视图被使用可视化效果的新视图所代替,新视图向最终用户显示什么正在改变。图4说明了如何通过流畅的定位效果,把按名称排列的顺序转变为按价格排列的顺序:

    图4.类别视图的排列顺序转换

  • 用于提高转换速度的信息栏验证

  为了执行购买,购买者必须在一份表单中填入个人详细信息。Backbase极大地简化了这个购买过程,通过客户端的信息栏验证提供即时的反馈,并在提供所有数据的过程中提供逐步的指南和概述。

  图5显示了在填写表单的第一个步骤中,对于e-mail地址信息栏的验证。当购买者填写下一栏时,就会提供即时的反馈。

图5. 信息栏验证—e-mail栏

Backbase RIA Pet Store的架构

  增强Pet Store(或其他任何Web应用程序)的前端时,我们将继续依赖于以下两条架构基本原则:

  • 最终用户仍然使用标准的Web浏览器访问Pet Store,无需添加任何插件。
  • 由J2EE业务逻辑和数据组成的整个后端保持不变。

  现有的后端在开发期间是完全孤立的,而且不会改变,这个事实对于架构师和IT管理人员十分有利。通过一个规整的、模块化的架构,他们将能够控制风险和成本,同时显著提高Web应用程序的用户友好性。

  Backbase的富表示层技术由两个模块组成,它们将被加入到架构中。在客户端,BPC管理着SPI,并通过异步响应事件来处理与最终用户之间的交互。在服务器端,Backbase XML Server这个灵活的XML管道可以连接到任意服务器端的数据源,包括Web服务、文件、数据库或本地Java对象。图6说明了BPC和BXS如何共同为RIA提供一个声明式的、基于XML的端到端表示层。

图6. 声明式的端到端表示层

Backbase表示客户端

  BPC是一个基于Ajax的GUI引擎,它运行在标准的Web浏览器中。运行时,BPC被加载到浏览器中,然后它会接收BXML代码,构造对应的B树,并不断地把这种表示转换为浏览器所呈现的DOM树。图7说明了运行时转换过程。

图7. BPC运行时

Backbase XML

  Backbase XML (BXML)是XHTML的扩展。开发人员通过创建BXML应用程序来开发富前端,包括BXML标签、标准的XHTML和CSS。BXML是一种声明性语言,它包含了XHTML中所没有的标签(B标签)

  BXML包含用于下列用途的标签:

  • 定义屏幕分区()
  • 交互式客户端控制()
  • 处理标准的用户交互事件(onClick)
  • 处理高级的用户交互事件(拖放和调整大小)
  • 管理客户端状态
  • 处理可视化效果(使修改任意CSS属性的过程动画化)
  • 数据绑定
  • 使用XSLT的一个子集进行客户端转换

用于J2EE的Backbase XML Server

  Backbase XML Server (BXS)是一个服务器端的引擎,用于把BPC链接到任意J2EE后端。和BPC一样,BXS是完全基于XML的,其编程是声明性的。它使用一种XML管道架构,提供功能强大的服务器端转换和聚合。

  BXS附带一些用于访问最常用的数据源(包括Web服务、数据库、文件系统和本地Java对象)的开箱即用任务。我们使用Backbase标签对从这些源获得的数据进行聚合,然后使用XSLT进行转换。结果以无格式XML数据或BXML表示代码的形式返回给BPC。

  BXS还提供一些应用服务,包括身份验证、授权、日志记录和用户跟踪。图8显示了BXS的总体架构。

图8. BXS架构

Eclipse开发工具

  为了让J2EE开发人员可以只使用一种开发工具就能创建完整的Web应用程序,包括富前端,Backbase提供了一个Eclipse插件。如图9所示,该插件提供了在Eclipse中突出显示语法和Backbase标签代码自动完成的功能。

图9. Backbase Eclipse插件

  注意:Eclipse的可视化拖放开发插件还处在开发阶段。

部署到BEA WebLogic

  BXS是一个与标准兼容的J2EE应用程序,可以将其部署到任何J2EE应用服务器上。图10显示了如何使用WebLogic控制台把BXS部署到BEA WebLogic Server

图10. 把BXS部署到BEA WebLogic

实现Backbase RIA Pet Store

  下面的顺序图包括更多详细信息,可以帮助您更好地理解如何实现Backbase pet store。该顺序图显示了在应用程序的初始化加载期间BPC与BXS之间的交互,如图11所示,它包括以下4个步骤:

  • 初始化:用户在浏览器中输入宠物商店的URL;对BPC进行初始化。
  • 应用程序布局:触发正在构造的事件;BPC构建整体应用程序布局;宠物类别被加载并显示在选项卡中。
  • 默认数据:默认情况下加载狗的类别;最初显示8张狗的图片,并带有向前/向后和排序功能。

  用户交互:用户点击Next按钮便可显示编号从9到16的狗图片。

图11.顺序图:富商店前端

  • 初始化

    从用户在浏览器中输入宠物商店的URL开始,这将导致从Web服务器请求一个索引页面。

    索引页面包含用于实例化BPC的代码。索引页面是XHTML和BXML标签的结合,包含负责启动富前端的初始化事件处理程序。

    BPC初始化代码:

    <...>
    
    <...>
    
      
    
        <s:loading>
    
          <div style="position:absolute;width:20%;
    
                         top: 50px;left: 35%;">
    
            <center>Please wait while loading...
    
            </center>
    
          </div>
    
        </s:loading>
    
        <...>
    
        <!-- Include petshop specific behaviors -->
    
        <s:include b:url="petshop.xml"/>
    </pre></li> 
       <li>应用程序布局 <p>加载页面之后,BPC就会处理正在构造的事件,以便开始构建总体的应用程序布局。</p><p>应用程序布局由几个面板组成,它们将屏幕划分为几个部分。顶行有一个固定高度的宠物商店徽标,接下来的主行是实际的商店,大小可以调整。主行分为两列,左边一列是产品类别,右边一列是购物车和历史记录。</p>产品类别使用选项卡式的导航,每个宠物类别一个选项卡。这些选项卡是动态构造的,具体过程是通过BXS从一个XML文件加载类别,然后通过一个客户端模板把这些类别转换为选项卡,该转换模板的BPC代码如下: <pre class="code"><s:task b:action="transform"
    
        b:stylesheet="b:xml('categories')"
    
        b:xmldatasource="b:url('categories.xml')"
    
        b:destination="id('main-content')" 
    
        b:mode="aslastchild" />
    
    </pre><p>下面是用于从文件系统把类别加载为XML的BXS代码:</p><pre class="code"><bsd:pipeline equals="categories.xml"
    
                                     access="public">
    
        <bsd:readxml input="file:/categories.xml"/>
    
    </bsd:pipeline>
    </pre><p>下面是用于创建选项卡式导航的BPC客户端模板:</p><pre class="code"><b:tabrow>
    
      <s:for-each b:select="categories/category">
    
        <b:tab>
    
          <s:attribute b:name="b:followstate">
    
            id('<s:value-of b:select="name"/>')
    
          </s:attribute>
    
          <s:value-of b:select="name"/>
    
        </b:tab>
    
      </s:for-each>
    
    </b:tabrow>
    </pre><p>所有BPC代码(用蓝色表示)都在客户端执行,而所有BXS代码(用红色表示)都在服务器端执行。注意,在本例中,我选择了在客户端进行转换,因为数据集很小。下面我会给出一个在服务器端转换的例子。两种转换都要用到XSLT语法。Backbase的一个强大功能就是,前端开发人员可以根据情况选择在客户端还是服务器端处理表示逻辑。语法似乎允许轻松地把代码从客户端移到服务器端,或者反之。</p><p>以上的代码示例应该可以使您了解到,借助于Backbase,Ajax编程变得多么轻松。结合了DHTML的声明性方法则更容易上手。使用附加的B标签不仅可以使界面更加丰富,而且可以使开发人员的效率更高。诸如<b:tab>之类的单个标签可以代替多行HTML和JavaScript代码,而且保证可以用于各种浏览器。</p></li> 
       <li>默认数据 <p>显示商店前端时,默认情况下显示的是狗的类别。对于本案例,BXS负责此项操作。BXS从一个Web服务获得数据,将其放入缓存,然后生成BXML表示代码,再把这些表示代码发回给BPC。服务器还通过一项配置设置确定一个页面上可以显示的动物数量,并根据需要加入了Next和Previous按钮。最后,服务器还提供了按照名称或价格进行排序的功能。</p><p>下面的代码片断演示了服务器功能。外部管道products-overview.xml首先调用catalog.xml子管道。该子管道要么返回缓存中的宠物信息,要么调用另一个子管道catalog.ws。在缓存没有命中的情况下,内部管道catalog.ws会从Web服务获取宠物信息。</p><p>外部管道获得宠物信息,然后进行XSLT转换,从而以4x2表格显示这些信息,并带有Next和Previouse按钮,然后把BXML格式的代码发回给BPC。BPC呈现它接收到的BXML。</p><p>有3个嵌套的BXS管道分别用于从Web服务获取数据、将其放入缓存,以及通过XSLT转换创建BXML输出: </p><pre class="code"><bsd:pipeline equals="products-overview.xml"
    
                                  access="public"/>
    
      <bsd:callpipe pipe="catalog.xml"/>
    </pre><pre class="code"><bsd:pipeline equals="catalog.xml" access="private">
    
      <bsd:exist field="{global:petstore-catalog}">
    
        <bsd:readxml>{global:petstore-catalog}
    
        </bsd:readxml>
    
        <bsd:otherwise>
    
          <bsd:callpipe pipe="catalog.ws"/>
    </pre><pre class="code"><bsd:pipeline equals="catalog.ws"
    
                                   access="private">
    
      <bsd:try>
    
        <bsd:callws wsdl="PetstoreCatalog.wsdl"
    
                                   method="getAll"/>
    
        <bsd:callpipe pipe="strip-root-ns"/>
    
        <bsd:catch>
    
          <bsd:xslt xslt="error.xslt">
    
            <bsd:param name="errormsg">{error:message}
    
            </bsd:param>
    
            <bsd:param name="errorsrc">{error:source}
    
            </bsd:param>
    
          </bsd:xslt>
    
        </bsd:catch>
    
      </bsd:try>
    
    </bsd:pipeline>
          <bsd:writexml>{global:petstore-catalog}
    
          </bsd:writexml>
    
        </bsd:otherwise>
    
      </bsd:exist>
    
    </bsd:pipeline>
    <bsd:extractfilter xpath=
    
      "category[name/text()='{requestparam:category}']"/> 
    
      <bsd:xslt xslt="products/products-overview.xslt">
    
        <bsd:param name="category">
    
          {requestparam:category}
    
        </bsd:param>
    
        <bsd:param name="stepsize">
    
          {global:stepsize}
    
        </bsd:param>
    
        <bsd:param name="sortorder">
    
          {requestparam:sortorder}
    
        </bsd:param>
    
        <bsd:param name="sortfield">
    
          {requestparam:sortfield}
    
        </bsd:param>
    
      </bsd:xslt>
    
    </bsd:pipeline>
    </pre><p>代码示例再次清楚地说明了,借助于Backbase,以声明性的方式创建Ajax前端是多么容易的事情。例如,只要使用带有一个WSDL引用作为属性的<bsd:callws>标签,就可以调用一个Web服务。</p></li> 
       <li>用户交互 <p>现在,最终用户可以与宠物商店类别进行交互。可以使用Next或Previous按钮或者排序功能在动物类别中进行浏览。或者,只要点击一下相应的选项卡,就可以转到另一个类别中。</p><p>BPC和BXS对这种交互进行了无缝处理。显示已经在客户端上的数据时,无需与服务器进行任何通信。例如,购物者已经从狗类别转到了猫类别,然后再回到狗类别。客户端仍然拥有狗类别的数据,所以可以马上显示出来,这使得购物体验变得更完美。其他的类别需要从BXS获取。BXS要么立即从其缓存返回它们,要们访问Web服务来获得新数据。</p></li> 
      </ul> 
      <p>  为了详细说明Backbase Ajax宠物商店的实现,我把重点放在了初始化的步骤上。完整的宠物商店(可以从<font color="#002c99">http://www.backbase.com/xmlserver</font>下载)还包括以下功能:</p> 
      <ul> 
       <li> 
        <ul> 
         <li>商店前端 
          <ul> 
           <li>初始化。 </li> 
           <li>使用从文件加载的宠物类别创建选项卡。 </li> 
           <li>默认情况下从Web服务加载Dog选项卡。 </li> 
           <li>通过缓存浏览Dog并对其进行排序。 </li> 
          </ul></li> 
         <li>宠物详细情况 
          <ul> 
           <li>使用跟踪聚合来自缓存和数据库的宠物详细情况。 </li> 
           <li>创建可视化历史记录。 </li> 
          </ul></li> 
         <li>购物车 
          <ul> 
           <li>使用跟踪添加到购物车。 </li> 
          </ul></li> 
         <li>登录 
          <ul> 
           <li>登录和身份验证。 </li> 
          </ul></li> 
         <li>退出 
          <ul> 
           <li>退出和授权。 </li> 
           <li>确认。 </li> 
          </ul></li> 
        </ul></li> 
      </ul> 
      <p><strong>结束语</strong></p> 
      <p>  最近有很多人都在研究Ajax。Ajax的优点已经在实践中得到了证明。定制Ajax的缺点在于它的复杂性和不兼容性。大量客户端JavaScript的出现意味着开发人员很可能陷入到浏览器实现差别的泥潭中去。另外,JavaScript这种语言不适用于复杂的应用程序。</p> 
      <p>  为了开发易于管理的、可伸缩的和适应未来变化的Ajax解决方案,开发人员所需使用的工具应该具有比定制部件开发更多的功能。Backbase Ajax软件提供了一个功能全面的客户端GUI管理引擎(Backbase Presentation Client)、一个灵活的服务器端XML管道(Backbase XML Server)和一种声明性的基于标签的UI语言,BXML(Backbase eXtensible Markup Language)。该方法具有几个优点。</p> 
      <p>  首先,Backbae易于使用。它的声明性语言水平地扩展了DHTML;它完全对开发人员隐藏了浏览器兼容性的问题;而且它带有一套开发和调试工具。</p> 
      <p>  其次,Backbase是一个功能全面的Ajax GUI管理系统。Backbase的先进性大大超过了其他Ajax框架,它完全把重点放在提供一个部件库或客户端-服务器通信(如DWR)上。在控件和客户端-服务器通信的基础上,Backbase提供了用于如下用途的标签:提供电影效果,随需应变的数据加载,数据绑定和客户端的数据转换,对于Back和Forward按钮的支持,完善的GUI状态管理,等等。所有这些功能对于目前的Ajax Web应用程序来说都是必需的。</p> 
      <p>  最后,Backbase是以兼容的方式提供所有客户端和服务器端的功能。用户可以使用富Ajax前端扩展现有的应用程序,同时无需修改后端。对于整个表示层来说,它的架构是时新的、模块化的,而且它基于XML。</p> 
      <p><strong>参考资料</strong></p> 
      <ul> 
       <li><font color="#002c99">Java Pet Store Demo</font>。 </li> 
       <li><font color="#002c99">Ajax: A New Approach to Web Applications</font>,作者Jesse James Garrett(Adaptive Path,2005年2月)。 </li> 
      </ul> 
      <p><strong>原文出处</strong></p> 
      <p>A Backbase Ajax Front-end for J2EE Applications</p> 
      <p><font color="#002c99">http://dev2dev.bea.com/pub/a/2005/08/backbase_ajax.html</font> </p> 
      <div class="dot001">  
      </div> 
      <table width="100%" border="0"> 
       <tbody> 
        <tr valign="bottom"> 
         <td colspan="2" height="20"> <span class="h2b">作者简介</span></td> 
        </tr> 
        <tr> 
         <td valign="top" align="center"></td> 
         <td><font color="#002c99">Mark Schiefelbein</font>自2005年2月以来一直担任Backbase的产品管理主管。Mark极大地推动了Backbase Rich Internet Application的全球推广。 </td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div>
                                </div>
                            </div>
                        </div>
                        <!--PC和WAP自适应版-->
                        <div id="SOHUCS" sid="1187955553436016640"></div>
                        <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                        <!-- 文章页-底部 动态广告位 -->
                        <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                    </div>
                    <div class="col-md-3">
                        <div class="row" id="ad">
                            <!-- 文章页-右侧1 动态广告位 -->
                            <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                                <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                            </div>
                            <!-- 文章页-右侧2 动态广告位 -->
                            <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                                <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                            </div>
                            <!-- 文章页-右侧3 动态广告位 -->
                            <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                                <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(AJAX)</h4>
            <div id="paradigm-article-related">
                <div class="recommend-post mb30">
                    <ul class="widget-links">
                        <li><a href="/article/1950104727928762368.htm"
                               title="震惊!DOM变化监控神器MutationObserver,前端开发必知的隐藏武器!" target="_blank">震惊!DOM变化监控神器MutationObserver,前端开发必知的隐藏武器!</a>
                            <span class="text-muted">coding随想</span>
    <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
                            <div>一、什么是MutationObserver?如果你是一个前端开发者,一定会遇到这样的场景:页面动态加载内容后,某些操作失效了。比如,你写了一个监听按钮点击的代码,但按钮是通过AJAX动态加载的,你的代码根本无法触发。这个时候,你就需要一个“监控哨兵”——MutationObserver,它能实时监听DOM树的变化,帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入</div>
                        </li>
                        <li><a href="/article/1949581680901681152.htm"
                               title="PHP+Ajax幸运大转盘抽奖源码" target="_blank">PHP+Ajax幸运大转盘抽奖源码</a>
                            <span class="text-muted">素材火_29a5</span>
    
                            <div>中国风水墨画背景PHP+Ajax幸运大转盘抽奖源码,通过奖品库存、中奖次数来计算中奖概率。恭喜你,中得五等奖,还要再来一次活动抽奖代码抽奖规则1、由于系统延迟如未获得抽奖机会请耐心等待2、中奖结果以系统弹出的对话框信息为准3、下单时间支付时间以京东充值系统时间为准4、活动当后一天建议23点30分前参与抽奖避免因充值成功而抽奖活动已结束无法参加活动。本文转自http://www.sucaihuo.c</div>
                        </li>
                        <li><a href="/article/1949308364903215104.htm"
                               title="前端Web基础( JS ,Ajax)" target="_blank">前端Web基础( JS ,Ajax)</a>
                            <span class="text-muted">我想找工作</span>
    <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                            <div>Javascript(核心语法)什么是JavascriptJavascript是一门跨平台,面向对象的脚本语言,用于控制网页行为,实现交互效果。组成:ECMAScript:固定了JS的基础语法核心知识,包括变量。数据类型,控制流程,函数,对象等。BOM:浏览器对象模型。用于操作浏览器本身,如页面弹窗,地址栏操作,关闭窗口。DOM:文档对象模型,用于操作HTM文档,如改变标签内容,改变标签内字体样式</div>
                        </li>
                        <li><a href="/article/1949059941402734592.htm"
                               title="ASP与Ajax结合实现无刷新登录系统" target="_blank">ASP与Ajax结合实现无刷新登录系统</a>
                            <span class="text-muted"></span>
    
                            <div>本文还有配套的精品资源,点击获取简介:ASP是一种服务器端脚本技术,用于创建动态网页和处理表单等,而Ajax则是一种在不刷新页面的情况下异步更新网页内容的技术。结合ASP和Ajax可以实现无刷新登录功能,提高用户登录的交互性和响应速度。本技术方案介绍了无刷新登录的设计思路和实现步骤,从前端设计到服务器端处理以及安全性增强措施,确保了登录过程的流畅性和安全性。1.ASP服务器端脚本技术ASP(Act</div>
                        </li>
                        <li><a href="/article/1949053138665271296.htm"
                               title="AJAX与ASP.NET Web方法的实践与原理" target="_blank">AJAX与ASP.NET Web方法的实践与原理</a>
                            <span class="text-muted">t0_54coder</span>
    <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%89%8B%E5%86%8C/1.htm">编程问题解决手册</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E5%BC%80%E5%8F%91/1.htm">个人开发</a>
                            <div>在现代Web开发中,AJAX(AsynchronousJavaScriptandXML)是提升用户体验的关键技术之一,尤其在需要与服务器交互而不刷新整个页面的情况下。今天,我们将探讨如何在ASP.NET中使用AJAX结合Web方法(WebMethod)来实现这一目的,并深入分析其中的原理。实例背景假设我们有一个简单的温度转换器,需要将华氏温度转换为摄氏温度,我们希望这个转换过程是即时的,不需要用户</div>
                        </li>
                        <li><a href="/article/1949044429654388736.htm"
                               title="AJAX 与 ASP 的深入探讨" target="_blank">AJAX 与 ASP 的深入探讨</a>
                            <span class="text-muted">froginwe11</span>
    <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                            <div>AJAX与ASP的深入探讨引言随着互联网技术的飞速发展,Web应用程序已经成为人们日常生活和工作中不可或缺的一部分。在众多技术中,AJAX(AsynchronousJavaScriptandXML)和ASP(ActiveServerPages)是两种非常流行的技术。本文将深入探讨AJAX和ASP的基本原理、应用场景以及它们之间的相互关系。AJAX基础什么是AJAX?AJAX是一种基于JavaScr</div>
                        </li>
                        <li><a href="/article/1948796966188150784.htm"
                               title="前端11Jquery用ajax获取数据赋值给页面" target="_blank">前端11Jquery用ajax获取数据赋值给页面</a>
                            <span class="text-muted">syw99163</span>
    <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF2021/1.htm">前端2021</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
                            <div>前端11Jquery用ajax获取数据赋值给页面https://www.w3school.com.cn/jquery/jquery_ref_dom_element_methods.aspjQuery参考手册-DOM元素方法【jQuery】使用getJSON()方法异步加载JSON格式数据使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面</div>
                        </li>
                        <li><a href="/article/1948783724355186688.htm"
                               title="JavaScript $.ajax() 最新用法详解" target="_blank">JavaScript $.ajax() 最新用法详解</a>
                            <span class="text-muted"></span>
    
                            <div>一、基础语法与核心参数$.ajax({url:"https://api.example.com/data",method:"GET",//推荐使用method替代typedata:{key:"value"},dataType:"json",headers:{"Authorization":"Bearertoken"},success:function(response){},error:funct</div>
                        </li>
                        <li><a href="/article/1948777296030658560.htm"
                               title="JavaScript AJAX 实现,演示如何将 Token 添加到 Authorization" target="_blank">JavaScript AJAX 实现,演示如何将 Token 添加到 Authorization</a>
                            <span class="text-muted">CATTLECODE</span>
    <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/okhttp/1.htm">okhttp</a>
                            <div>以下是一个完整的原生JavaScriptAJAX实现,演示如何将Token添加到Authorization头部的示例:基础实现html复制代码AJAXToken示例//获取当前用户的Token(实际应用中从安全存储获取)functiongetAuthToken(){//实际项目中应从localStorage/cookie获取return"eyJhbGciOiJIUzI1NiIsInR5cCI6Ik</div>
                        </li>
                        <li><a href="/article/1948677195811581952.htm"
                               title="Vue.js与Ajax实现数据动态交互及双向绑定项目指南" target="_blank">Vue.js与Ajax实现数据动态交互及双向绑定项目指南</a>
                            <span class="text-muted">溪水边小屋</span>
    
                            <div>本文还有配套的精品资源,点击获取简介:Vue.js结合Ajax技术可以创建动态交互的Web应用程序。本项目指南介绍了如何在Vue.js框架下使用Ajax下载和上传后台数据,并通过双向数据绑定实时更新页面内容。项目中演示了Vue组件数据绑定、axios的集成与使用,以及如何处理用户交互、服务器响应和文件操作。通过这一过程,用户能够构建一个高效、直观的用户体验良好的单页应用程序。1.Vue.js框架简</div>
                        </li>
                        <li><a href="/article/1948586436450119680.htm"
                               title="前端:一篇彻底搞懂Ajax,Promise,JQuery Ajax,Axios的差异(区别)" target="_blank">前端:一篇彻底搞懂Ajax,Promise,JQuery Ajax,Axios的差异(区别)</a>
                            <span class="text-muted">Freedom3568</span>
    <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%89%8D%E7%AB%AF/1.htm">大前端</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/axios/1.htm">axios</a><a class="tag" taget="_blank" href="/search/promise/1.htm">promise</a>
                            <div>文章目录一.AJAX原理1.ajax有那些优缺点?二.Promise封装Ajaxpromise封装实现三.JQueryAjax1.优缺点:四.Axios1.优缺点:五.Fetch1.优缺点:补充:为什么要用axios?一.AJAX原理Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎),通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javas</div>
                        </li>
                        <li><a href="/article/1948574461854806016.htm"
                               title="AJAX Promise axios基本概念和用法" target="_blank">AJAX Promise axios基本概念和用法</a>
                            <span class="text-muted">hsm666_</span>
    <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a>
                            <div>引言JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果JS执行</div>
                        </li>
                        <li><a href="/article/1948249328443256832.htm"
                               title="Ajax 使用案例" target="_blank">Ajax 使用案例</a>
                            <span class="text-muted">菜鸟小窝</span>
    <a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a>
                            <div>参数为form表单httpService.get=function(url,data,successFunc){data.page=null;return$.ajax({type:"GET",url:url,data:data,success:function(data){successFunc(data);$scope.$apply()},error:function(data){success</div>
                        </li>
                        <li><a href="/article/1947962829470494720.htm"
                               title="跨域请求传递Cookie问题" target="_blank">跨域请求传递Cookie问题</a>
                            <span class="text-muted">videring</span>
    
                            <div>参考:https://www.cnblogs.com/nuccch/p/7875189.html问题描述前后端完全分离的项目,前端使用Vue+axios,后端使用SpringMVC,容器为Tomcat。使用CORS协议解决跨域访问数据限制的问题,但是发现客户端的Ajax请求不会自动带上服务器返回的Cookie:JSESSIONID。导致每一个Ajax请求在服务端看来都是一个新的请求,都会在服务端创</div>
                        </li>
                        <li><a href="/article/1947883383166136320.htm"
                               title="python爬大学生就业信息报告_Python语言爬虫——Python 岗位分析报告" target="_blank">python爬大学生就业信息报告_Python语言爬虫——Python 岗位分析报告</a>
                            <span class="text-muted">weixin_39578457</span>
    
                            <div>本文主要向大家介绍了Python语言爬虫——Python岗位分析报告,通过具体的内容向大家展示,希望对大家学习Python语言有所帮助。前两篇我们分别爬取了糗事百科和妹子图网站,学习了Requests,BeautifulSoup的基本使用。不过前两篇都是从静态HTML页面中来筛选出我们需要的信息。这一篇我们来学习下如何来获取Ajax请求返回的结果。本篇以拉勾网为例来说明一下如何获取Ajax请求内容</div>
                        </li>
                        <li><a href="/article/1947827780305612800.htm"
                               title="Ajax与axios" target="_blank">Ajax与axios</a>
                            <span class="text-muted">wwwwdn</span>
    <a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/okhttp/1.htm">okhttp</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                            <div>本文是学习了网上的Ajax的课程总结,并加上了一些自己的总结。AjaxAjax(AsynchronousJavascriptAndXML),即是异步的JavaScript和XML,Ajax其实就是浏览器与服务器之间的一种异步通信方式。XMLHttpRequest(XHR)XMLHttpRequest(XHR)对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定UR</div>
                        </li>
                        <li><a href="/article/1947823746253385728.htm"
                               title="PHP与Web页面交互:从基础表单到AJAX实战" target="_blank">PHP与Web页面交互:从基础表单到AJAX实战</a>
                            <span class="text-muted">独立开发者阿乐</span>
    <a class="tag" taget="_blank" href="/search/%E7%BB%BC%E5%90%88%E6%80%A7%E5%8E%9F%E5%88%9B/1.htm">综合性原创</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E4%BA%A4%E4%BA%92/1.htm">交互</a><a class="tag" taget="_blank" href="/search/Web%E9%A1%B5%E9%9D%A2/1.htm">Web页面</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E5%8D%95%E5%A4%84%E7%90%86/1.htm">表单处理</a><a class="tag" taget="_blank" href="/search/AJAX%E6%8A%80%E6%9C%AF/1.htm">AJAX技术</a><a class="tag" taget="_blank" href="/search/AJAX/1.htm">AJAX</a>
                            <div>文章目录PHP与Web页面交互:从基础到高级实践1.引言2.基础表单处理2.1HTML表单与PHP交互基础2.2GET与POST方法比较3.高级交互技术3.1AJAX与PHP交互3.2使用FetchAPI进行现代AJAX交互4.文件上传处理5.安全性考量5.1常见安全威胁与防护5.2数据验证与过滤6.现代PHP与前端框架交互6.1构建RESTfulAPI6.2使用JWT进行认证7.性能优化7.1缓</div>
                        </li>
                        <li><a href="/article/1947797910787780608.htm"
                               title="网络爬虫进阶" target="_blank">网络爬虫进阶</a>
                            <span class="text-muted">rooney2024</span>
    <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a>
                            <div>目录一、进阶爬虫的核心挑战二、关键技术与最佳实践三、实战案例:爬取动态电商价格(伪代码示例)四、持续学习路径结语一、进阶爬虫的核心挑战动态渲染页面(JavaScript/AJAX)问题:数据由JavaScript动态加载生成,初始HTML中不存在。解决方案:浏览器自动化工具:Selenium,Playwright,Puppeteer。模拟真实浏览器行为,等待JS执行并渲染出完整DOM后再解析。无头</div>
                        </li>
                        <li><a href="/article/1947448081809207296.htm"
                               title="关于Ajax的学习笔记" target="_blank">关于Ajax的学习笔记</a>
                            <span class="text-muted">秋也凉</span>
    <a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
                            <div>Ajax概念:是一门使用了js语言,可以使用于Javaweb,实现前端代码和后端代码连结的的一种异步同步(不需要等待服务器相应,就能够发送第二次请求)的一种技术,它主要用于网页内容的局部刷新,列如验证码、导航栏的刷新等。实现步骤1.导入jQuery(一种框架,Ajax是JQuery的一种方法)文件——例如:写在jsp页面的标签里面。2.在jsp页面写一个函数,然后在函数里面调用ajax方法,aja</div>
                        </li>
                        <li><a href="/article/1947419963459432448.htm"
                               title="web的跨域问题--针对CSP的内容" target="_blank">web的跨域问题--针对CSP的内容</a>
                            <span class="text-muted">SunnyZHQing</span>
    <a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E9%97%AE%E9%A2%98/1.htm">系统问题</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/%E8%B7%A8%E5%9F%9F/1.htm">跨域</a>
                            <div>跨域的ajax问题是因为返回的response中缺少Header("Access-Control-Allow-Origin","*")Header("Access-Control-Allow-Methods","GET,POST")Header("Access-Control-Allow-Headers","x-requested-with,content-type")需要把这写代码写到1.php</div>
                        </li>
                        <li><a href="/article/1947113625495859200.htm"
                               title="Java实习模拟面试之创玖科技:前后端交互、数据库、Spring全家桶、性能优化与Linux实战" target="_blank">Java实习模拟面试之创玖科技:前后端交互、数据库、Spring全家桶、性能优化与Linux实战</a>
                            <span class="text-muted">培风图南以星河揽胜</span>
    <a class="tag" taget="_blank" href="/search/java%E9%9D%A2%E8%AF%95/1.htm">java面试</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E7%A7%91%E6%8A%80/1.htm">科技</a>
                            <div>关键词:JavaScript、JQuery、Ajax、Node.js、MySQL、Oracle、Spring、SpringMVC、SpringBoot、MyBatis、Tomcat、Redis、Nginx、Linux、Git、SAAS系统开发一、面试开场:自我介绍面试官提问:请做个自我介绍,重点突出你的技术栈和项目经验。候选人回答:您好,我是一名计算机科学与技术专业的应届生,具备扎实的Java基础</div>
                        </li>
                        <li><a href="/article/1946683706995437568.htm"
                               title="Typecho博客评论无限滚动加载实现指南" target="_blank">Typecho博客评论无限滚动加载实现指南</a>
                            <span class="text-muted">独立开发者阿乐</span>
    <a class="tag" taget="_blank" href="/search/Typecho%E5%8E%9F%E5%88%9B/1.htm">Typecho原创</a><a class="tag" taget="_blank" href="/search/okhttp/1.htm">okhttp</a><a class="tag" taget="_blank" href="/search/typecho/1.htm">typecho</a><a class="tag" taget="_blank" href="/search/%E8%AF%84%E8%AE%BA%E5%8A%9F%E8%83%BD/1.htm">评论功能</a><a class="tag" taget="_blank" href="/search/%E6%97%A0%E9%99%90%E6%BB%9A%E5%8A%A8/1.htm">无限滚动</a><a class="tag" taget="_blank" href="/search/AJAX/1.htm">AJAX</a><a class="tag" taget="_blank" href="/search/%E6%97%A0%E9%99%90%E5%8A%A0%E8%BD%BD/1.htm">无限加载</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                            <div>文章目录Typecho实现评论无限滚动加载的完整解决方案引言技术背景与原理方案设计系统架构技术选型实现步骤第一步:创建AJAX评论接口第二步:修改评论模板第三步:实现前端无限滚动性能优化与注意事项1.节流滚动事件2.缓存策略3.错误处理与重试机制兼容性与扩展性考虑1.兼容旧浏览器2.支持SEO3.可访问性改进部署与维护1.缓存策略2.性能监控3.更新策略结论Typecho实现评论无限滚动加载的完整</div>
                        </li>
                        <li><a href="/article/1946655080870637568.htm"
                               title="AJAX概述" target="_blank">AJAX概述</a>
                            <span class="text-muted">出门撞大运</span>
    <a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                            <div>在现代网页开发中,我们早已习惯了无需刷新页面就能获取新数据的流畅体验——浏览电商网站时的实时库存更新、社交平台的动态加载内容、表单提交后的即时验证反馈……这些都离不开一项核心技术——AJAX。今天,我们就来深入探索AJAX的奥秘,带你全面掌握这门改变网页交互方式的关键技术。一、什么是AJAX?AJAX,全称异步JavaScript和XML(AsynchronousJavaScriptandXML)</div>
                        </li>
                        <li><a href="/article/1946607398999355392.htm"
                               title="Promise与Axios:异步编程" target="_blank">Promise与Axios:异步编程</a>
                            <span class="text-muted">evergreen198</span>
    <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                            <div>一、解决回调嵌套/回调地狱(代码1-展示axios链式调用)1.1传统回调-回调地狱如果没有Promise,我们可能需要这样写:axios({url:'http://hmajax.itheima.net/api/province'}).then((provinceResult)=>{constpname=provinceResult.data.list[0];console.log('省份:',p</div>
                        </li>
                        <li><a href="/article/1946598069940318208.htm"
                               title="html js 查询数据库,如何使用javascript查询数据库?" target="_blank">html js 查询数据库,如何使用javascript查询数据库?</a>
                            <span class="text-muted"></span>
    
                            <div>小编典典Javascript本身不能用于处理数据库。这是使用php(或您选择的服务器端语言)完成的。Ajax用于使用javascript向您的php脚本发送请求,而javascript则会与数据库进行通信。而且不需要页面刷新。因此,您尝试使用ajax可以轻松实现。既然您提到了jquery,就可以在jquery中签出$.ajax或$.post方法,这使过程更加简单。您需要使用ajax处理表单。Aja</div>
                        </li>
                        <li><a href="/article/1946597943565938688.htm"
                               title="html 显示 数据库图片.js,html实时显示数据 怎么让数据库的数据在html显示出来" target="_blank">html 显示 数据库图片.js,html实时显示数据 怎么让数据库的数据在html显示出来</a>
                            <span class="text-muted">UnstructuredIO</span>
    <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E6%98%BE%E7%A4%BA/1.htm">显示</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E5%9B%BE%E7%89%87.js/1.htm">数据库图片.js</a>
                            <div>用JS实时调用数据显示在HTML页面上不要站在现在的高度,去判定未来的事情,因为未来的你是会成长的,会有新的选择和判断。html页面上怎么显示动态数据通过AJAX实现,在html页面用ajax请分享后台获取动态数据。获取range的值就行了,然后将其显示出来,你实时改变range的值,显示的就会实时改变0functionchange(){varvalue=document.getElementBy</div>
                        </li>
                        <li><a href="/article/1943992018892025856.htm"
                               title="JSON 与 AJAX" target="_blank">JSON 与 AJAX</a>
                            <span class="text-muted">Auscy</span>
    <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                            <div>一、JSON(JavaScriptObjectNotation)1.数据类型与语法细节支持的数据类型:基本类型:字符串(需用双引号)、数字、布尔值(true/false)、null。复杂类型:数组([])、对象({})。严格语法规范:键名必须用双引号包裹(如"name":"张三")。数组元素用逗号分隔,最后一个元素后不能有多余逗号。数字不能以0开头(如012会被解析为12),不支持八进制/十六进制</div>
                        </li>
                        <li><a href="/article/1943919153068961792.htm"
                               title="Ajax之核心语法详解" target="_blank">Ajax之核心语法详解</a>
                            <span class="text-muted">AA-代码批发V哥</span>
    <a class="tag" taget="_blank" href="/search/Ajax%2FAxios/1.htm">Ajax/Axios</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a>
                            <div>Ajax之核心语法详解一、Ajax的核心原理与优势1.1什么是Ajax?1.2Ajax的优势二、XMLHttpRequest:Ajax的核心对象2.1XHR的基本使用流程2.2核心属性与事件解析2.2.1`readyState`:请求状态2.2.2`status`:HTTP状态码2.2.3响应数据属性2.2.4常用事件三、HTTP请求方法与数据传递3.1GET请求:获取数据3.2POST请求:提交</div>
                        </li>
                        <li><a href="/article/1943844765225250816.htm"
                               title="前端面试题——5.AjAX的缺点?" target="_blank">前端面试题——5.AjAX的缺点?</a>
                            <span class="text-muted">浅端</span>
    <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a>
                            <div>①传统的web交互是:用户一个网页动作,就会发送一个http请求到服务器,服务器处理完该请求再返回一个完整的HTML页面,客户端再重新加载,这样极大地浪费了带宽。②AJAX的出现解决了这个问题,它只会向服务器请求用户所需要的数据,并在客户端采用JavaScript处理返回的数据,操作DOM更新页面。③AJXA优点:无刷新更新页面异步服务器通信前端后端负载均衡④AJAX缺点:干掉了Back和Hist</div>
                        </li>
                        <li><a href="/article/1943844765648875520.htm"
                               title="JavaScript知识归纳——面试题" target="_blank">JavaScript知识归纳——面试题</a>
                            <span class="text-muted">Dream_Lee_1997</span>
    <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/js%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">js面试题</a>
                            <div>JavaScript面试题总结JavaScript知识点1、JavaScript中settimeout与setinteval两个函数的区别?2、编写JavaScript脚本生成1-6之间的整数?3、在JavaScript脚本中,isNaN的作用是什么?4、JavaScript中获取某个元素有哪几种方式?5、Ajax的优缺点都有什么?6、简述一下Ajax的工作原理。7、JavaScript中的数据类</div>
                        </li>
                                    <li><a href="/article/58.htm"
                                           title="多线程编程之理财" target="_blank">多线程编程之理财</a>
                                        <span class="text-muted">周凡杨</span>
    <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E4%BA%A7%E8%80%85/1.htm">生产者</a><a class="tag" taget="_blank" href="/search/%E6%B6%88%E8%B4%B9%E8%80%85/1.htm">消费者</a><a class="tag" taget="_blank" href="/search/%E7%90%86%E8%B4%A2/1.htm">理财</a>
                                        <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 现实生活中,我们一边工作,一边消费,正常情况下会把多余的钱存起来,比如存到余额宝,还可以多挣点钱,现在就有这个情况:我每月可以发工资20000万元 (暂定每月的1号),每月消费5000(租房+生活费)元(暂定每月的1号),其中租金是大头占90%,交房租的方式可以选择(一月一交,两月一交、三月一交),理财:1万元存余额宝一天可以赚1元钱,</div>
                                    </li>
                                    <li><a href="/article/185.htm"
                                           title="[Zookeeper学习笔记之三]Zookeeper会话超时机制" target="_blank">[Zookeeper学习笔记之三]Zookeeper会话超时机制</a>
                                        <span class="text-muted">bit1129</span>
    <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a>
                                        <div>首先,会话超时是由Zookeeper服务端通知客户端会话已经超时,客户端不能自行决定会话已经超时,不过客户端可以通过调用Zookeeper.close()主动的发起会话结束请求,如下的代码输出内容 
    Created /zoo-739160015 
    CONNECTEDCONNECTED 
    .............CONNECTEDCONNECTED 
    CONNECTEDCLOSEDCLOSED 
    </div>
                                    </li>
                                    <li><a href="/article/312.htm"
                                           title="SecureCRT快捷键" target="_blank">SecureCRT快捷键</a>
                                        <span class="text-muted">daizj</span>
    <a class="tag" taget="_blank" href="/search/secureCRT/1.htm">secureCRT</a><a class="tag" taget="_blank" href="/search/%E5%BF%AB%E6%8D%B7%E9%94%AE/1.htm">快捷键</a>
                                        <div>ctrl + a : 移动光标到行首ctrl + e :移动光标到行尾crtl + b: 光标前移1个字符crtl +&nbsp;f: 光标后移1个字符crtl +&nbsp;h&nbsp;: 删除光标之前的一个字符ctrl + d :删除光标之后的一个字符crtl + k :删除光标到行尾所有字符crtl +&nbsp;u : 删除光标至行首所有字符crtl + w:&nbsp; 删除光标至行首</div>
                                    </li>
                                    <li><a href="/article/439.htm"
                                           title="Java 子类与父类这间的转换" target="_blank">Java 子类与父类这间的转换</a>
                                        <span class="text-muted">周凡杨</span>
    <a class="tag" taget="_blank" href="/search/java+%E7%88%B6%E7%B1%BB%E4%B8%8E%E5%AD%90%E7%B1%BB%E7%9A%84%E8%BD%AC%E6%8D%A2/1.htm">java 父类与子类的转换</a>
                                        <div>&nbsp; &nbsp; 最近同事调的一个服务报错,查看后是日期之间转换出的问题。代码里是把 java.sql.Date 类型的对象 强制转换为 java.sql.Timestamp 类型的对象。报java.lang.ClassCastException。 
    &nbsp; 
    &nbsp; &nbsp; 代码: 
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
                                    </li>
                                    <li><a href="/article/566.htm"
                                           title="可视化swing界面编辑" target="_blank">可视化swing界面编辑</a>
                                        <span class="text-muted">朱辉辉33</span>
    <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/swing/1.htm">swing</a>
                                        <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 今天发现了一个WindowBuilder插件,功能好强大,啊哈哈,从此告别手动编辑swing界面代码,直接像VB那样编辑界面,代码会自动生成。 
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 首先在Eclipse中点击help,选择Install New Software,然后在Work with中输入WindowBui</div>
                                    </li>
                                    <li><a href="/article/693.htm"
                                           title="web报表工具FineReport常用函数的用法总结(文本函数)" target="_blank">web报表工具FineReport常用函数的用法总结(文本函数)</a>
                                        <span class="text-muted">老A不折腾</span>
    <a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/web%E6%8A%A5%E8%A1%A8%E5%B7%A5%E5%85%B7/1.htm">web报表工具</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E8%BD%AF%E4%BB%B6/1.htm">报表软件</a><a class="tag" taget="_blank" href="/search/java%E6%8A%A5%E8%A1%A8/1.htm">java报表</a>
                                        <div>文本函数 
    CHAR 
    CHAR(number):根据指定数字返回对应的字符。CHAR函数可将计算机其他类型的数字代码转换为字符。 
    Number:用于指定字符的数字,介于1Number:用于指定字符的数字,介于165535之间(包括1和65535)。 
    示例: 
    CHAR(88)等于“X”。 
    CHAR(45)等于“-”。 
    &nbsp; 
    CODE 
    CODE(text):计算文本串中第一个字</div>
                                    </li>
                                    <li><a href="/article/820.htm"
                                           title="mysql安装出错" target="_blank">mysql安装出错</a>
                                        <span class="text-muted">林鹤霄</span>
    <a class="tag" taget="_blank" href="/search/mysql%E5%AE%89%E8%A3%85/1.htm">mysql安装</a>
                                        <div>[root@localhost ~]# rpm -ivh MySQL-server-5.5.24-1.linux2.6.x86_64.rpm&nbsp;Preparing...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #####################</div>
                                    </li>
                                    <li><a href="/article/947.htm"
                                           title="linux下编译libuv" target="_blank">linux下编译libuv</a>
                                        <span class="text-muted">aigo</span>
    <a class="tag" taget="_blank" href="/search/libuv/1.htm">libuv</a>
                                        <div>下载最新版本的libuv源码,解压后执行: 
    ./autogen.sh 
    &nbsp; 
    这时会提醒找不到automake命令,通过一下命令执行安装(redhat系用yum,Debian系用apt-get): 
    # yum -y install automake 
    # yum -y install libtool 
    &nbsp; 
    &nbsp; 
    如果提示错误:make: *** No targe</div>
                                    </li>
                                    <li><a href="/article/1074.htm"
                                           title="中国行政区数据及三级联动菜单" target="_blank">中国行政区数据及三级联动菜单</a>
                                        <span class="text-muted">alxw4616</span>
    
                                        <div>近期做项目需要三级联动菜单,上网查了半天竟然没有发现一个能直接用的! 
    呵呵,都要自己填数据....我了个去这东西麻烦就麻烦的数据上. 
    哎,自己没办法动手写吧. 
    现将这些数据共享出了,以方便大家.嗯,代码也可以直接使用 
    &nbsp; 文件说明 
     
     lib\area.sql -- 县及县以上行政区划分代码(截止2013年8月31日)来源:国家统计局 发布时间:2014-01-17 15:0</div>
                                    </li>
                                    <li><a href="/article/1201.htm"
                                           title="哈夫曼加密文件" target="_blank">哈夫曼加密文件</a>
                                        <span class="text-muted">百合不是茶</span>
    <a class="tag" taget="_blank" href="/search/%E5%93%88%E5%A4%AB%E6%9B%BC%E5%8E%8B%E7%BC%A9/1.htm">哈夫曼压缩</a><a class="tag" taget="_blank" href="/search/%E5%93%88%E5%A4%AB%E6%9B%BC%E5%8A%A0%E5%AF%86/1.htm">哈夫曼加密</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%A0%91/1.htm">二叉树</a>
                                        <div>&nbsp;在上一篇介绍过哈夫曼编码的基础知识,下面就直接介绍使用哈夫曼编码怎么来做文件加密或者压缩与解压的软件,对于新手来是有点难度的,主要还是要理清楚步骤; 
    &nbsp; 
    加密步骤: 
    &nbsp;1,统计文件中字节出现的次数,作为权值 
    &nbsp; 
    2,创建节点和哈夫曼树 
    &nbsp; 
    3,得到每个子节点01串 
    &nbsp; 
    4,使用哈夫曼编码表示每个字节 
    &nbsp; 
    </div>
                                    </li>
                                    <li><a href="/article/1328.htm"
                                           title="JDK1.5 Cyclicbarrier实例" target="_blank">JDK1.5 Cyclicbarrier实例</a>
                                        <span class="text-muted">bijian1013</span>
    <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a><a class="tag" taget="_blank" href="/search/Cyclicbarrier/1.htm">Cyclicbarrier</a>
                                        <div>CyclicBarrier类 
    一个同步辅助类,它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point)。在涉及一组固定大小的线程的程序中,这些线程必须不时地互相等待,此时 CyclicBarrier 很有用。因为该 barrier 在释放等待线程后可以重用,所以称它为循环的 barrier。 
    CyclicBarrier支持一个可选的 Runnable 命令,</div>
                                    </li>
                                    <li><a href="/article/1455.htm"
                                           title="九项重要的职业规划" target="_blank">九项重要的职业规划</a>
                                        <span class="text-muted">bijian1013</span>
    <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
                                        <div>一. 学习的步伐不停止&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 古人说,活到老,学到老。终身学习应该是您的座右铭。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 世界在不断变化,每个人都在寻找各自的事业途径。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 您只有保证了足够的技能储</div>
                                    </li>
                                    <li><a href="/article/1582.htm"
                                           title="【Java范型四】范型方法" target="_blank">【Java范型四】范型方法</a>
                                        <span class="text-muted">bit1129</span>
    <a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                        <div>范型参数不仅仅可以用于类型的声明上,例如 
    &nbsp; 
    package com.tom.lang.generics;
    
    import java.util.List;
    
    public class Generics&lt;T&gt; {
        private T value;
        public Generics(T  value) {
            this.value = </div>
                                    </li>
                                    <li><a href="/article/1709.htm"
                                           title="【Hadoop十三】HDFS Java API基本操作" target="_blank">【Hadoop十三】HDFS Java API基本操作</a>
                                        <span class="text-muted">bit1129</span>
    <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a>
                                        <div>&nbsp; 
    package com.examples.hadoop;
    
    import org.apache.hadoop.conf.Configuration;
    
    import org.apache.hadoop.fs.FSDataInputStream;
    import org.apache.hadoop.fs.FileStatus;
    import org.apache.hadoo</div>
                                    </li>
                                    <li><a href="/article/1836.htm"
                                           title="ua实现split字符串分隔" target="_blank">ua实现split字符串分隔</a>
                                        <span class="text-muted">ronin47</span>
    <a class="tag" taget="_blank" href="/search/lua+split/1.htm">lua split</a>
                                        <div>LUA并不象其它许多&quot;大而全&quot;的语言那样,包括很多功能,比如网络通讯、图形界面等。但是LUA可以很容易地被扩展:由宿主语言(通常是C或 C++)提供这些功能,LUA可以使用它们,就像是本来就内置的功能一样。LUA只包括一个精简的核心和最基本的库。这使得LUA体积小、启动速度快,从 而适合嵌入在别的程序里。因此在lua中并没有其他语言那样多的系统函数。习惯了其他语言的字符串分割函</div>
                                    </li>
                                    <li><a href="/article/1963.htm"
                                           title="java-从先序遍历和中序遍历重建二叉树" target="_blank">java-从先序遍历和中序遍历重建二叉树</a>
                                        <span class="text-muted">bylijinnan</span>
    <a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                        <div>
    
    public class BuildTreePreOrderInOrder {
    
    	/**
    	 * Build Binary Tree from PreOrder and InOrder
    	 *  _______7______
           /              \
        __10__          ___2
       /      \        /
       4</div>
                                    </li>
                                    <li><a href="/article/2090.htm"
                                           title="openfire开发指南《连接和登陆》" target="_blank">openfire开发指南《连接和登陆》</a>
                                        <span class="text-muted">开窍的石头</span>
    <a class="tag" taget="_blank" href="/search/openfire/1.htm">openfire</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/1.htm">开发指南</a><a class="tag" taget="_blank" href="/search/smack/1.htm">smack</a>
                                        <div>第一步 
    &nbsp;&nbsp;&nbsp; 官网下载smack.jar包 
    &nbsp;&nbsp;&nbsp; 下载地址:http://www.igniterealtime.org/downloads/index.jsp#smack 
    第二步 
    &nbsp;&nbsp;&nbsp; 把smack里边的jar导入你新建的java项目中 
     
    开始编写smack连接openfire代码 
     
    p</div>
                                    </li>
                                    <li><a href="/article/2217.htm"
                                           title="[移动通讯]手机后盖应该按需要能够随时开启" target="_blank">[移动通讯]手机后盖应该按需要能够随时开启</a>
                                        <span class="text-muted">comsci</span>
    <a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8/1.htm">移动</a>
                                        <div>&nbsp;&nbsp;&nbsp; 看到新的手机,很多由金属材质做的外壳,内存和闪存容量越来越大,CPU速度越来越快,对于这些改进,我们非常高兴,也非常欢迎 
     
    &nbsp;&nbsp;&nbsp;&nbsp; 但是,对于手机的新设计,有几点我们也要注意 
     
    &nbsp;&nbsp;&nbsp;&nbsp; 第一:手机的后盖应该能够被用户自行取下来,手机的电池的可更换性应该是必须保留的设计,</div>
                                    </li>
                                    <li><a href="/article/2344.htm"
                                           title="20款国外知名的php开源cms系统" target="_blank">20款国外知名的php开源cms系统</a>
                                        <span class="text-muted">cuiyadll</span>
    <a class="tag" taget="_blank" href="/search/cms/1.htm">cms</a>
                                        <div>内容管理系统,简称CMS,是一种简易的发布和管理新闻的程序。用户可以在后端管理系统中发布,编辑和删除文章,即使您不需要懂得HTML和其他脚本语言,这就是CMS的优点。 
    在这里我决定介绍20款目前国外市面上最流行的开源的PHP内容管理系统,以便没有PHP知识的读者也可以通过国外内容管理系统建立自己的网站。 
    1.&nbsp;Wordpress 
    WordPress的是一个功能强大且易于使用的内容管</div>
                                    </li>
                                    <li><a href="/article/2471.htm"
                                           title="Java生成全局唯一标识符" target="_blank">Java生成全局唯一标识符</a>
                                        <span class="text-muted">darrenzhu</span>
    <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/uuid/1.htm">uuid</a><a class="tag" taget="_blank" href="/search/unique/1.htm">unique</a><a class="tag" taget="_blank" href="/search/identifier/1.htm">identifier</a><a class="tag" taget="_blank" href="/search/id/1.htm">id</a>
                                        <div>How to generate a globally unique identifier in Java 
     
     
     
    http://stackoverflow.com/questions/21536572/generate-unique-id-in-java-to-label-groups-of-related-entries-in-a-log 
     
     
    http://stackoverflow</div>
                                    </li>
                                    <li><a href="/article/2598.htm"
                                           title="php安装模块检测是否已安装过, 使用的SQL语句" target="_blank">php安装模块检测是否已安装过, 使用的SQL语句</a>
                                        <span class="text-muted">dcj3sjt126com</span>
    <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a>
                                        <div>       
    SHOW [FULL] TABLES [FROM db_name] [LIKE 'pattern'] 
    SHOW TABLES列举了给定数据库中的非TEMPORARY表。您也可以使用mysqlshow db_name命令得到此清单。 
    本命令也列举数据库中的其它视图。支持FULL修改符,这样SHOW FULL TABLES就可以显示第二个输出列。对于一个表,第二列的值为BASE T</div>
                                    </li>
                                    <li><a href="/article/2725.htm"
                                           title="5天学会一种 web 开发框架" target="_blank">5天学会一种 web 开发框架</a>
                                        <span class="text-muted">dcj3sjt126com</span>
    <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/framework/1.htm">framework</a>
                                        <div>web framework层出不穷,特别是ruby/python,各有10+个,php/java也是一大堆 根据我自己的经验写了一个to do list,按照这个清单,一条一条的学习,事半功倍,很快就能掌握 一共25条,即便很磨蹭,2小时也能搞定一条,25*2=50。只需要50小时就能掌握任意一种web框架 
    各类web框架大同小异:现代web开发框架的6大元素,把握主线,就不会迷路 
    建议把本文</div>
                                    </li>
                                    <li><a href="/article/2852.htm"
                                           title="Gson使用三(Map集合的处理,一对多处理)" target="_blank">Gson使用三(Map集合的处理,一对多处理)</a>
                                        <span class="text-muted">eksliang</span>
    <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/gson/1.htm">gson</a><a class="tag" taget="_blank" href="/search/Gson+map/1.htm">Gson map</a><a class="tag" taget="_blank" href="/search/Gson+%E9%9B%86%E5%90%88%E5%A4%84%E7%90%86/1.htm">Gson 集合处理</a>
                                        <div>转载请出自出处:http://eksliang.iteye.com/blog/2175532 一、概述 
    &nbsp; &nbsp; &nbsp; &nbsp;Map保存的是键值对的形式,Json的格式也是键值对的,所以正常情况下,map跟json之间的转换应当是理所当然的事情。 二、Map参考实例 
    package com.ickes.json;
    
    import java.lang.refl</div>
                                    </li>
                                    <li><a href="/article/2979.htm"
                                           title="cordova实现“再点击一次退出”效果" target="_blank">cordova实现“再点击一次退出”效果</a>
                                        <span class="text-muted">gundumw100</span>
    <a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                        <div>基本的写法如下: 
     
    
    
    document.addEventListener(&quot;deviceready&quot;, onDeviceReady, false);
    			
    function onDeviceReady() {
    	//navigator.splashscreen.hide();
            document.addEventListener(&quot;b</div>
                                    </li>
                                    <li><a href="/article/3106.htm"
                                           title="openldap configuration leaning note" target="_blank">openldap configuration leaning note</a>
                                        <span class="text-muted">iwindyforest</span>
    <a class="tag" taget="_blank" href="/search/configuration/1.htm">configuration</a>
                                        <div>hostname // to display the computer name 
    hostname &lt;changed name&gt; // to change 
    go to: /etc/sysconfig/network, add/modify HOSTNAME=NEWNAME to change permenately 
    dont forget to change /etc/hosts</div>
                                    </li>
                                    <li><a href="/article/3233.htm"
                                           title="Nullability and Objective-C" target="_blank">Nullability and Objective-C</a>
                                        <span class="text-muted">啸笑天</span>
    <a class="tag" taget="_blank" href="/search/Objective-C/1.htm">Objective-C</a>
                                        <div>https://developer.apple.com/swift/blog/?id=25 
    &nbsp; 
    http://www.cocoachina.com/ios/20150601/11989.html 
    &nbsp; 
    http://blog.csdn.net/zhangao0086/article/details/44409913 
    &nbsp; 
    http://blog.sunnyxx</div>
                                    </li>
                                    <li><a href="/article/3360.htm"
                                           title="jsp中实现参数隐藏的两种方法" target="_blank">jsp中实现参数隐藏的两种方法</a>
                                        <span class="text-muted">macroli</span>
    <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a>
                                        <div>在一个JSP页面有一个链接,//确定是一个链接?点击弹出一个页面,需要传给这个页面一些参数。//正常的方法是设置弹出页面的src=&quot;***.do?p1=aaa&amp;p2=bbb&amp;p3=ccc&quot;//确定目标URL是Action来处理?但是这样会在页面上看到传过来的参数,可能会不安全。要求实现src=&quot;***.do&quot;,参数通过其他方法传!//////</div>
                                    </li>
                                    <li><a href="/article/3487.htm"
                                           title="Bootstrap A标签关闭modal并打开新的链接解决方案" target="_blank">Bootstrap A标签关闭modal并打开新的链接解决方案</a>
                                        <span class="text-muted">qiaolevip</span>
    <a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/%E7%BA%B5%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">纵观千象</a>
                                        <div>Bootstrap里面的js modal控件使用起来很方便,关闭也很简单。只需添加标签&nbsp;data-dismiss=&quot;modal&quot; 即可。 
    可是偏偏有时候需要a标签既要关闭modal,有要打开新的链接,尝试多种方法未果。只好使用原始js来控制。 
    &nbsp; 
    &lt;a href=&quot;#/group-buy&quot; class=&quot;btn bt</div>
                                    </li>
                                    <li><a href="/article/3614.htm"
                                           title="二维数组在Java和C中的区别" target="_blank">二维数组在Java和C中的区别</a>
                                        <span class="text-muted">流淚的芥末</span>
    <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a>
                                        <div>Java代码: 
    &nbsp; 
    public class test03 {
    	public static void main(String[] args) {
    		int[][] a = {{1},{2,3},{4,5,6}};
    		System.out.println(a[0][1]);
    	}
    } 
    &nbsp;运行结果: 
    Exception in thread &quot;mai</div>
                                    </li>
                                    <li><a href="/article/3741.htm"
                                           title="systemctl命令用法" target="_blank">systemctl命令用法</a>
                                        <span class="text-muted">wmlJava</span>
    <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/systemctl/1.htm">systemctl</a>
                                        <div>对比表,以 apache / httpd 为例   任务 旧指令 新指令   使某服务自动启动 chkconfig --level 3 httpd on systemctl enable httpd.service   使某服务不自动启动 chkconfig --level 3 httpd off systemctl disable httpd.service   检查服务状态 service h</div>
                                    </li>
                    </ul>
                </div>
            </div>
        </div>
    
    <div>
        <div class="container">
            <div class="indexes">
                <strong>按字母分类:</strong>
                <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                    href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                    href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                    href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                    href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                    href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                    href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                    href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                    href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
            </div>
        </div>
    </div>
    <footer id="footer" class="mb30 mt30">
        <div class="container">
            <div class="footBglm">
                <a target="_blank" href="/">首页</a> -
                <a target="_blank" href="/custom/about.htm">关于我们</a> -
                <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
                <a target="_blank" href="/sitemap.txt">Sitemap</a> -
                <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
            </div>
            <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
    <!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
            </div>
        </div>
    </footer>
    <!-- 代码高亮 -->
    <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
    <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
    <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
    <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
    <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>
    
    
    
    
    
    </body>
    
    </html>