Ajax异步请求(一)

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

　　　　　　　　　　　　----致自己

目录：

一、Ajax基础知识回顾

1.Ajax简介

2.Ajax工作原理

3.方法详解

4.GET请求

5.POST请求

**********************一、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();

针对IE5、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.

Ajax异步请求(一)

原文：http://www.cnblogs.com/Colinhcj/p/6399538.html