Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1480811
  • 博文数量: 187
  • 博客积分: 10375
  • 博客等级: 上将
  • 技术积分: 3127
  • 用 户 组: 普通用户
  • 注册时间: 2006-03-07 10:58
文章分类

全部博文(187)

文章存档

2013年(1)

2012年(8)

2011年(28)

2010年(36)

2009年(47)

2008年(67)

我的朋友

分类:

2008-12-18 20:18:09

调用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>

阅读(1820) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~