论坛首页 Web前端技术论坛

AJAX读书笔记(二)

浏览 2995 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-02-15  
使用 JavaScript 和 Ajax 发出异步
XMLHttpRequest 简介
1.XMLHttpRequest方法和属性
     1.open():建立到服务器的新请求。
     2.send():向服务器发送请求。
     3.abort():退出当前请求。
     4.readyState:提供当前 HTML 的就绪状态。
     5.responseText:服务器返回的请求响应文本。

说明:XMLHttpRequest的方法和属性都与请求/响应模型有关,使用好该对象可以彻底改变应用程序。
2.错误处理
代码:
<script language="javascript" type="text/javascript">
var request = false;
try {
  request = new XMLHttpRequest();
} catch (failed) {
  request = false;
}
if (!request)
  alert("Error initializing XMLHttpRequest!");
</script>

步骤说明:
    1)创建一个新变量 request 并赋值 false。后面将使用 false 作为判定条件,它表示还没有创建 XMLHttpRequest 对象。
    2)增加 try/catch 块:
    3)尝试创建 XMLHttpRequest 对象。
    4)如果失败(catch (failed))则保证 request 的值仍然为 false。
    5)检查 request 是否仍为 false(如果一切正常就不会是 false)。
    6)如果出现问题(request 是 false)则使用 JavaScript 警告通知用户出现了问题。

3.静态与动态
所有这些代码都直接嵌套在 script 标记中。像这种不放到方法或函数体中的 JavaScript 代码称为静态 JavaScript。就是说代码是在页面显示给用户之前的某个时候运行。这也是多数 Ajax 程序员创建 XMLHttpRequest 对象的一般方式。
代码:
<script language="javascript" type="text/javascript">
var request;
function createRequest() {
  try {
    request = new XMLHttpRequest();
  } catch (trymicrosoft) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (othermicrosoft) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = false;
      }
    }
  }
  if (!request)
    alert("Error initializing XMLHttpRequest!");
}
function getCustomerInfo() {
  createRequest();
  // Do something with the request variable
}
</script>

说明:此代码惟一的问题是推迟了错误通知,这也是多数 Ajax 程序员不采用这一方法的原因。假设一个复杂的表单有 10 或 15 个字段、选择框等,当用户在第 14 个字段(按照表单顺序从上到下)输入文本时要激活某些 Ajax 代码。这时候运行 getCustomerInfo() 尝试创建一个 XMLHttpRequest 对象,但(对于本例来说)失败了。然后向用户显示一条警告,明确地告诉他们不能使用该应用程序。但用户已经花费了很多时间在表单中输入数据!这是非常令人讨厌的,而讨厌显然不会吸引用户再次访问您的网站。
如果使用静态 JavaScript,用户在点击页面的时候很快就会看到错误信息。这样也很烦人,不过,当然要比他们花费了 10 分钟输入信息之后再显示同样的错误要好。因此,建议编写静态的代码,让用户尽可能早地发现问题。
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics