简单Ajax例子
一、概述
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例子的更多相关文章
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- 用最简单的例子实现jQuery图片即时上传
[http://www.cnblogs.com/Zjmainstay/archive/2012/08/09/jQuery_upload_image.html] 最近看了一些jQuery即时上传的插件, ...
- 简单的例子了解自定义ViewGroup(一)
在Android中,控件可以分为ViewGroup控件与View控件.自定义View控件,我之前的文章已经说过.这次我们主要说一下自定义ViewGroup控件.ViewGroup是作为父控件可以包含多 ...
- CSharpGL(1)从最简单的例子开始使用CSharpGL
CSharpGL(1)从最简单的例子开始使用CSharpGL 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立的Demo ...
- 用一个简单的例子来理解python高阶函数
============================ 用一个简单的例子来理解python高阶函数 ============================ 最近在用mailx发送邮件, 写法大致如 ...
- Ajax例子,views返回,html接收数据
Ajax例子,views返回,html接收数据 views from django.shortcuts import render,HttpResponse,render_to_response im ...
- Spring-Context之一:一个简单的例子
很久之前就想系统的学习和掌握Spring框架,但是拖了很久都没有行动.现在趁着在外出差杂事不多,就花时间来由浅入深的研究下Spring框架.Spring框架这几年来已经发展成为一个巨无霸产品.从最初的 ...
- C#调用存储过程简单完整例子
CREATE PROC P_TEST@Name VARCHAR(20),@Rowcount INT OUTPUTASBEGIN SELECT * FROM T_Customer WHERE NAME= ...
- 关于apriori算法的一个简单的例子
apriori算法是关联规则挖掘中很基础也很经典的一个算法,我认为很多教程出现大堆的公式不是很适合一个初学者理解.因此,本文列举一个简单的例子来演示下apriori算法的整个步骤. 下面这个表格是代表 ...
随机推荐
- SDOI2016 round1滚粗记
Day -1 刚刚从HN集训回来,感觉整个人萌萌哒.考前不断立flag——这次我一定会滚粗的,然后设想着滚粗之后文化课先补什么,浑浑噩噩的过了一天,晚上看到CA爷(娘)发了关于cena爆栈的问题,这时 ...
- java使用ms-dos编译,运行程序
1.安装好JDK,并配置好环境变量. 2.编辑好源程序,如Test.java public class Test{ public static void main(String[] args){ Sy ...
- 30道小学生四则运算题C/C++编程
软件工程科课上,老师通过实例讲解什么是程序,程序和软件的区别,要求我们通过短时间写一道编程题, 题目就是编写30道小学生四则运算题.以下就是源代码: #include<iostream.h> ...
- 【Convert Sorted Array to Binary Search Tree】cpp
题目: Given an array where elements are sorted in ascending order, convert it to a height balanced BST ...
- How to Build FFmpeg for Android
http://www.roman10.net/how-to-build-ffmpeg-for-android/ ffmpeg is an open-source platform for record ...
- [转载]关于android SDK安装Failed to fetch URL http://dl-ssl.google.com/android/repository/addons_list-1.xml出错
原文地址为:http://blog.csdn.net/springsky_/article/details/7442388 因为入行移动测试,所以很多测试环境的搭建.从中遇到了和这个GG同样的问题.怕 ...
- Spring Mvc 输出Json(iwantmoon.com出品)
原文:http://iwantmoon.com/Post/f94e49caf9b6455db7158474bab4c4dd 因为工作需要,现在要去做开放平台,考虑了多种方案之后,基本确定 下来,Htt ...
- gvim config
配置文件在根目录下 _vimrc set nocompatible source $VIMRUNTIME/vimrc_example.vim source $VIMRUNTIME/mswin.vim ...
- 将通过find命令找到的文件拷贝到一个新的目录中
将通过find命令找到的文件拷贝到一个新的目录中 有这样的一个需求,需要将一部分符合条件的文件从一个目录拷贝到另一个目录中,我通过find命令从源目录查找到符合条件的文件然后使用cp命令拷贝到目标目录 ...
- 【Python】多线程编程
1.thread模块 2.threading模块 3.Queue模块与多线程互斥 简介: thread和threading模块允许创建和管理线程,thread模块提供了基本的线程和锁的支持,而thre ...