ajax基础之ajax交互示例

翻译|其它|编辑:郝浩|2008-03-20 13:01:04.000|阅读 810 次

概述:

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>


不同于标准Web客户中所用的标准请求/响应方法,Ajax应用的做法稍有差别。

1. 一个客户端事件触发一个Ajax事件。从简单的onchange事件到某个特定的用户动作,很多这样的事件都可以触发Ajax事件。可以有如下的代码:
<input type="text"d="email" name="email" onblur="validateEmail()";>

2. 创建XMLHttpRequest对象的一个实例。使用open()方法建立调用,并设置URL以及所希望的HTTP方法(通常是GET或POST)。请求实际上通过一个send()方法调用触发。代码如下所示:
var xmlHttp;
function validateEmail() {
 var email = document.getElementById("email");
 var url = "validate?email=" + escape(email.value);
 if (window.ActiveXObject) {
 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 else if (window.XMLHttpRequest) {
 xmlHttp = new XMLHttpRequest();
 }
xmlHttp.open("GET", url);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}

3. 向服务器做出请求。可能调用servlet、CGI脚本,或者任何服务器端技术。

4. 服务器可以做你想做的事情,包括访问数据库,甚至访问另一个系统。

5. 请求返回到浏览器。Content-Type设置为text/xml——XMLHttpRequest对象只能处理text/html类型的结果。在另外一些更复杂示例中,响应可能涉及更广,还包括JavaScript、DOM管理以及其他相关的技术。需要说明,你还需要设置另外一些首部,使浏览器不会在本地缓存结果。为此可以使用下面的代码:
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");[1]

6. 在这个示例中,XMLHttpRequest对象配置为处理返回时要调用callback()函数。这个函数会检查XMLHttpRequest对象的readyState属性,然后查看服务器返回的状态码。如果一切正常,callback()函数就会在客户端上做些有意思的工作。以下就是一个典型的回调方法:
function callback() {
 if (xmlHttp.readyState == 4) {
  if (xmlHttp.status == 200) {
    //do something interesting here
  }
 }
}

可以看到,这与正常的请求/响应模式有所不同,但对Web开发人员来说,并不是完全陌生的。显然,在创建和建立XMLHttpRequest对象时还可以做些事情,另外当“回调”函数完成了状态检查之后也可以有所作为。

注:get与post的区别
二才的区别在于发送数据的大小, 浏览器和服务器会限制URL的长度URL用于向服务器发送数据,因此get只能发送少量数据,一般情况下,可以使用get从服务器获取数据,但是要避免使用GET调用改变服务器上的状态,因为这样做很不安全。

一般地,当改变服务器上的状态时应当使用POST方法。不同于GET,需要设置XML- HttpRequest对象的Content-Type首部,如下所示:

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
post与get不同,不会爱数据量大小的限制。
标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:WEB开发技术知识库

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP