搭建基本的Ajax框架
本节将搭建一个基本的Ajax应用程序开发框架,这个基本的框架应该包括XMLHttpRequest对象的创建、提供回调函数功能以及对业务逻辑以及相关兼容的处理。
创建XMLHttpReuqest对象
我们知道,在IE浏览器中,IE6及以下浏览器的XMLHttpRequest对象是通过ActiveXObject来创建的,而在IE7及以上以及其它非IE浏览器是通过window对象的属性原生创建的。为了兼容IE6及以下浏览器和IE7及以上以及其它非IE浏览器问题,我们将创建XMLHttpRequest对象的方法进行一个封装,以解决兼容性问题。
//封装创建XMLHttpRequest对象的方法
function getTransport () {
var versions = [
function () {
return new XMLHttpRequest(); //兼容IE7及以上浏览器和其它非IE浏览器方法
},
function () {
return ActiveXObject("MicrosoftHTTP"); //兼容IE6及以下浏览器的方法
}
];
var request;
for (var i = 0; i < versions.length; i ++) {
var lambda = versions[i]; //得到XMLHttpRequest对象
try {
request = lambda(); //回调函数
break;
} catch (e) {}
}
return request;
}
如以上代码所示:首先用一个数组versions保存了2个匿名函数,这两个匿名函数提供了不同版本的XMLHttpRequest对象的创建方法。然后用一个for循环和try()..catch()来获取这匿名函数,并获取第一个成功执行的匿名函数,最后跳出循环,最后返回这个获取到的匿名函数。
发送请求和回调函数
在对XMLHttpRequest对象的创建进行封装后,还需要对发送请求和回调函数进行处理。
/*
*函数名:ajaxRequest
*功能:根据用户指定的URL、方法、参数HTTP头,以及回调函数,自动创建XMLHttpRequest对象并发送请求。
*参数介绍:
* url:请求的URL地址,字符串类型
* option:参数,其成员可能有:
* method:发送请求的方式,可以为"GET"或"POST"
* headers:需要发送的HTTP头,属性名为头名称,属性值为信息的内容
* parameters:需要发送的数据。
*/
function ajaxRequest (url, options) {
var request = getTransport(); //创建XMLHttpRequest对象
if (typeof request == "undefined") { //判断浏览器是否支持XMLHttpRequest对象
throw new Error("Your browser does not support XMLHttpRequest");
}
var url = url;
var method = (options.method||"POST").toUpperCase();//获取提交方法,默认为POST,且为大写字母表示
if (method != "GET" && method != "POST") {
method = "POST"; // 将除POST、GET外的提交方式变成 POST提交请求方式
}
var parameters = options.parameters || null;//需要提交的数据,默认为null
var headers = options.headers || {};//需要发送的HTTP头信息,是一个对象。
var onLoadingEventHandler = options.onLoad || function () {};
var onCompleteEventHandler = options.onComplete || function () {};
var onSuccessEventHandler = options.onSuccess || function () {};
var onFailureEventHandler = options.onFailure || function () {};
if (method == "GET" && parameters != null) { //如果提交方式为GET,且提交的url不是为null,
if (url.indexOf("?") > -1) { //将parameters的内容拼接到url中,并把parameters设置为null
url += "&" + parameters;
} else {
url += "?" + parameters;
}
parameters = null;
}
request.open(method, url, true);
request.setRequestHeader("contentType", "appllication/x-www-form-urlencoded");
for (var name in headers) { //设置由用户指定的HTTP头信息
request.setRequestHeader(name, headers[name]);
}
request.onreadystatechange = function () {
if (request.readyState == 1) {
onLoadingEventHandler(request);
}
if (request.readyState == 4) {
onCompleteEventHandler(request);
if (request.status && request.status >= 200) {
onSuccessEventHandler(request);
} else {
onFailureEventHandler(request);
}
}
};
request.send(parameters);
}
封装好的基本Ajax应用程序框架
将以上的两段代码合并到一个JavaScript文件中,并命名为ajaxRequest.js,这样就可以在以后需要运用Ajax技术时在HTML文档中引用这个框架了。
//封装创建XMLHttpRequest对象的方法
function getTransport () {
var versions = [
function () {
return new XMLHttpRequest(); //兼容IE7及以上浏览器和其它非IE浏览器方法
},
function () {
return ActiveXObject("MicrosoftHTTP"); //兼容IE6及以下浏览器的方法
}
];
var request;
for (var i = 0; i < versions.length; i ++) {
var lambda = versions[i]; //得到XMLHttpRequest对象
try {
request = lambda(); //回调函数
break;
} catch (e) {}
}
return request;
}
/*
*函数名:ajaxRequest
*功能:根据用户指定的URL、方法、参数HTTP头,以及回调函数,自动创建XMLHttpRequest对象并发送请求。
*参数介绍:
* url:请求的URL地址,字符串类型
* option:参数,其成员可能有:
* method:发送请求的方式,可以为"GET"或"POST"
* headers:需要发送的HTTP头,属性名为头名称,属性值为信息的内容
* parameters:需要发送的数据。
*/
function ajaxRequest (url, options) {
var request = getTransport(); //创建XMLHttpRequest对象
if (typeof request == "undefined") { //判断浏览器是否支持XMLHttpRequest对象
throw new Error("Your browser does not support XMLHttpRequest");
}
var url = url;
var method = (options.method||"POST").toUpperCase();//获取提交方法,默认为POST,且为大写字母表示
if (method != "GET" && method != "POST") {
method = "POST"; // 将除POST、GET外的提交方式变成 POST提交请求方式
}
var parameters = options.parameters || null;//需要提交的数据,默认为null
var headers = options.headers || {};//需要发送的HTTP头信息,是一个对象。
var onLoadingEventHandler = options.onLoad || function () {};
var onCompleteEventHandler = options.onComplete || function () {};
var onSuccessEventHandler = options.onSuccess || function () {};
var onFailureEventHandler = options.onFailure || function () {};
if (method == "GET" && parameters != null) { //如果提交方式为GET,且提交的url不是为null,
if (url.indexOf("?") > -1) { //将parameters的内容拼接到url中,并把parameters设置为null
url += "&" + parameters;
} else {
url += "?" + parameters;
}
parameters = null;
}
request.open(method, url, true);
request.setRequestHeader("contentType", "appllication/x-www-form-urlencoded");
for (var name in headers) { //设置由用户指定的HTTP头信息
request.setRequestHeader(name, headers[name]);
}
request.onreadystatechange = function () {
if (request.readyState == 1) {
onLoadingEventHandler(request);
}
if (request.readyState == 4) {
onCompleteEventHandler(request);
if (request.status && request.status >= 200) {
onSuccessEventHandler(request);
} else {
onFailureEventHandler(request);
}
}
};
request.send(parameters);
}
HTML部分代码为:
<script src="ajaxRequest.js"></script>
<script>
var options = {
method : "GET",
parameters : 'name=Huang',
headers : {
Sex : "male",
RequestBy : "ajaxRequest"
},
onLoading : function () {
document.body.innerHTML += "<div>Now loading...</div>";
}
};
window.onload = function () {
ajaxRequest("demo.php", options);
};
</script>
PHP部分代码:
<?php
echo "ok";
?>