一、概述

1.程序执行流程：

(1)点击id="testBtn"的按钮，触发validate();

(2)validate()中有调用request.open方法与server交互(在url指定的jsp页面中，调用writer编写了xml文件并以responseXML返回给request);

(3)交互状态有变时会调用callback函数，callback判定状态，若交互成功则读取responseXML中的值;

(4)根据读取到的responseXML中的值动态生成innerHTML返回给页面。

二、代码

1.index.html

 <html>

 <head>

     <script>

         function validate(){

             var idField = document.getElementById("testBtn");

             var url = "validate.jsp?id="+escape(idField);

             req = new XMLHttpRequest();

             req.open("GET", url, true);

             req.onreadystatechange = callback;

             req.send(null);

         }

         function callback(){

             if(req.readyState == 4){

                 //alert(req.status);

                 //alert(req.responseXML);

                 //alert( msg);

                 if(req.status == 200){

                     var msg = req.responseXML.getElementsByTagName("msg")[0];

                     setMsg(msg.childNodes[0].nodeValue);

                 }

             }

         }

         function setMsg(msg){

             var mdiv = document.getElementById("ajaxMsg");

             if(msg == "abc"){

                 mdiv.innerHTML = "<div>America Born Chinese</div>";

             }else if(msg == "123"){

                 mdiv.innerHTML = "<div>阿拉伯数字</div>";

             }

         }

     </script>

 </head>

 <body>

     <input type="submit" id="testBtn" onclick="validate()" value="mybutton"/>

     <span id="ajaxMsg"></span>

 </body>

 </html>

2.validate.jsp

 <%

 response.setContentType("text/xml");

 response.setHeader("Cache Control", "no store");

 response.setHeader("Pragam","no-cache");

 response.setDateHeader("Expires", 0);

 response.getWriter().write("<msg>abc</msg>");

 %>

三、运行结果

简单Ajax例子的更多相关文章

  1. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  2. 用最简单的例子实现jQuery图片即时上传

    [http://www.cnblogs.com/Zjmainstay/archive/2012/08/09/jQuery_upload_image.html] 最近看了一些jQuery即时上传的插件, ...

  3. 简单的例子了解自定义ViewGroup(一)

    在Android中,控件可以分为ViewGroup控件与View控件.自定义View控件,我之前的文章已经说过.这次我们主要说一下自定义ViewGroup控件.ViewGroup是作为父控件可以包含多 ...

  4. CSharpGL(1)从最简单的例子开始使用CSharpGL

    CSharpGL(1)从最简单的例子开始使用CSharpGL 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立的Demo ...

  5. 用一个简单的例子来理解python高阶函数

    ============================ 用一个简单的例子来理解python高阶函数 ============================ 最近在用mailx发送邮件, 写法大致如 ...

  6. Ajax例子，views返回，html接收数据

    Ajax例子,views返回,html接收数据 views from django.shortcuts import render,HttpResponse,render_to_response im ...

  7. Spring-Context之一:一个简单的例子

    很久之前就想系统的学习和掌握Spring框架,但是拖了很久都没有行动.现在趁着在外出差杂事不多,就花时间来由浅入深的研究下Spring框架.Spring框架这几年来已经发展成为一个巨无霸产品.从最初的 ...

  8. C#调用存储过程简单完整例子

    CREATE PROC P_TEST@Name VARCHAR(20),@Rowcount INT OUTPUTASBEGIN SELECT * FROM T_Customer WHERE NAME= ...

  9. 关于apriori算法的一个简单的例子

    apriori算法是关联规则挖掘中很基础也很经典的一个算法,我认为很多教程出现大堆的公式不是很适合一个初学者理解.因此,本文列举一个简单的例子来演示下apriori算法的整个步骤. 下面这个表格是代表 ...

随机推荐

  1. document.addEventListener理解

    document.addEventListener("事件名称", 函数, false); function 某函数(event){ // 方法执行 } addEventListe ...

  2. Powershell下设置环境变量

    NODE中经常会用到process.env.NODE_ENV来判断当前环境,因为使用的系统是windows,在sublime text下安装terminal插件后,默认启动的时Powershell, ...

  3. HTML浅学入门---基础知识 （1）<基本规则>

    HTML: 结构化文档,超文本标记语言 (一)四条基本规则 1.每个开始标记必须和结束标记配套使用.// <tag>    </tag> 2.文档中必须包含唯一的打开和关闭标记 ...

  4. “来用”alpha版使用说明书

    1引言 1 .1编写目的 针对我们发布的alpha版本做出安装和使用说明,使参与内测的人员及用户了解软件的使用方法和相关内容. 1 .2参考资料 <c#程序设计基础>,赵敏主编,2011, ...

  5. 随机的30道四则运算题（简单的c）

    #include <stdio.h>#include <stdlib.h>#include <time.h> int main(void){ int i = 0; ...

  6. MyEclipse: Can't load IA 32-bit .dll on a AMD 64-bit platform

    java.lang.UnsatisfiedLinkError: D:\Tomcat7\apache-tomcat-7.0.59\bin\tcnative-1.dll: Can't load IA 32 ...

  7. NPC AI驱动最基本过程

    NPC AI驱动最基本过程 NPCmgr中比较重要的是加载NPC和一个NPCAI的一个指针 他利用map那个线程的定时到底做了啥呢 void NPCmgr::npcAITimer() { time_t ...

  8. Understanding Convolution in Deep Learning

    Understanding Convolution in Deep Learning Convolution is probably the most important concept in dee ...

  9. 查看Linux下*.a库文件中文件、函数、变量等情况

    在Linux 下经常需要链接一些 *.a的库文件,那怎么查看这些*.a 中包 含哪些文件.函数.变量: 1. 查看文件:ar -t *.a 2. 查看函数.变里:nm *.a

  10. .NET设计模式（15）：结构型模式专题总结（转）

    摘要:结构型模式,顾名思义讨论的是类和对象的结构,它采用继承机制来组合接口或实现(类结构型模式),或者通过组合一些对象,从而实现新的功能(对象结构型模式).这些结构型模式,它们在某些方面具有很大的相似 ...