前端开发封装Ajax对get/post请求的框架

web前端与游戏开发
前端游戏开发书籍
前端可以开发游戏吗
一、添加一个自调用匿名函数:

格式:(function(){
})();
在一个项目中,可能会引入多个js框架,定义一个匿名函数可以决函数名相同,命名冲突的问题,但匿名函数不能执行,所以需要利用以上格式让其自动执行一次,这就是自调用匿名函数。这里暂且把这个封装的函数命名为:public.js

二、封装一个函数用于dom元素的获取:

[code](function () {
var $=function (id) {
return document.getElementById(id);
window.$=$;
})();[/code]
由于$是局部变量,外面不能直接使用,所以在window对象下这个$值就是当前局部变量$的值。
如果想获得dom元素,可以直接使用:$(‘content’);

三、封装一个函数用于创建ajax对象:

[code](function () {
//用于得到一个dom对象
var $=function (id) {
return document.getElementById(id);
}
//用于得到一个ajax对象
$.init=function (){
try{return new XMLHttpRequest()}catch(e){}
try{return new ActiveXobject(‘Microsoft.XMLHTTP’)}catch(e){}
alert(‘error’);
}
window.$=$;
})();[/code]由于之前把函数赋值给$,所以$也跟函数一样是一个对象,那么[backcolor=rgb(247, 247, 247)]$.init表示为对象$添加一个新的方法。[/bgcolor]

四、封装ajax的get请求:

为对象$添加一个get方法,参数有三个:
url:表示ajax请求的页面地址;
data:表示get请求时所需要传递的参数;
callback:当ajax得到正确的数据后,所执行的回调函数,callback参数接收的参数也该是一个函数。
[code] //用于发送ajax的get请求
$.get=function(url,data,callback){
var xhr=$.int();
if(data!=null){
url=url+’?’+data;
}
xhr.open(‘get’,url);
xhr.setRequestHeader(“If-Modified-Since”,”0″);
xhr.onreadystatechange=function(){
if (xhr.readyState==4 && xhr.status==200) {
callback(xhr.responseText);
}
}
xhr.send(null);[/code]
xhr.setRequestHeader(“If-Modified-Since”,”0″):解决get请求方式的缓存问题,设置ajax对象的请求头if-modified-since,强制让ajax对象发送请求,0表示文件最后修改时间,会和服务器上这个资源文件最后修改时间进行比较,所以服务器返回了最新数据。

PHP代码(命名为demo01.php):
<?php
$username=$_GET[‘username’];
echo ‘hello,’.$username;[/code]
html代码调用时:
使用这种方式:$.method(页面地址,传递参数,处理函数);[code]<script language=”javascript” src=”public.js”></script>
<script>
window.onlaod=function () {
$(‘btnOK’).onclick=function(){
$.get(‘demo01.php’,’username=xiaoqiang’,function(msg){ //<span style=”background-color: rgb(255, 255, 255);”>msg是用于接收ajax对象的返回值:</span>responseText。
alert(msg);
})
}
}
</script>
<input type=”button” id=”btnOK” value=”确定”/>
运行结果:hello,xiaoqiang

五、封装ajax的post请求:为对象$添加一个post方法,参数有三个:

url:表示ajax请求的页面地址;
data:表示post请求时所需要传递的参数;
callback:当ajax得到正确的数据后,所执行的回调函数。(注意与get请求时,调用回调函数时的写法,其效果是一样的)
[code]//用于发送ajax的post请求
$.post=function (url,data,callback){
var xhr=$.int();; //调用Ajax对象
xhr.open(‘post’,’url’); //初始化,用post请求方式连接到php文件,这样不会产生缓存问题
xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencode’); //设置请求头信息,本次提交的数据是字符数据
xhr.onreadystatechange=function(){ //设置Ajax对象的状态码发生改变时所触发的回调函数
if (xhr.readyState==4 && xhr.status==200) {
callback(xhr.responseText);
};
}
xhr.send(data); //发送请求,由于初始化时使用post请求方式,所以需添加post请求时所传递的函数(如果是get请求,刚为空null)
}[/code]html代码调用时:
[code] function display(msg){
alert(msg);
}
window.onlaod=function () {
$(‘btnOK’).onclick=function(){
$.post(‘demo02.php’,’name=wangwu&age=30′,display)
}
}[/code][backcolor=rgb(247, 247, 247)]demo02.php代码:
[code]<?php
$name=$_POST[‘name’];
$age=$_POST[‘age’];
echo ‘post:’.$name’,’.$age;//将两个信息连接起来[/code]
运行结果:post:wangwu,30

六、添加返回值类型:

现在,对ajax程序进行完善,使其可以返回三种不同的数据类型,再对其进行处理:
1)字符串
2)xml
3)json
首先,为get和post方法添加第四个参数:type,表示期望得到的返回值类型:
$.post=function(url,data,callback,type)
如果在调用时没有指定这个参数,就需要给它一个默认值,这里默认为字符串类型,再根据type值的不同,返回对应的数据
html在调用时的形式为:$.method(页面地址,传递参数,处理函数,数据类型);
if (xhr.readyState==4 && xhr.status==200) {
if (type==null) {
type=’text’; //如果没有传递type参数,让type的值默认为text
};
if (type==’text’) {
callback(xhr.responseText); //返回字符串类型
};
if (type==’xml’) {
callback(xhr.responseXML); //返回XML类型
};
if (type==’json’){
var str=eval(‘(‘+xhr.responseText+’)’); //转成对象
callback(str); //返回json类型
}
};

七、#####public.js函数库

代码片段 1

;(function() {
    //用于得到一个dom对象
    var $ = function(id) {
        return document.getElementById(id)
    }
    //用于得到一个ajax对象
    $.init = function() {
        try {
            return new XMLHttpRequest()
        } catch (e) {}
        try {
            return new ActiveXobject(‘Microsoft.XMLHTTP’)
        } catch (e) {}
        alert(‘error’)
    }
    //用于发送ajax的get请求
    $.get = function(url, data, callback, type) {
        var xhr = $.int()
        if (data != null) {
            url = url + ‘?’ + data //有时候ajax只想传递一个过程,不需要传递参数时
        }
        xhr.open(‘get’, url)
        xhr.setRequestHeader(‘If-Modified-Since’, ‘0’)
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (type == null) {
                    type = ‘text’ //如果没有传递type参数,让type的值默认为text
                }
                if (type == ‘text’) {
                    callback(xhr.responseText) //返回字符串类型
                }
                if (type == ‘xml’) {
                    callback(xhr.responseXML) //返回XML类型
                }
                if (type == ‘json’) {
                    var str = eval(‘(‘ + xhr.responseText + ‘)’) //转成对象
                    callback(str) //返回json类型
                }
            }
        }
        xhr.send(null)
    }
    //用于发送ajax的post请求
    $.post = function(url, data, callback, type) {
        var xhr = $.int() //调用Ajax对象
        xhr.open(‘post’, ‘url’) //初始化,用post请求方式连接到php文件,这样不会产生缓存问题
        xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencode’) //设置请求头信息,本次提交的数据是字符数据
        xhr.onreadystatechange = function() {
            //设置Ajax对象的状态码发生改变时所触发的回调函数
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (type == null) {
                    type = ‘text’ //如果没有传递type参数,让type的值默认为text
                }
                if (type == ‘text’) {
                    callback(xhr.responseText) //返回字符串类型
                }
                if (type == ‘xml’) {
                    callback(xhr.responseXML) //返回XML类型
                }
                if (type == ‘json’) {
                    var str = eval(‘(‘ + xhr.responseText + ‘)’) //转成对象
                    callback(str) //返回json类型
                }
            }
        }
        xhr.send(data) //发送请求,由于初始化时使用post请求方式,所以需添加post请求时所传递的函数(如果是get请求,刚为空null)
    }
    window.$ = $
})()
前端知识开发游戏
网易游戏 前端开发
游戏开发 前端后端
» 本文来自:前端开发者 » 《前端开发封装Ajax对get/post请求的框架》
» 本文链接地址:https://www.rokub.com/7606.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!