Ajax异步请求(一)

不困于情，不乱于心，不畏未来，不念过去。

　　　　　　　　　　　　----致本身

目录：

1、Ajax基础知识回顾

1.Ajax简介

2.Ajax工做原理

3.方法详解

4.GET请求

5.POST请求

**********************1、Ajax基础知识回顾**************************

===================1.Ajax简介===========================

Asynchrous JavaScript And XML 异步的JavaScript和XML，是驱动新一代web站点的关键技术。与xml的关系是能够读取和返回xml文件。

优势：在不从新加载整个页面的状况下，能够与服务器交换数据并更新部分网页内容。

===================2.Ajax工做原理=========================

(1)客户端浏览器建立一个XMLHttpRequest对象向服务器发送请求

(2)服务器接收请求，建立一个response对象并发送一些数据返回给浏览器

(3)浏览器接收数据使用JavaScript更新页面内容

Ajax是基于现有的Internet标准，使用XMLHttpRequest对象异步的与服务器交换数据。

全部现代浏览器都支持XMLHttpRequest对象。xmlhttp = new XMLHttpRequest();

针对IE五、6：XMLHttpRequest xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

获取XMLHttpRequest：

 

var xmlhttp;
if(window.XMLHttpRequest){
//  IE7+, Firefox, Chrome, Opera, Safari建立方式  
     xmlhttp = new    XMLHttpRequest();
}else{
//  IE6, IE5 建立方式  
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}    

 

===================3.方法详解============================

如需将请求发送到服务器，则使用XMLHttpRequest对象的send()和open()方法。

xmlhttp.open(method,url,async);

xmlhttp.send();

method:请求类型，POST或者GET

url:文件在服务器的位置

async:true异步，false同步

send(string):将请求发送到服务器.string只使用于post请求，向服务器发送的请求数据。

注：若是是POST请求则须要设置请求头，setRequestHeader();

属性：

onreadystatechange() 存储函数，每当readyState改变时就会触发该函数

readyState 存有XMLHttpRequest状态，从0-4

status   200："OK"  404未找到页面

responseText:获取字符串形式的响应数据

responseXML：获取xml格式的响应数据

===================4.GET请求===========================

GET请求简单速度快且在绝大部分状况下均可以使用

xmlhttp.open("GET","/user/demo.txt",true);

xmlhttp.send();

使用get请求时应该特别注意，像如上方式获得的多是缓存的结果，为了不这种状况建议向URL中添加一个惟一的ID

xmlhttp.open("GET","/user/demo.text?t="+Math.random(),true);

===================5.POST请求==========================

 建议在如下状况下使用POST请求

1.没法用缓存文件

2.向服务器发送大量数据<post没有数据限制>

3.发送包含未知字符串的用户输入时，post稳定可靠。

xmlhttp.open("POST","/user/demo.text",true);

须要向HTTP表单那样post数据时可使用setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send();

注：setRequestHeader(header,value);

header:规定头的名称

value:规定头的值

当使用async = true时，请规定在响应时处于onreadystatechange事件中的就绪状态的执行函数

xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
 //do something;   
}
}

 最后总结一下，使用Ajax异步请求时步骤：

1.建立对象(一般状况下，为了兼容全部浏览器会向上面获取XMLHttpRequest代码那样写)

2.设置open()方法和setRequestHeader()方法参数。将请求方法，请求地址，请求类型放到open中，若是是post请求则须要设置setRequestHeader()。

3.发送执行，send()方法才是真正与服务器交互执行

4.获取结果,使用它的函数onreadystatechange.