搭建基本的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";
?>
1951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
