调用Ajax的一个小例子，用万网的查询域名接口查询域名是否可用的。
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script LANGUAGE="JavaScript">
//执行Ajax的通用函数
function ajax(options){
// 如果用户没有提供某个选项的值，就用默认值替代
options = {
// HTTP请求的类型
type: options.type || "POST",
// 请求的URL
url: options.url || "",
// 请求超时的时间
timeout: options.timeout || 5000,
// 请求失败、成功或完成时执行的函数
onComplete: options.onComplete || function(){},
onError: options.onError || function(){},
onSuccess: options.onSuccess || function(){},
// 服务器将会返回的数据类型，这一默认值用于判断服务器返回的数据并做相应动作
data: options.data || ""
}
if (typeof XMLHttpReques == "undefined") {
XMLHttpRequest = function(){
// IE使用ActiveXObject来创建新的XMLHttpRequest对象
return new ActiveXObject(
navigator.userAgent.indexOf("MSIE 5") >= 0 ? "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP"
);
};
}
// 创建请求对象
var xml = new XMLHttpRequest();
// 初始化异步请求
xml.open(options.type, options.url, true);
// 请求后等待5秒，超时则放弃
var timeoutLength = options.timeout;
// 记录请求是否成功完成
var requestDone = false;
// 初始化一个5秒后执行的回调函数，用于取消请求（如果尚未完成的话）
setTimeout(function(){
requestDone = true;
}, timeoutLength);
// 监听文档的状态更新
xml.onreadystatechange = function(){
// 保持等待，直到数据完全加载，并保证请求并未超时
if (xml.readyState == 4 && !requestDone) {
// 检查请求是否成功
if (httpSuccess(xml)) {
// 以服务器返回的数据作为参数调用成功回调函数
options.onSuccess(httpData(xml, options.type));
} else {
// 否则就发生了错误，执行错误回调函数
options.onError();
}
// 调用完成回调函数
options.onComplete();
// 为避免内存泄漏，清理文档
xml = null;
}
};
xml.send();
// 判断HTTP请求响应是否成功
function httpSuccess(r){
try{
// 如果得不到服务器状态，且我们正在请求本地文件，认为成功
return !r.status && location.protocol == "file:" ||
// 所有200到300间的状态码表示成功
(r.status >= 200 && r.status < 300) ||
// 文档未修改也看作是成功
r.status == 304 ||
// Safari浏览器在文档未修改时返回空状态
(navigator.userAgent.indexOf("Safari") >= 0 && typeof r.status == "undefined");
} catch(e){
// 若检查状态失败，就假定请求是失败的
return false;
}
}
// 从HTTP响应中解析正确数据
function httpData(r, type){
// 获取Content-type的首部
var ct = r.getResponseHeader("content-type");
// 若没有提供默认的类型，判断服务器返回的是否是XML形式
var data = !type && ct && ct.indexOf("xml") >= 0;
// 若是XML，获得XML文档对象，否则返回文本内容
data = type == "xml" || data ? r.responseXML : r.responseText;
if (type == "script") {
// 若指定类型是“script”，则以JavaScript形式执行返回文本
eval.call(window, data);
}
// 返回响应数据
return data;
}
}
// 自己实现options.onSuccess(data)函数
function onsuccess(data){
alert(data);
}
function callAjax(){
var domainname = document.getElementById("domain");
var val = domainname.value;
if (val == null || val == "") {
alert("Please input domain!");
domainname.focus();
return false;
}
var options = {
type: "GET",
url:"" + val,
onSuccess:onsuccess,
data:""
};
ajax(options);
}
</script>
</HEAD>
<BODY>
Domain:<input type="text" id="domain" name="domain" size="30"><br>
Exam: baidu.com
<br>
<input type="button" value="click me" onclick="callAjax()">
</BODY>
</HTML>
|
阅读(1755) | 评论(0) | 转发(0) |
