[转载]Ajax教程
[ 2005-11-26 00:40:14 | 作者: sonic ]
最近在看有关ajax的东西，但现在网络上的中文教程资料很少，就翻译了一篇国外的教程。
原文地址：http://www.webreference.com/programming/javascript/jf/column12/index.html
正文：
过去，我们如果想在网络程序中调用数据时，必须刷新页面或者跳转到其他页面。当然，其他方法也是可行的，但是支持的并不好，而且bug多多。最近，一项新的技术为广大的开发者提供了更为自由的开发无缝应用程序的解决方案。这种方法大家叫做Ajax(Asynchronous Javascript and XML applications)，正如名字一样，它通过javascript异步接收XML数据。在这篇文章里，我将阐述如何用Ajax连接远程XML文件更新页面。后续的内容中，我们将讨论能让你网站提高的更多的Ajax方法。
第一步，创建一个包含数据的XML文件。命名为data.xml。(省去废话一大堆)
注意我们现在连接data.xml并没有使用javascript,要使用javascript，执行ajaxRead函数，连接是隐藏的，并且此连接并没有重定向到data.xml文件。函数ajaxRead还没有定义，所以当你测试时，会得到一个JS错误。现在我们开始定义函数，添加下面的代码到你的<head>标签内：
解释下，函数ajaxRead将在点击View XML data连接的时候执行，在函数里，我们定义了一个xmlObj的变量，它就负责客户端和服务器端中转。我们定义一个if/else循环块：
这只是测试不同对象的可用性——不同的浏览器执行XMLHttpRequest对象的时候不同，所以我们定义“xmlObj”作为XMLHttpRequest对象的时候，我们必须区别对待。如果没有XMLHttpRequest可用，函数以return结束来取消错误报告。大部分时候，XMLHttpRequest都是可用的，不过排除一些太老的浏览器。
下面的部分：
我们web页的“P”标签有一个属性“ID”，值是xmlData，它就是我们要更新的段落。更新的内容来自XML文件，下面介绍它如何工作：
The xmlObj.responseXML property is a DOM object – it’s a lot like the “document” object, except it’s for the remote XML file. In other words, xmlObj.responseXML is the “document” object if you ran a script in data.xml. Since we know this, we can retrieve any XML node via the “getElementsByTagName” method. The data is contained in the XML node is accurately named “<data>” so our task is simple: retrieve the first (and only) data node. Thus, xmlObject.responseXML.getElementsByTagName(“data”)[0] returns the first <data> node in the XML file.
它返回XML节点，无数据的——数据必须通过访问此节点的属性，这是下一步的工作。
After that, it’s as simple as retrieving the data by specifying “firstChild.data” (firstChild refers to the text node which is contained within the <data> node, and the “data” property is the actual text of that text node).
xmlObj.open ('GET', file, true);
xmlObj.send ('');
This is the last bit in our ajaxRead function. What does it say? Well, the “open” method of the xmlObj opens a connection to the server (via a specific protocol, specified here as “GET” – you can use “POST” and others as well), requests a file (in our case, the variable “file” that was sent as a parameter to the ajaxRead function – data.xml), and whether JavaScript should handle the request synchronously (false) or asynchronously (true, the default). Since this is asynchronous Javascript and XML, we will be using the default asynchronous method – using since synchronous won’t work in this case.
The last line of our function simply sends an empty string literal back to the server. Without this line, the ready state of xmlObj will never get to 4, so your page will never update. The send method can be used for other things, but today we are only retrieving data from the server – not sending to it – so I won’t go into any more detail about the send method in this article.
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}
Now to explain the updateObj function a little more: this function updates any specific element on the current web page with a new value. Its first parameter, “obj,” is simply a specific ID of an element on the current web page – this is the object that will be updated; its second parameter, “data,” is a string that specifies the new value to be placed in the object that is to be updated (“obj”). Normally, it would be advisable to check and be sure that an element on the current page has the ID specified in “obj,” but that check isn’t necessary due to the level of isolation of our script. The way this function updates is similar to the way we retrieved data from the “data” node in the XML file earlier – it locates the element it wants to update (this time by that element’s ID instead of its tag name and index on the page) and sets the data of the first child (the text node) of that element to the new data. If you wanted to update an object with HTML instead of just plain text, you could also use document.getElementById(obj).innerHTML = data.
That’s all there is to it
概念简单，代码也不难。从此你可以无刷新的提交表单数据以及使用服务器端语言动态生成XML文件，更多内容查阅参考 ——啊，对了，Google也是你的好助手。在另外一篇文章里，我将介绍使用ajax的服务器端技术创建更强有力的应用程序。
关于作者：[感谢作者的努力，给我们带来这么好的教程]
Jonathan Fenocchi 网络开发者，最初从事web设计，前台脚本技术以及PHP开发(忽然感觉和我好象啊，哈哈
这是他的网站：http://www.slightlyremarkable.com
永久地址: http://www.burgeoncn.com/sonic/weblog/feed.asp?q=comment&id=2
引用地址: http://www.burgeoncn.com/sonic/weblog/trackback.asp?id=2
原文地址：http://www.webreference.com/programming/javascript/jf/column12/index.html
正文：
过去，我们如果想在网络程序中调用数据时，必须刷新页面或者跳转到其他页面。当然，其他方法也是可行的，但是支持的并不好，而且bug多多。最近，一项新的技术为广大的开发者提供了更为自由的开发无缝应用程序的解决方案。这种方法大家叫做Ajax(Asynchronous Javascript and XML applications)，正如名字一样，它通过javascript异步接收XML数据。在这篇文章里，我将阐述如何用Ajax连接远程XML文件更新页面。后续的内容中，我们将讨论能让你网站提高的更多的Ajax方法。
第一步，创建一个包含数据的XML文件。命名为data.xml。(省去废话一大堆)
<?xml version="1.0" encoding="UTF-8"?>
<root>
<data>
This is some sample data. It is stored in an XML file and retrieved by JavaScript.
</data>
</root>
现在，创建一个包含实例数据的简单web页，命名为ajax.html。
<root>
<data>
This is some sample data. It is stored in an XML file and retrieved by JavaScript.
</data>
</root>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Developing Web Applications with Ajax - Example</title>
</head>
<body>
<h1>Developing Web Applications with Ajax</h1>
<p>This page demonstrates the use of Asynchronous Javascript and XML (Ajax) technology to
update a web page's content by reading from a remote file dynamically -- no page reloading
is required. Note that this operation does not work for users without JavaScript enabled.</p>
<p id="xmlObj">
This is some sample data. It is the default data for this web page. <a href="data.xml"
title="View the XML data." onclick="ajaxRead('data.xml'); this.style.display='none'; return false">View XML data.</a>
</p>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Developing Web Applications with Ajax - Example</title>
</head>
<body>
<h1>Developing Web Applications with Ajax</h1>
<p>This page demonstrates the use of Asynchronous Javascript and XML (Ajax) technology to
update a web page's content by reading from a remote file dynamically -- no page reloading
is required. Note that this operation does not work for users without JavaScript enabled.</p>
<p id="xmlObj">
This is some sample data. It is the default data for this web page. <a href="data.xml"
title="View the XML data." onclick="ajaxRead('data.xml'); this.style.display='none'; return false">View XML data.</a>
</p>
</body>
</html>
注意我们现在连接data.xml并没有使用javascript,要使用javascript，执行ajaxRead函数，连接是隐藏的，并且此连接并没有重定向到data.xml文件。函数ajaxRead还没有定义，所以当你测试时，会得到一个JS错误。现在我们开始定义函数，添加下面的代码到你的<head>标签内：
<script type="text/javascript"><!--
function ajaxRead(file){
var xmlObj = null;
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}
//--></script>
function ajaxRead(file){
var xmlObj = null;
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}
//--></script>
解释下，函数ajaxRead将在点击View XML data连接的时候执行，在函数里，我们定义了一个xmlObj的变量，它就负责客户端和服务器端中转。我们定义一个if/else循环块：
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
这只是测试不同对象的可用性——不同的浏览器执行XMLHttpRequest对象的时候不同，所以我们定义“xmlObj”作为XMLHttpRequest对象的时候，我们必须区别对待。如果没有XMLHttpRequest可用，函数以return结束来取消错误报告。大部分时候，XMLHttpRequest都是可用的，不过排除一些太老的浏览器。
下面的部分：
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
每当XMLHttpRequest状态改变时，onreadystatechange事件就触发，此事件共有5个状态，从0到4。
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
- [0]uninitialized未初始化(在XMLHttpRequest开始前)
[1]loading(一旦初始化)
[2]loaded(一旦XMLHttpRequest从服务器端获得响应)
[3]interactive(当对象连接到服务器)
[4]complete(完成)
我们web页的“P”标签有一个属性“ID”，值是xmlData，它就是我们要更新的段落。更新的内容来自XML文件，下面介绍它如何工作：
The xmlObj.responseXML property is a DOM object – it’s a lot like the “document” object, except it’s for the remote XML file. In other words, xmlObj.responseXML is the “document” object if you ran a script in data.xml. Since we know this, we can retrieve any XML node via the “getElementsByTagName” method. The data is contained in the XML node is accurately named “<data>” so our task is simple: retrieve the first (and only) data node. Thus, xmlObject.responseXML.getElementsByTagName(“data”)[0] returns the first <data> node in the XML file.
它返回XML节点，无数据的——数据必须通过访问此节点的属性，这是下一步的工作。
After that, it’s as simple as retrieving the data by specifying “firstChild.data” (firstChild refers to the text node which is contained within the <data> node, and the “data” property is the actual text of that text node).
xmlObj.open ('GET', file, true);
xmlObj.send ('');
This is the last bit in our ajaxRead function. What does it say? Well, the “open” method of the xmlObj opens a connection to the server (via a specific protocol, specified here as “GET” – you can use “POST” and others as well), requests a file (in our case, the variable “file” that was sent as a parameter to the ajaxRead function – data.xml), and whether JavaScript should handle the request synchronously (false) or asynchronously (true, the default). Since this is asynchronous Javascript and XML, we will be using the default asynchronous method – using since synchronous won’t work in this case.
The last line of our function simply sends an empty string literal back to the server. Without this line, the ready state of xmlObj will never get to 4, so your page will never update. The send method can be used for other things, but today we are only retrieving data from the server – not sending to it – so I won’t go into any more detail about the send method in this article.
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}
Now to explain the updateObj function a little more: this function updates any specific element on the current web page with a new value. Its first parameter, “obj,” is simply a specific ID of an element on the current web page – this is the object that will be updated; its second parameter, “data,” is a string that specifies the new value to be placed in the object that is to be updated (“obj”). Normally, it would be advisable to check and be sure that an element on the current page has the ID specified in “obj,” but that check isn’t necessary due to the level of isolation of our script. The way this function updates is similar to the way we retrieved data from the “data” node in the XML file earlier – it locates the element it wants to update (this time by that element’s ID instead of its tag name and index on the page) and sets the data of the first child (the text node) of that element to the new data. If you wanted to update an object with HTML instead of just plain text, you could also use document.getElementById(obj).innerHTML = data.
That’s all there is to it
概念简单，代码也不难。从此你可以无刷新的提交表单数据以及使用服务器端语言动态生成XML文件，更多内容查阅参考 ——啊，对了，Google也是你的好助手。在另外一篇文章里，我将介绍使用ajax的服务器端技术创建更强有力的应用程序。
关于作者：[感谢作者的努力，给我们带来这么好的教程]
Jonathan Fenocchi 网络开发者，最初从事web设计，前台脚本技术以及PHP开发(忽然感觉和我好象啊，哈哈
这是他的网站：http://www.slightlyremarkable.com
[最后编辑于 sonic, at 2005-11-26 00:47:17]
永久地址: http://www.burgeoncn.com/sonic/weblog/feed.asp?q=comment&id=2
引用地址: http://www.burgeoncn.com/sonic/weblog/trackback.asp?id=2
verizon wireless ringtones
download free ringtones