Ajax基础

Ajax可以用来干什么？

 基础：请求并显示静态TXT文件、字符集编码、缓存、阻止缓存。

 动态数据：请求JS(或Json)文件、eval的使用、DOM创建元素

 局部刷新：请求并显示部分网页文件

1、

2、

3、

4、

AJAX中的重要对象:XMLHttpRequest

这个对象是微软最先在ie里面提供的,使用的是ActiveX对象(IE5和IE6):

var variable=new ActiveXObject("Microsoft.XMLHTTP");

现在,所有的现代浏览器(IE7+,Firefox,Chrome,Safari 以及 Opera)均内建XMLHttpRequest对象:

var  variable=new XMLHttpRequest();

为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象. 如果支持,则创建 XMLHttpRequest 对象.如果不支持,则创建 ActiveXObject:

var xmlHttpRequest;
if (window.XMLHttpRequest) {//in JavaScript, if it exists(not null and undifine), it is true.
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlHttpRequest = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

 1.准备阶段:创建好xmlHttpRequest对象后，设置请求方法，也可以直接传两个参数，也就是说不用传true

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

     open方法的原型是:XMLHttpRequest.prototype.open = function(method,url,async,user,password) {};

     我们这里只指定了三个参数:方法,路径和发送异步请求为true.

  

 2.关联好回调函数:

     当状态改变的时候,进入处理,这里是一个回调方法:一般都会在函数名后面加个Calback

xmlHttpRequest.onreadystatechange = ajaxCallback;

3.向服务器端发送数据:

xmlHttpRequest.send();

     这里使用GET方法,可以不传入参数,或者写send(null),发送POST请求时,需要在这里传入参数.

 4.处理回调函数：

function ajaxCallback() {
   //状态码为了200表示已经完全正确接收
    if (4 == xmlHttpRequest.readyState && 200 == xmlHttpRequest.status) {
        var responseText = xmlHttpRequest.responseText;
        document.getElementById("xxx").innerHTML = responseText;
    }
}