学习AJAX时,作了以下这个简单的AJAX例子,没用任何动态语言,完全HTML和JAVASCRIPT,至于服务器源也就小偷了一下www.cc168.com.cn(长城证券)的开放式基金每日净值查询页面。
用XMLHTTP对象获取到WEB页面HTTP内容后，采用Split的方式进行截取，取出自己需要的web部分，然后绑定到页面的div上。CSS样式表也就远程使用了cc168.com.cn的。
^_^，希望长城证券能够宽恕这种偷盗行为。程序员的事，能算“偷”吗？最多算个窃. :- )
原理很简单，但是感觉这种方式比较有用。如果自己网站想提供功能，又不想做数据web服务的话，不妨窃之。
<html>
<head>
<link href="http://www.cc168.com.cn/css/index.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://www.cc168.com.cn/css/framework.css" type="text/css"/>
<script language="javascript">
window.onload = function()
{
CreateDateSelect();
}
var xmlHttp = false;
var e;
//创建XMLHTTP对象
function getXMLHTTPObj()
{
var C = null;
try
{
C = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
C = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(sc)
{
C = null;
}
}
if( !C && typeof XMLHttpRequest != "undefined" )
{
C = new XMLHttpRequest();
}
return C;
}
//调用远程方法
function callServer(e)
{
try
{
if( xmlHttp && xmlHttp .readyState != 0 )
{
xmlHttp.abort();
}
xmlHttp = getXMLHTTPObj();
if( xmlHttp )
{
document.getElementById("outgroup").style.display = "none";
//获取查询日期
var dateSele = e.options[e.selectedIndex].value;
document.getElementById("date").innerHTML = dateSele + " 开放式基金净值";
//构造查询连接字符串
var url = "http://www.cc168.com.cn/service/FundNetValue.jsp?newEndDate=" + dateSele;
//打开连接
xmlHttp.open("GET", url, true);
//设置回调函数
xmlHttp.onreadystatechange = updatePage;
//发送请求
xmlHttp.send(null);
}
else
{
document.getElementById("flag").innerHTML = "XMLHTTP对象创建失败";
}
}
catch (e)
{
document.getElementById("flag").innerHTML = "查询错误:" + e;
}
}
//回调处理函数
function updatePage()
{
try {
if (xmlHttp.readyState == 1)
{
document.getElementById("flag").innerHTML = "正在加载连接对象......";
}
if (xmlHttp.readyState == 2)
{
document.getElementById("flag").innerHTML = "连接对象加载完毕。";
}
if (xmlHttp.readyState == 3)
{
document.getElementById("flag").innerHTML = "数据获取中......";
}
if (xmlHttp.readyState == 4)
{
var response = xmlHttp.responseText;
var OpenValue = response.split("<td class=\"info-head\" width=\"400\" valign=\"top\">")[1];
var OpenValue = OpenValue.split("</td></tr>")[0];
//alert(OpenValue);
document.getElementById("out").innerHTML = OpenValue;
var OpenValue1 = response.split("<td class=\"info-head\" width=\"400\" valign=\"top\">")[2];
var OpenValue1 = OpenValue1.split("</td></tr>")[0];
document.getElementById("out1").innerHTML = OpenValue1;
var OpenValue2 = response.split("<td class=\"info-head\" width=\"400\" valign=\"top\">")[3];
var OpenValue2 = OpenValue2.split("</td></tr>")[0];
document.getElementById("out2").innerHTML = OpenValue2;
var OpenValue3 = response.split("<td class=\"info-head\" width=\"400\" valign=\"top\">")[4];
var OpenValue3 = OpenValue3.split("</td></tr>")[0];
document.getElementById("out3").innerHTML = OpenValue3;
document.getElementById("flag").innerHTML = "查询结束";
document.getElementById("outgroup").style.display = "";
}
}
catch (e)
{
document.getElementById("flag").innerHTML = "回调处理错误:" + e;
}
}
//创建日期选择下拉框
function CreateDateSelect()
{
var html = [];
for(var iYear=2005; iYear<=2006; iYear ++)
{
for( var iMonth=1; iMonth<=12; iMonth ++ )
{
for( var iDay=1; iDay<=31; iDay ++ )
{
html[html.length] = "<option value=\"" + iYear + "\-" + iMonth + "\-" + iDay + "\">" + iYear + "年" + iMonth + "月" + iDay + "日" + "</option>";
}
}
}
document.getElementById("dateSele").innerHTML = "<select name=\"dateSele\" id=\"dateSele\" onchange=\"callServer(this);\">" + html.join("") + "</select>";
}
</script>
</head>
<body>
<form>
<div>请选择交易日期:</div>
<div>
<div id="dateSele" align=left>
</div>
<div id="flag" align=right></div>
</div>
<div id="date"></div>
<div id="outgroup" style="display:None">
<div id="out"></div>
<div id="out1"></div>
<div id="out2"></div>
<div id="out3"></div>
</div>
</form>
</body>
</html>
代码讲解：
1、代码主要分为JS处理和BODY两大部分（废话 ^_^）
2、BODY部分用了几个层：dataSele : 显示日期选择下拉框；flag : 状态标示；date: 显示选中的日期；outgroup：显示基金的净值结果组；out 到 out3 则是几种类型的开放式基金净值结果
3、JS部分：页面加载处理：页面初始化设置；创建XMLHTTP对象：按不同客户端浏览器创建不同的XMLHTTP连接对象；调用远程方法：构造连接字符串，发送请求；回调处理函数：判断连接对象的返回状态，进行状态显示，完全获取结果后，进行DOM方式的层赋值；创建日期选择下拉框：动态的创建日期选择下拉框，并为其加上选择事件。
分享到：
相关推荐
在这个"一个简单的Ajax例子"中，我们将深入探讨Ajax的核心概念、工作原理以及如何编写基本的Ajax代码。 1. **Ajax核心概念**： - **异步通信**：Ajax允许浏览器与服务器进行非阻塞通信，即用户在请求处理期间仍可...
这个"很简单的一个AJAX例子"的标题和描述表明，我们将会探讨一个基础的AJAX应用实例，它可能包含了一个简单的JavaScript代码示例，用于向服务器发送请求并接收响应，以实现页面的异步更新。 在Web开发中，AJAX的...
在压缩包中的"Ajax"文件，可能是包含了这个简单AJAX例子的源代码或者相关资源。查看这个文件可以提供更具体的实践细节，比如服务器端的响应格式、如何将数据插入到DOM中等。 总结起来，AJAX是Web开发中的重要技术，...
通过理解并实践这个简单的Ajax例子，你可以掌握创建XMLHttpRequest对象、发送HTTP请求以及处理响应的基本步骤。 首先，让我们了解一下XMLHttpRequest对象。它是Ajax的核心，允许JavaScript与服务器进行异步数据交换...
总的来说，这个简单的Ajax例子展示了如何通过JavaScript与服务器进行异步通信，以及如何将返回的数据动态地更新到页面上。对于初学者来说，理解这个基本流程是学习Ajax的关键。随着深入学习，你还可以了解更多的高级...
这个“简单ajax登录例子”是一个非常适合初学者理解Ajax基本原理和使用方法的教程。在这里，我们将深入探讨Ajax如何与Servlet结合，实现用户无刷新登录验证。 1. **Ajax简介** Ajax的核心是JavaScript异步通信，它...
3. **反馈结果**：收到服务器响应后，根据返回的数据（例如，一个布尔值表示用户名是否可用），在页面上显示相应的提示信息。 **四、实现细节** 1. **创建XMLHttpRequest实例**：`var xhr = new XMLHttpRequest();`...
在"ajax的一个简单例子"中，我们通常会看到以下几个关键组成部分： 1. **创建XMLHttpRequest对象**：这是Ajax的核心，几乎所有的浏览器都内置了这个对象，用于与服务器进行异步通信。例如： ```javascript var ...
msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子
本篇将通过一个简单的AJAX例子来阐述其基本原理和使用方法，以及与Servlet的结合。 首先，我们来看AJAX的核心组成部分： 1. **XMLHttpRequest对象**：这是AJAX的基础，它是浏览器提供的JavaScript对象，用于在后台...
在"自己写的最简单Ajax例子"中，我们可以看到两个简单的实例，适合初学者入门学习。 首先，我们来详细讲解一下Ajax的核心概念： 1. 异步通信：Ajax的核心特性就是异步，这意味着在发送请求后，浏览器不会等待...
本教程将通过一个最简单的Ajax例子，让你深入理解其工作原理和优势。 ### 1. Ajax基本概念 - **异步通信**：Ajax的核心是浏览器内置的`XMLHttpRequest`对象，它允许JavaScript向服务器发送异步HTTP请求，即在不...
在"一个简单的Ajax实例"中，我们将探讨如何创建一个基本的Ajax请求，以理解其工作原理。Ajax的核心是XMLHttpRequest对象，它允许JavaScript在后台与服务器进行通信。以下是一个简单的Ajax请求示例： ```javascript ...
在本示例中，我们使用的是一种JavaScript库——Prototype，它为JavaScript提供了许多实用的工具和功能，包括对Ajax的优雅封装。Prototype简化了Ajax操作，使得开发者可以更方便地与服务器进行异步数据交互。 ...
以下是一个简单的Ajax GET请求的例子： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'AjaxxmlPage', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status ...
在这个“一个简单的xmlHttpRequest AJAX的例子”中，我们将探讨如何使用XMLHttpRequest对象来实现基本的AJAX请求。 首先，我们需要创建一个新的XMLHttpRequest实例。在JavaScript中，这是通过`new XMLHttpRequest()...
在开发过程中，我们需要注意跨域问题，如果Ajax请求的目标URL与当前页面不在同一个源下，可能会触发浏览器的安全限制。这时，服务器端需要设置CORS策略，允许来自不同源的请求。 此外，对于SEO（搜索引擎优化）和无...
这个简单的Ajax例子展示了如何获取服务器上的文本文件（如'ajax_example.txt'）并将其内容显示在网页上。实际上，Ajax可以处理更复杂的任务，比如发送表单数据、获取JSON数据、实现分页加载等。在实际应用中，我们...
在这个简单的Ajax例子中，我们将探讨如何整合Struts2和jQuery来实现页面无刷新的数据更新。 首先，我们需要在项目中引入Struts2和jQuery的相关依赖。Struts2通常通过Maven或Gradle添加依赖库，包括核心库、struts2-...