【免费】"掌握AJAX实例操作与数据提取" 资源-CSDN下载

需积分: 0 171 浏览量 2015-07-16 14:11:01 上传评论收藏 2KB TXT 举报

### AJAX 实例与数据获取详解 #### 一、引言 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换来实现这一功能。本篇将详细介绍一个具体的 AJAX 实例，并对其中涉及的关键概念和技术细节进行深入解析。 #### 二、代码分析我们来看一下给定的 AJAX 示例代码： ```javascript $.ajax({ type: "post", url: "<c:url value='/isoEmDeptAssess/indexDeptRanking'/>", dataType: "json", error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); }, success: function (returnData) { appendDetailTableData(returnData); } }); function appendDetailTableData(returnData) { var years = returnData.allYears; var nodes = returnData.depts; var theadThs = ""; var tbodyTrs = ""; // ... 后续代码省略 } ``` ##### 2.1 AJAX 请求配置 **1\. `type` 属性** `type: "post"` 表示 AJAX 请求使用 HTTP 的 POST 方法发送数据。POST 方法用于向服务器发送数据，适用于创建或更新资源。 **2\. `url` 属性** `url: "<c:url value='/isoEmDeptAssess/indexDeptRanking'/>"` 指定了 AJAX 请求的目标 URL。这里使用了 `<c:url>` JSP 标签来设置请求路径。该标签的作用是构建一个完整的 URL，通常用于处理应用上下文路径等问题。 **3\. `dataType` 属性** `dataType: "json"` 表示期望服务器返回的数据类型为 JSON 格式。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。 **4\. `error` 回调函数** `error: function (XMLHttpRequest, textStatus, errorThrown)` 定义了一个错误回调函数，当 AJAX 请求失败时执行。参数 `XMLHttpRequest` 是 XMLHttpRequest 对象，`textStatus` 是错误文本状态，`errorThrown` 是抛出的错误。 **5\. `success` 回调函数** `success: function (returnData)` 定义了一个成功回调函数，当 AJAX 请求成功时执行。参数 `returnData` 是服务器返回的数据，在这个例子中应该是 JSON 格式的数据。 ##### 2.2 处理返回数据接下来是 `appendDetailTableData` 函数，该函数用于处理从服务器返回的数据： ```javascript function appendDetailTableData(returnData) { var years = returnData.allYears; // 获取所有年份 var nodes = returnData.depts; // 获取部门节点 var theadThs = ""; // 表头 var tbodyTrs = ""; // 表体 } ``` 在这个函数中，`returnData` 参数包含了服务器返回的数据。其中 `allYears` 和 `depts` 分别代表了所有年份和部门的信息。这些数据将会被进一步处理并显示在页面上。 #### 三、页面 HTML 结构除了 AJAX 部分，我们还需要关注页面的整体结构。下面是一个简单的 HTML 页面结构示例，用于展示 AJAX 的效果： ```html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Content-Type" content="text/html;charset=gbk"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } }; xmlhttp.open("GET", "test.txt", true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content via AJAX</button> </body> </html> ``` **1\. 页面头部** 页面头部包含了基本的元信息，如标题、编码方式等。此外，还定义了一个名为 `loadXMLDoc` 的 JavaScript 函数，用于发起 AJAX 请求。 **2\. 页面主体** 页面主体包含了一个 `div` 元素和一个按钮。`div` 元素用于显示 AJAX 请求的结果，而按钮则用于触发 `loadXMLDoc` 函数。 #### 四、总结本文详细介绍了 AJAX 实例的具体实现，包括 AJAX 请求的配置、服务器响应数据的处理以及页面结构的设计。通过这个例子，我们可以了解到 AJAX 技术的基本用法及其在实际项目中的应用场景。希望本文能帮助读者更好地理解和掌握 AJAX 技术。

资源推荐

资源详情

资源评论

$.ajax({
type:"post",
url: "<c:url value='/isoEmDeptAssess/indexDeptRanking'/>",
dataType:"json",
error:function(XMLHttpRequest, textStatus, errorThrown){
alert(textStatus);
},
success: function(returnData){
appendDetailTableData(returnData);
}
});

function appendDetailTableData(returnData){
var years = returnData.allYears;
var nodes = returnData.depts;
var theadThs="";
var tbodyTrs="";

***************************************

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论收藏

内容反馈