再学AJAX

AJAX用了很久了,主要处理ddl联动无刷新,以及验证的处理,用ajaxpro.net应该是比较容易的,只要配置下webconfig,以及页面方法加个属性(具体可以google),就能简单使页面JavaScript调用服务端方法,并通过异步对页面进行改变.

突然有人问我ajax的原理时,一时脑中却回忆不起来了,所以抽空又看了下ajax的原理,以下总结下一些基本的东西

Ajax 应用程序所用到的基本技术：

1.HTML----建立web表单并确定应用程序其他部分使用的字段

2.JavaScript----运行ajax的核心代码,帮助改进与服务器应用程序的通讯

3.DHTML----动态更新表单

4.DOM----文档对象模型,通过js处理html结构和(某些情况下)服务器返回的xml

一个JavaScript对象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();
}

 

现在先不管那些注释掉的奇怪符号，如 @cc_on，这是特殊的 JavaScript 编译器命令，将在下一期针对 XMLHttpRequest 的文章中详细讨论。这段代码的核心分为三步：

1. 建立一个变量 xmlHttp 来引用即将创建的 XMLHttpRequest 对象。
2. 尝试在 Microsoft 浏览器中创建该对象：
   • 尝试使用 Msxml2.XMLHTTP 对象创建它。
   • 如果失败，再尝试 Microsoft.XMLHTTP 对象。
3. 如果仍然没有建立 xmlHttp，则以非 Microsoft 的方式创建该对象。

最后，xmlHttp 应该引用一个有效的 XMLHttpRequest 对象，无论运行什么样的浏览器。

发送请求并指定回掉函数:

function callServer() ...{
  // Get the city and state from the web form
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  // Only go on if there are values for both fields
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;
  // Build the URL to connect to
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
  // Open a connection to the server
  xmlHttp.open("GET", url, true);
  // Setup a function for the server to run when it's done
  xmlHttp.onreadystatechange = updatePage;
  // Send the request
  xmlHttp.send(null);
}

处理服务器响应:

function updatePage() ...{
  if (xmlHttp.readyState == 4) ...{
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
  }
}

以上为ajax的初步知识,待续中....