XML & AJAX

写着写着,本文章就成了 XML 和 AJAX的混合体了,反正这都是必须要搞明白的。

主要参看W3school的简单教程:

XML 指可扩展标记语言

XML 被设计用来传输和存储数据。

学习的原因只要是在javascript中的部分的问题。我感兴趣的是出传输和存储数据这部分,正巧XML也是被用来干这个的,所以主要是在服务器和DOM这两个主要部分。

对于语言本身:

  1. 语法规则  http://www.w3school.com.cn/xml/xml_syntax.asp 
  2. css能够改变样式,最好使用XSLT(XSLT 是首选的 XML 样式表语言。XSLT (eXtensible Stylesheet Language Transformations) 远比 CSS 更加完善。)一般也不怎么用。
  3. XML JavaScript
  4. XML DOM
  5. XML其他小的点
  6. 对于创建的话,使用后端语言来创建文件并且写入 http://www.w3school.com.cn/php/php_file_create.asp
  7. 下面要说的才是重点。

什么是 XMLHttpRequest 对象?

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想,因为您能够:

  • 在不重新加载页面的情况下更新网页
  • 在页面已加载后从服务器请求数据
  • 在页面已加载后从服务器接收数据
  • 在后台向服务器发送数据

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。使用open来加载XML ,但是DOM点的问题。

XMLHttpRequest 可以取回所有类型的数据资源,并不局限于XML. 而且除了HTTP ,它还支持fileftp 协议.

而对于IE 5、IE6 :使用new ActiveXObject() ,

另外 对于load( ) 函数 ,chrome是不支持的

 AJAX:

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

关键的就是XMLHttpRequest对象,然后open() 、send()、 onreadystatechange

更多东西就得到实际的应用中了。

 

 

getAllResponseHeaders():

  1. Date: Wed, 09 Sep 2015 13:27:16 GMT
  2. Last-Modified:  Wed, 09 Sep 2015 12:58:58 GMT
  3.  X-Powered-By: Express
  4. ETag: "3937-1441803538025"
  5. Content-Type: application/xml
  6. Cache-Control: public, max-age=0
  7. Connection: keep-alive
  8. Accept-Ranges: bytes
  9. Content-Length: 3937

getResponseHeader()  单独的header消息 :

如:getResponseHeader('ETag')

 

一般不允许javascript对XML的写入操作。有人实现类SQL方法写入XML,但不太好。还是需要后端语言来做。 

 

XSL     XPATH   XSLT   涉及的技术点

 

跨浏览器解决方案:

  1. XML文件的加载与解析

这是一个简单的例子,也是对XML的技术应用。几乎包括了XML的所有的内容。

var xmlhttp;  
function loadXMLDoc(url)  
{
xmlhttp=null;  
if (window.XMLHttpRequest)  
{// code for IE7, Firefox, Opera, etc.
xmlhttp=new XMLHttpRequest();  //所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。  
}
else if (window.ActiveXObject)  
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
}
if (xmlhttp!=null)  
{
xmlhttp.onreadystatechange=state_Change; // 这个函数的 执行      onreadystatechange很重要  
xmlhttp.open("GET",url,true); //AJAX技术的简单应用,请求数据.由于浏览器都支持open方法。所以不用load() 来加载XML文件,主要问题也是chrome不支持load() .  
xmlhttp.send(null);  
}
else  
{
alert("Your browser does not support XMLHTTP.");  
}
}

 

//下面是对于加载XML文件后的一些简单的应用,与信息展示

 

function state_Change()  
{
if (xmlhttp.readyState==4)  
{// 4 = "loaded"
if (xmlhttp.status==200)  
{// 200 = "OK"
document.getElementById('A1').innerHTML=xmlhttp.status;  
document.getElementById('A2').innerHTML=xmlhttp.statusText;  
document.getElementById('A3').innerHTML=xmlhttp.responseText;  
//关于 XMLHttpRequest的所有消息。<span style="color: #00ffff;">1. status    2. response    3. responseXML</span>
console.log(xmlhttp.readyState);  
console.log(xmlhttp.responseType);  
console.log(xmlhttp.status);  
document.getElementById('A4').innerHTML=xmlhttp.getAllResponseHeaders();  
document.getElementById('A7').innerHTML=xmlhttp.getResponseHeader('ETag');  
console.log(xmlhttp.responseXML); // responseXML 返回DOM结构  
console.log(xmlhttp.responseXML.documentElement.getElementsByTagName("TITLE")[0].firstChild.nodeValue);  
var x = xmlhttp.responseXML.documentElement.getElementsByTagName("TITLE")[0].firstChild;  
x.nodeValue = "ssss";  
//var xx = xmlhttp.createElement("edition");
//x.appendChild(xx);
//console.log(x);
// 使用documentElement后,指向了 根元素 ,这是需要注意的!!经验证也可以不使用documentElement

//节点操作就遵循XML DOM规范

document.getElementById('A5').innerHTML=xmlhttp.responseXML.documentElement.getElementsByTagName("CD")[0].getElementsByTagName("TITLE")[0].firstChild.nodeValue;  
txt="&lt;table border='1'&gt;";  
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");  
for (i=0;i&lt;x.length;i++)  
{
txt=txt + "&lt;tr&gt;";  
xx=x[i].getElementsByTagName("TITLE");  
{
try  
{
txt=txt + "&lt;td&gt;" + xx[0].firstChild.nodeValue + "&lt;/td&gt;";  
}
catch (er)  
{
txt=txt + "&lt;td&gt; &lt;/td&gt;";  
}
}
xx=x[i].getElementsByTagName("ARTIST");  
{
try  
{
txt=txt + "&lt;td&gt;" + xx[0].firstChild.nodeValue + "&lt;/td&gt;";  
}
catch (er)  
{
txt=txt + "&lt;td&gt; &lt;/td&gt;";  
}
}
txt=txt + "&lt;/tr&gt;";  
}
txt=txt + "&lt;/table&gt;";  
document.getElementById('A6').innerHTML=txt;  
}
else  
{
alert("Problem retrieving XML data:" + xmlhttp.statusText);  
}
}
}
  1. XML字符串的解析
if (window.DOMParser)  
{
parser=new DOMParser();  
xmlDoc=parser.parseFromString(txt,"text/xml");  
}
else // Internet Explorer  
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");  
xmlDoc.async="false";  
xmlDoc.loadXML(txt);  
}

document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;  // <strong>解析器把 XML 转换为 XML DOM 对象 - 可通过 JavaScript 操作的对象。</strong>