论坛首页 Web前端技术论坛

AJAX读书笔记(一)

浏览 3886 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-02-15  
ajax能做什么
    1.编写应用程序时有两种基本的选择
      1)桌面应用程序:通过cd为介质,运行在桌面上运行速度快,不需要等待时间。
      2)Web 应用程序:通过浏览器访问,运行在服务器上等待,等待服务器响应,等待屏幕刷新,等待请求返回和生成新的页面。

    2.ajax:Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写
    3.Ajax 尝试建立桌面应用程序的功能和交互性,与不断更新的 Web 应用程序之间的桥梁。可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件,不过是在 Web 应用程序中。

老技术、新技术
1.Ajax 应用程序所用到的基本技术:

    1.HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
    2.JavaScript 代码是运行 Ajax 应用程序的核心代码,帮助改进与服务器应用程序的通信。
    3.DHTML 或 Dynamic HTML,用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。
    4.文档对象模型 DOM 用于(通过 JavaScript 代码)处理 HTML 结构和(某些情况下)服务器返回的 XML。

2.XMLHttpRequest 对象
在javascript中创建XMLHttpRequest对象如下:
代码:
<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>

说明:XMLHttpRequest对象是javascript提供的,它是用来处理所有服务器通信的对象。
Ajax是把javascript技术和XMLHttpRequest放到web表单和服务器之间,使得用户感觉不到提交表单。并且请求是异步的,Javascript代码不用等待服务器的请求,可以继续其它的操作。总之Ajax不但使用户拥有互联网的全部强大力量,同时获得类似桌面程序的动态、快速响应、高交互性的体验。

3.加入javascript代码
JavaScript 代码完成的任务:

    1.获取表单数据:JavaScript 代码很容易从 HTML 表单中抽取数据并发送到服务器。
    2.修改表单上的数据:更新表单也很简单,从设置字段值到迅速替换图像。
    3.解析 HTML 和 XML:使用 JavaScript 代码操纵 DOM,处理 HTML 表单服务器返回的 XML 数据的结构。

代码:
// Get the value of the "phone" field and stuff it in a variable called phone
var phone = document.getElementById("phone").value;
// Set some values on a form using an array called response
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];

4.获取 Request 对象
由于浏览器之间的不兼容性,所以创建XMLHttpRequest对象需要采取不同的方法。
使用IE浏览器创建XMLHttpRequest对象,如下:
代码:
var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}

说明:这两行代码基本上就是尝试使用一个版本的 MSXML 创建对象,如果失败则使用另一个版本创建该对象。
处理 Mozilla 和非 Microsoft 浏览器
代码:
var xmlHttp = new XMLHttpRequest();

结合起来
代码:
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

这段代码的核心分为三步:

    1.建立一个变量 xmlHttp 来引用即将创建的 XMLHttpRequest 对象。
    2.尝试在 Microsoft 浏览器中创建该对象:
      1)尝试使用 Msxml2.XMLHTTP 对象创建它。
      2)如果失败,再尝试 Microsoft.XMLHTTP 对象。

    3.如果仍然没有建立 xmlHttp,则以非 Microsoft 的方式创建该对象。
论坛首页 Web前端技术版

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