前端开发装Ajax-初级

前端开发考虑的主流浏览器
前端开发主流浏览器差异
前端开发者浏览器

封装之前理解清楚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
<!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>

手机浏览器 前端开发
前端开发所用测试浏览器
前端开发用那个浏览器
» 本文来自:前端开发者 » 《前端开发装Ajax-初级》
» 本文链接地址:https://www.rokub.com/6585.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!