封装ajax-初级

转载 (原文地址) tanxuxu 随笔 待整理 1459阅读 2014-08-28 13:04:16 举报

封装之前理解清楚get和post方式的区别
get:和url一起通过网址传递参数,安全性很低,容量小,会产生缓存,常用于取数据操作
post:通过http content传递,容量可以达到2g,安全性比get会好一点,不会产生缓存,常用在上传数据操作上
开始简单封装:
[code]function ajax(url,fnSucc,fnFail){
if(window.XMLHttpRequest) //以属性的形式存在,在ie6下不会报错
{
var oAjax=new XMLHttpRequest();
}
//ie6下,通过微软提供的插件
else
{
var oAjax=new ActiveXobject("Microsoft.XMLHttp");

    }
    //链接服务器   open(方法,文件名,异步传输)
    oAjax.open('get',url,true);
    //发送请求
    oAjax.send();
    //接受返回信息
    //和服务器有交互时发生
    oAjax.onreadystatechange=function(){ 
        //oAjax.readyState为交互状态
        //0:初始化;1:载入   2:载入完成   3:解析  4:完成
        if(oAjax.readyState==4){  //当解析完成时

            if(oAjax.status==200)  //200为成功状态
            {  //成功时
                fnSucc(oAjax.responseText);
            }
            else
            {
                if(fnFail){

                    fnFail(oAjax.status);
                    }
            }

        }
    }   
}[/code]

前台测试,新建个aa.txt文件在同级目录下
前台html:
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="Ajax.js"></script>
<script>
/
1,创建对象
2,链接服务器
3,发送请求
4,返回数据
/
window.onload=function(){
var oBtn=document.getElementById('obtn');
oBtn.onclick=function(){

    ajax('aa.txt',function(str){
        alert(str)
        })
    }
}

</script>
</head>

<body>
<input type="button" id="obtn" value="ajax"/>
</body>
</html>
[/code]

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复