前端开发Ajax基础

网站编辑和前端开发的区别
前端开发网站工具
哪些网站可以自学前端开发

初次接触Ajax是,主要是了解了一点Ajax的概念。Ajax的英文全称是(Asynchronous JavaScript and Xml)即异步的javascript和xml,它是一种无需重新加载整个网页的情况下,能够更新部分网页的技术(创建快速动态网页)。

Ajax的基本运用步骤:
1.首先,创建ajax
2.然后通过ajax连接服务器
3.用创建的ajax对象发送请求
4.接受服务器的返回
其实这也不难理解,我们可以想想我们平时是如何打电话的
1.首先需要一个手机———————–创建ajax
2.通过手机来连接你通信的对象——–通过ajax连接服务器
3.接通电话后,你再来通话————–用创建的ajax对象发送请求
4.接受另一个通信对象的返回信息—–接受服务器的返回

我们来简单操作一下,然后一步一步完善:
1.创建ajax对象:
Var oAjax = new XMLHttpRequest();
Ajax的核心技术就是XMLHttpRequest对象,用于后台与服务器交换数据。
2.连接服务器:
oAjax.open(‘GET’,’a.txt’,true);
open()方法接受3个参数:要发送请求的类型、请求的URL(被连接的地址)、是否异步请求(用布尔值表示,true表示是异步方式)
3.发送请求
oAjax.send();
4.接受返回
首先我们来了解几个属性:
1)responseText:ajax请求返回的内容被存放到这个属性下面
2)readyState::判断浏览器和服务器进行到哪一步了通过数值来判断
2.1)0—(未初始化)还没调用open()方法
2.2)1—(载入)已调用send()方法,正在发送请求
2.3)2—(载入完成)send()方法完成,已经收到全部响应内容
2.4)3—(解析)正在解析响应内容
2.5)4—(完成)响应内容解析完成,可以在客户端调用了
3)onreadyStateChange:当readyState状态值改变的时候触发的事件
4)Status:服务器状态(200表示成功),http状态码
oAjax.onreadystatechange = function(){
//判断,如果响应内容完成
If(oAjax.readyState == 4){ //读取完成,但并未成功,比如,文件出错、地址不对
If(oAjax.status == 200){ //http状态码,200表示成功
//放一个函数,表示当成功的时候干的事情
}else{ //如果读取文件失败,干的事情
If(fnald){
//放一个函数,表示当失败的时候干的事情
}
}
}
}

现在我们来完善:
对于第1步:
由于IE6不兼容XMLHttpRequest((),XMLHttpRequest()在Chrome和firefox当中是兼容的,为IE6加入Microsoft.XMLHTTP是兼容的,所以来做兼容:
var oAajx = null;
If(window.XMLHttpRuquest){
oAjax = new XMLHttpRequest();
}else{
oAjax = new ActiveXObject(‘MicrosoftXMLHTTP’);
}

对于第2步:
由于oAjax.open(‘GET’,’a.txt’,true);连接一次就地址不再改变,那么ajax就不会再次发送请求,就会造成,服务器的内容改变了,而浏览器内容还未更新,所以可以利用时间不停在变来让URL时刻不一样改成:
oAjax.open(‘GET’,’a.txt?t=’+new Date().getTime(),true);
但是,如果后端接收一个变量,它的名字也为t的话,会造成冲突,可能会覆盖。
改为:
oAjx.open(‘get’,’aa.txt?’+new Date().getTime(),true);

对于第4步:
举例,写出要完成的函数:
If(oAjax.readyState == 4){ //读取完成,但并未成功,比如,文件出错、地址不对
If(oAjax.status == 200){ //http状态码,200表示成功
//放一个函数,表示当成功的时候干的事情
fnSucc(oAjax.responseText); //获取从服务器发送回来的文本
}else{ //如果读取文件失败,干的事情
If(fnald){
//获取失败对应的状态码,一般为404,表示读取文件失败
fnFaild(oAjax.status);
}
}
}
}

最后的代码如下:

function ajax(url,fnSucc,fnFaild){
//1.创建ajax对象
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}
else{
oAjax = new ActiveXObject(“Microsoft.XMLHTTP”);
}
//2。连接服务器
oAjax.open(‘GET’,’a.txt?’+new Date().getTime(),true);

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

//4.接收返回,ajax以一个事件的形式存在,当服务器的信息返回的时候这个事件会被调用。  
 oAjax.onreadystatechange = function(){
     if(oAjax.readyState == 4) {
        if(oAjax.status == 200) {
         fnSucc(oAjax.responseText);
        }
        else{
            if(fnFaild){
            fnFaild(oAjax.status);
            }
        }
    }
}

}

php开发网站前端模板下载
网站前端开发免费视频教程
网站前端开发主要用到哪些技术
» 本文来自:前端开发者 » 《前端开发Ajax基础》
» 本文链接地址:https://www.rokub.com/7468.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!