美文网首页无忧·日更
从屌丝到架构师的飞越(JavaScript篇)-JavaScri

从屌丝到架构师的飞越(JavaScript篇)-JavaScri

作者: 走着别浪 | 来源:发表于2019-10-09 00:51 被阅读0次

一、介绍

这节课呢,我们来了解的是Ajax解析XML,

AJAX 可用来与 XML 文件进行交互式通信。

二、知识点介绍

1、ajax XML实例

2、ajax服务器页面

三、上课对应视频的说明文档

1、AJAX XML 实例

下面的例子将演示网页如何使用 AJAX 来读取来自 XML 文件的信息:

实例解释 - loadXMLDoc() 函数

当用户点击上面的“获得 CD 信息”这个按钮,就会执行 loadXMLDoc() 函数。

loadXMLDoc() 函数创建 XMLHttpRequest 对象,添加当服务器响应就绪时执行的函数,并将请求发送到服务器。

当服务器响应就绪时,会构建一个 HTML 表格,从 XML 文件中提取节点(元素),最后使用已经填充了 XML 数据的 HTML 表格来更新 txtCDInfo 占位符:

function loadXMLDoc(url)

{

var xmlhttp;

var txt,xx,x,i;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";

x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");

for (i=0;i<x.length;i++)

{

txt=txt + "<tr>";

xx=x[i].getElementsByTagName("TITLE");

{

try

{

txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";

}

catch (er)

{

txt=txt + "<td> </td>";

}

}

xx=x[i].getElementsByTagName("ARTIST");

{

try

{

txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";

}

catch (er)

{

txt=txt + "<td> </td>";

}

}

txt=txt + "</tr>";

}

txt=txt + "</table>";

document.getElementById('txtCDInfo').innerHTML=txt;

}

}

xmlhttp.open("GET",url,true);

xmlhttp.send();

}

2、AJAX 服务器页面

上面这个例子中使用的服务器页面实际上是一个 XML 文件,名为 "cd_catalog.xml"。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

table,th,td {

border : 1px solid black;

border-collapse: collapse;

}

th,td {

padding: 5px;

}

</style>

</head>

<body>

<h1>XMLHttpRequest 对象</h1>

<button type="button" onclick="loadXMLDoc()">获取我收藏的 CD</button>

<br><br>

<table id="demo"></table>

<script>

function loadXMLDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

myFunction(this);

}

};

xhttp.open("GET", "cd_catalog.xml", true);

xhttp.send();

}

function myFunction(xml) {

var i;

var xmlDoc = xml.responseXML;

var table="<tr><th>Artist</th><th>Title</th></tr>";

var x = xmlDoc.getElementsByTagName("CD");

for (i = 0; i <x.length; i++) {

table += "<tr><td>" +

x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +

"</td><td>" +

x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +

"</td></tr>";

}

document.getElementById("demo").innerHTML = table;

}

</script>

</body>

</html>

相关文章

网友评论

    本文标题:从屌丝到架构师的飞越(JavaScript篇)-JavaScri

    本文链接:https://www.haomeiwen.com/subject/inxiuctx.html