标签：
Ajax全称Asynchronous JavaScript And XML，也就是异步JavaScript和XML。它是一种利用JavaScript脚本实现的在不刷新整个页面的情况下与服务器进行数据交换的技术，这与传统上与服务器的数据交换仅仅由浏览器自身完成不同。它可以提高网页的响应速度，增强用户体验。
Ajax的实现依靠一个核心对象，即：XMLHttpRequest。这个对象有三个主要属性：
1. onreadystatechange:on开头，当然表示监听某种状态，实际上它监听的是服务器的响应状态。
2.readyState：表示服务器的响应状态信息，它有0,1,2,3,4这五个取值，一般我们用的比较多的是4，表示请求完成。这个属性的值一改变就会触发onreadystatechange事件。
3.responseText/responseXML：它表示从服务器取回的数据信息，如果你从服务器获取txt文件，请用responseText，如果获取的是XML文件请用responseXML。
创建该对象后就可以利用它与服务器进行数据交互了。和往常一样，IE浏览器和其他浏览器创建该对象的方法是不同的。IE使用ActiveX对象来创建，而其他浏览器可以直接创建。我们首先需要创建一个函数来处理这种不兼容性。
function myXHR(){ if(!window.XMLHttpRequest){//如果不支持XMLHttpRequest对象 //就尝试创建IE下的对象（版本略多...） try{ return new ActiveXObject(‘Msxml2.XMLHTTP.6.0‘); }catch(e){ try{ return new ActiveXObject(‘Msxml2.XMLHTTP.4.0‘); }catch(e){ try{ return new ActiveXObject(‘Msxml2.XMLHTTP.3.0‘); }catch(e){ //如果都不支持，则创建失败。 return false; } } } } //否则，直接创建XMLHttpRequest对象 return new XMLHttpRequest(); }
创建完对象后，就可以用它来和服务器交互了，这主要要用到该对象的两个方法open(TYPE,url,isBlocking),和send(). open方法表示准备从服务器获取数据，它有三个参数，第一个TYPE指的是从服务器获取数据的方法，一般有GET和POST两种方式（当然还有其他方式），GET表示从服务器获取信息，GET方法较简单通用，除非你要向服务器发送大量数据，否则一般用get即可。第二个参数url表示你要获取的文件在服务器中的位置，是一个字符串。第三个参数表示同步还是异步获取，是一个boolean类型的值，如果采用同步获取，就写true，这时在服务器响应完成之前，会阻塞(blocking)后面JavaScript代码的执行，如果网速过慢，就会影响后面网页渲染。所以这里我们一般写false，也就是异步执行。异步执行时，我们可以利用onreadystatechange事件来监听服务器的响应状况，也不影响后面代码的执行。示例：
var xhr = new myXHR();//创建一个XHR对象 //用get的方法异异步方式准备从服务器获取book.xml文件 xhr.open(‘GET‘,‘book.xml‘,false)
和服务器进行数据交换的格式主要有JSON和XML，这里单介绍XML。XML全称可扩展性标记语言，是标记语言家族的成员（这意味着向getElementsByTagName这样的独立于具体语言的DOM方法在XML中也可以使用），与HTML主要用来在网页上显示文本不同的是，XML主要用来存储和交换数据。另外，XML中的标签是自定义的，一个典型的XML文档是这样的：
<!--文档头声明--> <?xml version="1.0" encoding="ISO-8859-1"?> <!--一个根节点，注意标签名是自定义的--> <person> <!--若干个子节点，子节点内部也可以嵌套子节点--> <name>sombody</name> <gender>male</gender> </person>
下面我们来示例一下如何用ajax异步载入XML文档中的信息并添加到HTML中。
/*
示例：用Ajax从服务器读取book.xml中的isbn节点
*/
function getISBN(){ //创建XHR对象 var xhr = new myXHR(); if(xhr){ //用get方式向服务器请求数据 xhr.open("GET","book.xml",false); //监听服务器响应状态 xhr.onreadystatechange = function(){ //如果请求完成就开始执行函数 if(xhr.readyState == 4){ //通过XHR的responseXML属性从服务器取回XML文档并把它赋值给xmlDocument变量 var xmlDocument = xhr.responseXML; //用通用DOM方法从XML中获取isbn节点的文本内容 var isbn = xmlDocument.getElementsByTagName("isbn")[0].childNodes[0].nodeValue; //把获取到的内容加到HTML文档中 var newp = document.createElement("p"); newp.innerHTML = "ISBN:"+isbn;//newp.createTextNode × document.body.appendChild(newp); } } //不向服务器发送数据 xhr.send(null); } else{ //如果XHR对象创建失败，抛出错误 throw new Error("XMLHttpRequest not supported!"); } }
这样就完成了一次Ajax请求。
附：book.xml的内容
<?xml version="1.0" encoding="ISO-8859-1"?> <book> <title>JavaScript Step By Step</title> <isbn>9780735624998</isbn> </book>
（初学JavaScript，这也算自己总结一下，请轻喷）
参考文献：
1.Jeremy Keith.《JavaScript DOM编程艺术》（中文第二版）
2.然嘎.Ajax XMLHttpRequest对象的三个属性以及open和send方法.http://www.cnblogs.com/jianglan/archive/2011/07/20/2112098.html
3.Steve Suehring.《JavaScript从入门到精通》（中文第二版）
4.W3CSchool.XML简介.http://www.w3school.com.cn/xml/xml_intro.asp
标签：
原文地址：http://www.cnblogs.com/cyniczzz/p/4839521.html
