BlogJava-AndyZhang-随笔分类-Ajaxhttp://www.blogjava.net/AndyZhang/category/49336.htmlwelcome to java worldzh-cnTue, 09 Aug 2011 08:37:52 GMTTue, 09 Aug 2011 08:37:52 GMT60第一个 AJAX 应用程序http://www.blogjava.net/AndyZhang/archive/2011/08/09/356101.htmlSkyDreamSkyDreamTue, 09 Aug 2011 05:03:00 GMThttp://www.blogjava.net/AndyZhang/archive/2011/08/09/356101.html首先，我们需要一个带有两个文本框的 HTML 表单：用户名和时间。用户名文本框由用户填写，而时间文本框使用 AJAX 进行填写。
　　此 HTML 文件名为 "testAjax.htm"（请注意这个 HTML 表单没有提交按钮！）：我们必须决定何时执行 AJAX 函数。当用户在用户名文本框中键入某些内容时，我们会令函数“在幕后”执行。
         
       <html>
　　<body>
　　<script type="text/javascript">
　　function ajaxFunction()
　　{
　　var xmlHttp;
　　try
　　{
　　// Firefox, Opera 8.0+, Safari
　　xmlHttp=new XMLHttpRequest();
　　}
　　catch (e)
　　{
　　// Internet Explorer
　　try
　　{
　　xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
　　}
　　catch (e)
　　{
　　try
　　{
　　xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
　　}
　　catch (e)
　　{
　　alert("您的浏览器不支持AJAX！");
　　return false;
　　}
　　}
　　}
　　xmlHttp.onreadystatechange=function()
　　{
　　if(xmlHttp.readyState==4)
　　{
　　document.myForm.time.value=xmlHttp.responseText;
　　}
　　}
　　xmlHttp.open("GET","time.asp",true);
　　xmlHttp.send(null);
　　}
　　</script>
　　<form name="myForm">
　　用户: <input type="text" name="username" onkeyup="ajaxFunction();" />      //onkeyup 事件会在键盘按键被松开时发生
　　时间: <input type="text" name="time" />
　　</form>
　　</body>
　　</html>

AJAX - 服务器端的脚本

　　现在，我们要创建可显示当前服务器时间的脚本。
　　responseText 属性会存储从服务器返回的数据。在这里，我们希望传回当前的时间。
　　这是 "time.asp" 的代码：
　　<% response.expires=-1response.write(time)%>
　　注释：Expires 属性可设置在页面缓存失效前页面被缓存的时间（分钟）。Response.Expires=-1 指示页面不会被缓存。

运行您的 AJAX 应用程序

　　请在下面的文本框中键入一些文本，然后单击时间文本框：
　　用户: 时间:
　　时间文本框可在不加载页面的情况下从 "time.asp" 获得服务器的时间！



SkyDream 2011-08-09 13:03 发表评论
]]>如何使用 XMLHttpRequest 对象与服务器进行通信http://www.blogjava.net/AndyZhang/archive/2011/08/09/356100.htmlSkyDreamSkyDreamTue, 09 Aug 2011 04:55:00 GMThttp://www.blogjava.net/AndyZhang/archive/2011/08/09/356100.html在向服务器发送数据之前，我们有必要解释一下 XMLHttpRequest 对象的三个重要的属性。

onreadystatechange 属性

　　onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：
　　xmlHttp.onreadystatechange=function()
　　{
　　// 我们需要在这里写一些代码
　　}
readyState 属性
　　readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
　　这是 readyState 属性可能的值：
　　


0请求未初始化（在调用 open() 之前）
1请求已提出（调用 send() 之前）
2请求已发送（这里通常可以从响应得到内容头部）
3请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4请求已完成（可以访问服务器响应并使用它）
我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成（意味着可获得数据）：
　　xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // 从服务器的response获得数据 } }

responseText 属性

　　可以通过 responseText 属性来取回由服务器返回的数据。
　　在我们的代码中，我们将把时间文本框的值设置为等于 responseText：
　　xmlHttp.onreadystatechange=function()
　　{ if(xmlHttp.readyState==4)
　　{ document.myForm.time.value=xmlHttp.responseText; }
　　}
要想把请求发送到服务器，我们就需要使用 open() 方法和 send() 方法。
　　open() 方法需要三个参数。第一个参数定义发送请求所使用的方法（GET 还是 POST）。第二个参数规定服务器端脚本的 URL。第三个参数规定应当对请求进行异步地处理。
　　send() 方法可将请求送往服务器。如果我们假设 HTML 文件和 ASP 文件位于相同的目录，那么代码是这样的：
　　xmlHttp.open("GET","time.asp",true);
　　xmlHttp.send(null);


SkyDream 2011-08-09 12:55 发表评论
]]>创建 XMLHttpRequest 对象http://www.blogjava.net/AndyZhang/archive/2011/08/09/356098.htmlSkyDreamSkyDreamTue, 09 Aug 2011 04:27:00 GMThttp://www.blogjava.net/AndyZhang/archive/2011/08/09/356098.html<script type="text/javascript">
　　function ajaxFunction()
　　{
　　var xmlHttp;
　　try
　　{
　　// Firefox, Opera 8.0+, Safari
　　xmlHttp=new XMLHttpRequest();
　　}
　　catch (e)
　　{
　　// Internet Explorer
　　try
　　{
　　xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
　　}
　　catch (e)
　　{
　　try
　　{
　　xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
　　}
　　catch (e)
　　{
　　alert("您的浏览器不支持AJAX！");
　　return false;
　　}
　　}
　　}
　　}
　　</script>
        首先声明一个保存 XMLHttpRequest 对象的 xmlHttp 变量。
　　然后使用 XMLHttp=new XMLHttpRequest() 来创建此对象。这条语句针对 Firefox、Opera 以及 Safari 浏览器。假如失败，则尝试针对 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")，假如也不成功，则尝试针对 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。
　　假如这三种方法都不起作用，那么这个用户所使用的浏览器已经太过时了，他或她会看到一个声明此浏览器不支持 AJAX 的提示。
　　注释：上面这些浏览器定制的代码很长，也很复杂。不过，每当您希望创建 XMLHttpRequest 对象时，这些代码就能派上用场，因此您可以在任何需要使用的时间拷贝粘贴这些代码。上面这些代码兼容所有的主流浏览器：Internet Explorer、Opera、Firefox 以及 Safari

SkyDream 2011-08-09 12:27 发表评论
]]>