AJax技术

ajax入门详解(2)

字号+ 作者:H5之家 来源:H5之家 2015-11-04 16:00 我要评论( )

request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catc

 request = new XMLHttpRequest();
 } catch (trymicrosoft) {
  try {
   request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
   try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (failed) {
    request = false;
   }
  }
 }
 return request;

}
/script>
  一定要理解这些步骤:
  创建一个新变量 request 并赋值 false。后面将使用 false 作为判定条件,它表示还没有创建 XMLHttpRequest 对象。
  ·增加 try/catch 块:
  ·尝试创建 XMLHttpRequest 对象。
    1、如果失败(catch (failed))则保证 request 的值仍然为 false。
    2、检查 request 是否仍为 false(如果一切正常就不会是 false)。
  ·如果出现问题则request 返回 false。

此外,在上面的代码中,我们是不是注意到了一个问题,就是当request = new XMLHttpRequest();出现异常的时候,在catch语句中我们用了request = new ActiveXObject("Msxml2.XMLHTTP");和request = new ActiveXObject("Microsoft.XMLHTTP");等语句进行对象获取,这是针对IE浏览器而进行的操作,因为IE浏览器对 XMLHttpRequest 版本有不同的称呼。事实上,它将其称为几种 不同的东西。如果使用较新版本的 Internet Explorer,则需要使用对象 Msxml2.XMLHTTP,而较老版本的 Internet Explorer 则使用 Microsoft.XMLHTTP。我们需要支持这两种对象类型(同时还要支持非 Microsoft 浏览器)。

l         用 XMLHttpRequest 发送请求
  得到请求对象之后就可以进入请求/响应循环了。记住,XMLHttpRequest 惟一的目的是让您发送请求和接收响应。其他一切都是CSS 或页面中其他代码的工作:改变用户界面、切换图像、解释服务器返回的数据。准备好 XMLHttpRequest 之后,就可以向服务器发送请求了。
  Ajax 采用一种沙箱安全模型。因此,Ajax 代码(具体来说就是 XMLHttpRequest 对象)只能对所在的同一个域发送请求。如果让 Ajax 代码在 上运行,则必须 中运行的脚本发送请求。
  设置服务器 URL
  首先要确定连接的服务器的 URL。这并不是 Ajax 的特殊要求,但仍然是建立连接所必需的。多数应用程序中都会结合一些静态数据和用户处理的表单中的数据来构造该 URL。比如,下列 JavaScript 代码获取电话号码字段的值并用其构造 URL。

代码2: 建立请求 URL

script language="javascript" type="text/javascript">
function getCustomerInfo() {
 var phone = document.getElementById("phone").value;
 var url = "/cgi-local/lookupCustomer.jsp?phone=" + escape(phone);
}
/script>
  首先,代码创建了一个新变量 phone,并把 ID 为 “phone” 的表单字段的值赋给它。下列代码展示了这个表单的 XHTML,其中可以看到 phone 字段及其 id 属性。   

代码3: Break Neck Pizza 表单

body>
 <form action="POST">
  <p>Enter your phone number:
   <input type="text" size="14" onChange="getCustomerInfo();" />
  </p>
  <p>Your order will be delivered to:</p>
  <div></div>
  <p>Type your order in here:</p>
  <p><textarea rows="6" cols="50"></textarea></p>
  <p><input type="submit" value="Order Pizza" /></p>
 </form>
/body>
  还要注意,当用户输入电话号码或者改变电话号码时,将触发getCustomerInfo() 方法。该方法取得电话号码并构造存储在 url 变量中的 URL 字符串。由于 Ajax 代码是沙箱型的,因而只能连接到同一个域,实际上 URL 中不需要域名。该例中的脚本名为 /cgi-local/lookupCustomer.jsp。最后,电话号码作为 GET 参数附加到该脚本中:"phone=" + escape(phone)。 

 

 

打开请求

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 网页注册表单的网页设计技巧

    网页注册表单的网页设计技巧

    2016-02-06 16:00

  • JavaScript学习笔记 (七)

    JavaScript学习笔记 (七)

    2016-01-17 17:17

  • 简述jQuery ajax的执行顺序

    简述jQuery ajax的执行顺序

    2016-01-15 15:21

  • jQuery中ajax的load()与post()方法实例详解

    jQuery中ajax的load()与post()方法实例详解

    2016-01-15 14:11

网友点评
"