Ajaxa的原生使用方法

　　　　　　Ajax整合了JavaScript、xml、CSS等现有技术而成，全称为Asynchronous JavaScript And XML,即异步的 JavaScript和xml。它使用了JavaScript通过XMLHttpRequest对象异步发送请求到服务器，然后根据结果，使用JavaScript和CSS局部更新相应网页的任务过程，其中XML用来封装请求和响应数据，CSS用来美化网页样式。

 

 

Ajax的关键元素：

　　　　JavaScript：Ajax技术的主要开发语言。

　　　　DOM（文档对象模型）:通过DOM属性或方法修改局部元素，实现页面局部刷新。

　　　　CSS样式表：改变样式，美化页面效果，提升用户体验度。

　　　　XMLHttpRequest对象（Ajax核心）：以异步的方式在客户端与服务器之间传递数据。

 

 

XMLHttpRequest对象的常用方法和属性

　　　　常用方法：

　　　　　　open(method,url,asyncl):用于创建一个新的Http请求，并制定此请求的

　　　　　　方法、URL、是否异步提交及验证信息true或false。

　　　　　　send(String):发送请求到服务器。

　　　　　　　　　　　　注意：String仅用于post方法，get方法为空或null

　　　　　　abort();取消 当前请求。

　　　　　　setRequestHeader():单独指定请求某个Http头。

　　　　　　getResponseHeader():从响应中获取指定的Http头。

　　　　　　　　getAllResponseHeaders():获取响应的所有Http头。

 

　　　　常用属性：

　　　　　　readyState：返回请求的当前状态。（readyState常用值是：0表示未初始化，

　　　　　　　　　　　　　　1表示初始化，2表示发送数据，3表示数据传送中，4表示数据接收完毕）

　　　　　　status：返回当前请求的Http状态码。（200表示正确返回，404表示找不到访问对象）

　　　　　　responseText：以文本形式获取响应值。

　　　　　　reponseXML：以XML形式获取响应值，并且解析成DOM对象返回。

　　　　　　statusText：返回请求的响应行代码。

　　　　　　onreadystatechange:设置回调函数。

 

 

Ajax的使用步骤：

　　　　　　1.创建XMLHttpRequest对象，通过window.XMLHttpRequest的返回值判断

　　　　　　　　　　XMLHttpRequest对象的方式。

　　　　　　2.设置回调函数，通过onreadystatechange属性设置回调函数，函数需要自定义。

　　　　　　3.初始化XMLHttpRequest组件。通过open()方法创建一个设置发送方式和请求路径

　　　　　　　　　　的Http请求。

　　　　　　4.发送请求。

 

 

发送get请求及处理文本方式响应：

　　　　　　//1.创建XMLHttpRequest对象

　　　　　　if(window.XMLHttpRequest){//返回时true时，说明是新版本IE或其他浏览器

　　　　　　　　xmlHttpRequest=new XMLHttpRequest();

　　　　　　}else{

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

　　　　　　}

　　　　　　//2.设置回掉函数

　　　　　　xmlHttpRequest.onreadystatechange=callBack;

　　　　　　//3.初始化XMLHttpRequest组件

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

　　　　　　//4.发送请求

　　　　　　xmlHttpRequest.send(null);//GET方法为空或null

　　　　　　//回调函数callBack

　　　　　　function callBack(){

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

　　　　　　var b=xmlHttpRequest.responseText;

　　　　　　根据不同的返回类型处理向响应

　　　　　　　　..........

　　　　}

　　}

发送post请求及处理文本方式响应：

　　　　　　//加粗部分是与get请求的区别

　　　　　　//1.创建XMLHttpRequest对象

　　　　　　if(window.XMLHttpRequest){//返回时true时，说明是新版本IE或其他浏览器

　　　　　　xmlHttpRequest=new XMLHttpRequest();

　　　　　　}else{

　　　　　　//付过是IE5,IE6低版本的浏览器

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

　　　　　　}

　　　　　　//2.设置回掉函数

　　　　　　xmlHttpRequest.onreadystatechange=callBack;

　　　　　　//3.初始化XMLHttpRequest组件

　　　　　　xmlHttpRequest.open("POST",url,true);

　　　　　　//请求头部信息的格式

　　　　　　xmlHttpRequest.setRuquestHeader("Content-Type","application/x-www-form-urlencoded");

　　　　　　//4.发送请求

　　　　　　var userinfo="uname="+uname;//需要发送的数据信息

　　　　　　　　xmlHttpRequest.send(userinfo);

 

 

发送GET请求及处理XML方式响应：

　　　　　　　　　　　　　　在处理XML方式响应时，需要使用XMLHttpRequest对象的responseXML属性得到服务器端

　　　　　　　　　　生成的XML文档，responseXML返回的并不是简单的字符串，是一个XmlDocument对象，因此要处理XML方式的响应，需要先了解如何使用XmlDocument　　　　　　　　　　对象获取服务器端返回的数据信息。

 

XmlDocument的常用属性与方法：

　　　　　　属性：

　　　　　　　　attributes:当前节点的属性集合。

　　　　　　　　childNodes:当前节点的所有子节点。

　　　　　　　　firstChild:节点的第一个子节点。

　　　　　　方法：

　　　　　　　　getElementsByTagName():用来获取指定节点名的节点对象集合，参数为节点名

                                           称字符串。

　　　　　　　　　selectSingleNode():用来获取符合条件的第一个节点对象。

　　　　　　　　　selectNode():用来获取符合条件的节点对象集合。

 

　　　　　　　　　　回调函数中处理XML响应的方法：

　　　　　　　　　　function callBack(){

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

　　　　　　　　　　　　//获取服务器端返回的XML形式的文档对象

　　　　　　　　　　　　//加黑部分是与文本响应方式的区别

　　　　　　　　　　　　　　var dom=xmlHttpRequest.responseXML;

　　　　　　　　　　　　　　　if(dom){

　　　　　　　　　　　　　　　　　　//获取节点名为“username”的节点对象集合

　　　　　　　　　　　　　　　　　　var userNodes=dom.getElementsByName("username");

　　　　　　　　　　　　　　　　　　if(userNodes.length>0){

　　　　　　　　　　　　　　　　　　//获取该节点对象中的第一个子节点

　　　　　　　　　　　　　　　　　　　　var username=userNodes[0].firstChild.nodeValue;

　　　　　　　　　　　　　　　　　　　　document.getElementById("username").value=username;

}

}

}

}

一般都是jQuery与Ajax一起使用，原生用起来麻烦。