Ajax基础

今天我们来了解下Ajax

什么是Ajax

Ajax即“Asynchronous JavaScript and XML”（异步JavaScript和XML）。说白了就是无刷新数据读取。

HTTP请求

首先我们需要了解下HTTP请求的方法（GET和POST）

GET——用于获取数据（如：浏览帖子）

GET是在url里传数据，它的安全性低，容量低

POST——用于上传数据（如：用户注册）

POST安全性一般，容量几乎无限

编写Ajax

可以分成4步

1、创建Ajax对象

在创建对象时，我们需要考虑到浏览器兼容的问题。

var oAjax = new XMLHttpRequest();	//for ie6以上
var oAjax = new ActiveXObject('Microsoft.XMLHTTP');	//for ie6

合并上面的代码：

var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}else{
oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}

2、连接服务器

这里我们会用到open()方法。open()方法有三个参数，第一个参数是连接方法即GET和POST，第二个参数是URL即所要读取数据的地址，第三个参数是否异步，它是个布尔值，true为异步，false为同步。

oAjax.open('GET', url, true);

3、发送请求

send()方法

oAjax.send();

4、接收返回值

onreadystatechange事件。当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState：请求状态，返回的是整数（0-4）。

0（未初始化）：还没有调用open()方法。

1（载入）：已调用send()方法，正在发送请求。

2（载入完成）：send()方法完成，已收到全部响应内容。

3（解析）：正在解析响应内容。

4（完成）：响应内容解析完成，可以在客户端调用。

status：请求结果，返回200或者404。

200 =》成功

404 =》失败

responseText：返回内容，即我们所需要读取的数据。

oAjax.onreadystatechange=function ()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
//alert('成功：'+oAjax.responseText);
fnSucc(oAjax.responseText);
}
else
{
if(fnFaild)
{
fnFaild();
}
}
}
};

将以上内容进行封装：

function ajax(url, fnSucc, fnFaild){
//1.创建对象
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}else{
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}

//2.连接服务器
oAjax.open('GET', url, true);	//open(方法, url, 是否异步)

//3.发送请求
oAjax.send();

//4.接收返回
oAjax.onreadystatechange = function(){	//OnReadyStateChange事件
if(oAjax.readyState == 4){	//4为完成
if(oAjax.status == 200){	//200为成功
fnSucc(oAjax.responseText);
}else{
if(fnFaild){
fnFaild();
}
}
}
};
}

PS：博客搬家了，以后不再 CSDN 更新了，见谅。最新博客地址：http://www.cnblogs.com/yjzhu/