8.3.3 Ajax技术相关脚本文件

8.3.3  Ajax技术相关脚本文件

由于本系统适当使用了Ajax技术，以帮助实现浏览器客户端和服务器之间的交互，达到异步通信的目的，从而给用户更好的感受，为配合具体实现，涉及到了相关的JavaScript脚本文件，这些文件均统一放置在项目文件夹下的“images”文件夹中，然后在对应的JSP页面中，使用对应的链接语句将其引入。

下面对博客个人维护中心相关的脚本文件进行逐一介绍。

1．文章管理脚本文件（adminArticle.js）

该文件是在文章管理adminArticle.jsp页面中使用的脚本文件，主要用于处理装载文章、分类信息、删除文章信息等请求。具体代码及相关解释如下：

……
// 处理分类更改响应函数
function sortChangeResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
updateArticleList();
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 选择分类函数
function sortChange() {
var sortid = document.getElementById("sort").value;
var url = "action=show" + "&sortid="+ sortid;
createXMLHttpRequest();
XMLHttpReq.onreadystatechange = sortChangeResponse;
XMLHttpReq.open("POST", "adminArticle", true);
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XMLHttpReq.send(url);
}

    function updateArticleList() {
clearArticleList();
loadArticleList();  
}

    // 删除链接函数
function deleteArticle(id) {
var url = "adminArticle?action=delete" + "&articleid=" + id;
createXMLHttpRequest();
XMLHttpReq.onreadystatechange = DeleteStateChange;
XMLHttpReq.open("GET", url, true);
XMLHttpReq.send(null);
}
// 处理删除链接响应函数
function DeleteStateChange() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
deleteArticleList();
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}

    function deleteArticleList() {
deleteID = XMLHttpReq.responseXML.getElementsByTagName("id")[0].firstChild. nodeValue;
if (deleteID!=null){
var rowToDelete = document.getElementById(deleteID);
var articleList = document.getElementById("articleList");
articleList.removeChild(rowToDelete);
}
}

    // 页面装入请求函数
function loadRequest() {
var url = "adminArticle?action=load";
createXMLHttpRequest();
XMLHttpReq.onreadystatechange = loadResponse;
XMLHttpReq.open("GET", url, true);
XMLHttpReq.send(null);
}
// 页面装入处理函数
function loadResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
loadSortList();
loadArticleList();
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 装入分类列表函数
function loadSortList() {
var option = document.createElement("option");
option.appendChild(document.createTextNode("全部文章"));
option.setAttribute("value", "０");
sort.appendChild(option);
var xmlDoc =XMLHttpReq.responseXML;
var sorts = xmlDoc.getElementsByTagName("sort");
var currentSort = null;
for(var i = 0; i < sorts.length; i++) {
currentSort = sorts[i];
var id =currentSort.getElementsByTagName("id")[0].firstChild.nodeValue;
var name =currentSort.getElementsByTagName("name")[0].firstChild.nodeValue;

                option = document.createElement("option");
option.appendChild(document.createTextNode(name));
option.setAttribute("value", id);
sort.appendChild(option);
}
}
// 装入文章函数
function loadArticleList() {
var xmlDoc =XMLHttpReq.responseXML;
var articles = xmlDoc.getElementsByTagName("article");
var currentArticle = null;
for(var i = 0; i < articles.length; i++) {
currentArticle = articles[i];
var id =currentArticle.getElementsByTagName("id")[0].firstChild.nodeValue;
var name =currentArticle.getElementsByTagName("name")[0].firstChild.nodeValue;
var time =currentArticle.getElementsByTagName("time")[0].firstChild.nodeValue;
addOneArticle(id,name,time);
}
}
// 插入一行函数
function addOneArticle(id,name,time) {
var row = document.createElement("tr");
row.setAttribute("id", id);
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(name));
row.appendChild(cell);

          cell = document.createElement("td");
cell.appendChild(document.createTextNode(time));
row.appendChild(cell);

          var deleteButton = document.createElement("input");
deleteButton.setAttribute("type", "button");
deleteButton.setAttribute("value", "删除");
deleteButton.onclick = function () { deleteArticle(id); };
cell = document.createElement("td");
cell.appendChild(deleteButton);
row.appendChild(cell);

          document.getElementById("articleList").appendChild(row);
}

    function clearArticleList() {
var article = document.getElementById("articleList");
while(article.childNodes.length > 0) {
article.removeChild(article.childNodes[0]);
}
}

2．文章分类管理脚本文件（adminSort.js）

该文件是在文章分类管理adminSort.jsp页面中使用的脚本文件，主要用于处理装载文章分类信息、添加及删除文章信息等请求。具体代码及相关解释如下：

……
// 处理增加类别响应函数
function AddStateChange() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
AddSortList();
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 增加类别函数
function addSort() {
name = document.getElementById("name").value;
if(name == "" ) {
return;
}
var url = "action=add" + "&name="+ name;
createXMLHttpRequest();
XMLHttpReq.onreadystatechange = AddStateChange;
XMLHttpReq.open("POST", "adminSort", true);
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XMLHttpReq.send(url);
}

      function AddSortList() {
var AddID = XMLHttpReq.responseXML.getElementsByTagName("id")[0].firstChild.nodeValue;
if (AddID!=null){
addOneSort(AddID,name);
//清空输入框
document.getElementById("name").value = "";
}
}

    // 删除类别函数
function deleteSort(id) {
var url = "adminSort?action=delete" + "&id=" + id;
createXMLHttpRequest();
XMLHttpReq.onreadystatechange = DeleteStateChange;
XMLHttpReq.open("GET", url, true);
XMLHttpReq.send(null);
}
// 处理删除响应函数
function DeleteStateChange() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
deleteSortList();
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}

    function deleteSortList() {
deleteID = XMLHttpReq.responseXML.getElementsByTagName("id")[0].firstChild.nodeValue;
if (deleteID!=null){
var rowToDelete = document.getElementById(deleteID);
var sortList = document.getElementById("sortList");
sortList.removeChild(rowToDelete);
}
}

    // 页面装入请求函数
function loadRequest() {
var url = "adminSort?action=load";
createXMLHttpRequest();
XMLHttpReq.onreadystatechange = loadResponse;
XMLHttpReq.open("GET", url, true);
XMLHttpReq.send(null);
}
// 页面装入处理函数
function loadResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
loadSortList();
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 装入全部分类函数
function loadSortList() {
var xmlDoc =XMLHttpReq.responseXML;
 var sorts = xmlDoc.getElementsByTagName("sort");
 var currentSort = null;
 for(var i = 0; i < sorts.length; i++) {
currentSort = sorts[i];
var id =currentSort.getElementsByTagName("id")[0].firstChild.nodeValue;
var name =currentSort.getElementsByTagName("name")[0].firstChild.nodeValue;
addOneSort(id,name);    
}
}
// 插入一行函数
function addOneSort(id,name) {
var row = document.createElement("tr");
row.setAttribute("id", id);
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(name));
row.appendChild(cell);

                 var deleteButton = document.createElement("input");
deleteButton.setAttribute("type", "button");
deleteButton.setAttribute("value", "删除");
deleteButton.onclick = function () { deleteSort(id); };
cell = document.createElement("td");
cell.appendChild(deleteButton);
row.appendChild(cell);

                 document.getElementById("sortList").appendChild(row);
}

3．链接管理脚本文件（adminLink.js）

该文件是在链接管理adminLink.jsp页面中使用的脚本文件，主要用于处理装载链接信息、添加及删除链接信息等请求。具体代码及相关解释如下：

……
// 处理增加链接响应函数
function AddStateChange() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
AddLinkList();
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 增加链接函数
function addLink() {
var name = document.getElementById("name").value;
var url1 = document.getElementById("url").value;
if(name == "" ) {
return;
}
var url = "action=add" + "&name="+ name + "&url="+ url1;
createXMLHttpRequest();
XMLHttpReq.onreadystatechange = AddStateChange;
XMLHttpReq.open("POST", "adminLinks", true);
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   
XMLHttpReq.send(url);
}

    function AddLinkList() {
var xmlDoc =XMLHttpReq.responseXML;
var AddID = xmlDoc.getElementsByTagName("id")[0].firstChild.nodeValue;
var AddName = xmlDoc.getElementsByTagName("name")[0].firstChild.nodeValue;
var AddUrl = xmlDoc.getElementsByTagName("url")[0].firstChild.nodeValue;
if (AddID!=null){
addOneLink(AddID,AddName,AddUrl);
//清空输入框
document.getElementById("name").value = "";
document.getElementById("url").value = "";
}
}

     // 删除链接函数
function deleteLink(id) {
var url = "adminLinks?action=delete" + "&id=" + id;
createXMLHttpRequest();
XMLHttpReq.onreadystatechange = DeleteStateChange;
XMLHttpReq.open("GET", url, true);
XMLHttpReq.send(null);
}
// 处理删除链接响应函数
function DeleteStateChange() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
deleteLinkList();
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}

     function deleteLinkList() {
deleteID = XMLHttpReq.responseXML.getElementsByTagName("id")[0].firstChild. nodeValue;
if (deleteID!=null){
var rowToDelete = document.getElementById(deleteID);
var linkList = document.getElementById("linkList");
linkList.removeChild(rowToDelete);
}
}

    // 页面装入请求函数
function loadRequest() {
var url = "adminLinks?action=load";
createXMLHttpRequest();
XMLHttpReq.onreadystatechange = loadResponse;
XMLHttpReq.open("GET", url, true);
XMLHttpReq.send(null);
}
// 页面装入处理函数
function loadResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
loadLinkList();
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 装入全部链接函数
function loadLinkList() {
var xmlDoc =XMLHttpReq.responseXML;
var links = xmlDoc.getElementsByTagName("link");
var currentLink = null;
for(var i = 0; i < links.length; i++) {
currentLink = links[i];
var id =currentLink.getElementsByTagName("id")[0].firstChild.nodeValue;
var name =currentLink.getElementsByTagName("name")[0].firstChild.nodeValue;
var url =currentLink.getElementsByTagName("url")[0].firstChild.nodeValue;
addOneLink(id,name,url);    
}
}
// 插入一行函数
function addOneLink(id,name,url) {
var row = document.createElement("tr");
row.setAttribute("id", id);
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(name));
row.appendChild(cell);

                  cell = document.createElement("td");
cell.appendChild(document.createTextNode(url));
row.appendChild(cell);

                  var deleteButton = document.createElement("input");
deleteButton.setAttribute("type", "button");
deleteButton.setAttribute("value", "删除");
deleteButton.onclick = function () { deleteLink(id); };
cell = document.createElement("td");
cell.appendChild(deleteButton);
row.appendChild(cell);

                  document.getElementById("linkList").appendChild(row);
}