今天我们来了解下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/