一、概述

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. Altera USB Blaster 仿真器（EPM240仿制版

    转载:http://tigerwang202.blogbus.com/logs/35981280.html 其他很好的资料:http://bbs.ednchina.com/BLOG_ARTICLE_1 ...

  2. 在windows下使用vs2013编译和调试mysql源代码

    1. 准备工作 1)OS:win10 + VS2013 2)mysql 源码(windows版):mysql-5.6.25.zip 3)perl tool:ActivePerl-5.16.3.1604 ...

  3. 刷机总结（阿里云os-->android4.2.2）注明：本文不是教程

    注明:本文不是教程 写这篇文章的目的:让准备刷机的人(无论你是小白还是老鸟,当然老鸟就不用看了)用最短的时间了解刷机过程 其实本来目的是准备将阿里云的2.3.7升级到3.0的,但是3.0没有针对基伍大 ...

  4. ubuntu(Eclipse+JDK) 自动安装脚本

    sudo rm -rf jdk1.8.0_40sudo rm -rf /usr/lib/jvm sudo tar -zxvf jdk-8u40-linux-i586.tar.gzsudo mkdir ...

  5. 解决a different object with the same identifier value was already associated with the session错误

    [转]解决a different object with the same identifier value was already associated with the session错误 这个错 ...

  6. JS 学习笔记--13---原型

    练习中使用的是IE11,如果有错误之处,还请各位朋友多多指教.本文关于原型难以描述,故多用代码展示 原型是JS中一个很重要的概念,也是JS中一个难点,语言上难以描述,原型对象的属性和方法叫做原型属性和 ...

  7. bzoj 3489: A simple rmq problem k-d树思想大暴力

    3489: A simple rmq problem Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 551  Solved: 170[Submit][ ...

  8. 【BZOJ】【2245】【SDOI2011】工作安排

    网络流/费用流 裸题吧……直接建模就好了……所谓的“分段函数”就是吓唬你的,其实就是对于每个人分开建几条流量不同.费用不同的弧而已. 对每种产品,连S->i ,(c[i],0):对每个工作人员 ...

  9. R 实例1

    //转载:http://www.r-china.net/forum.php?mod=viewthread&tid=881&extra=page%3D1//用R抓取人民日报网数据 lib ...

  10. [bzoj 2097]奶牛健美操

    题目描述 对于一棵n个点的树,删除k条边,使得所有联通块直径最大值最小 题解 首先二分联通块直径最大值的最小值. 那么这个能否达成的判定变成了一个类似树形dp的东西 对于一个子树,删除一条边可以删除整 ...