精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网站开发>ajax教程>正文

使用javascript和Ajax发出异步请求


来源: 时间:06-12-06 点击: 点击这里收藏本文

欢迎使用沙箱

Ajax 采用一种沙箱安全模型。因此,Ajax 代码(具体来说就是 XMLHttpRequest 对象)只能对所在的同一个域发送请求。以后的文章中将进一步介绍安全和 Ajax,现在只要知道在本地机器上运行的代码只能对本地机器上的服务器端脚本发送请求。如果让 Ajax 代码在 www.breakneckpizza.com 上运行,则必须 www.breakneck.com 中运行的脚本发送请求。

设置服务器 URL

首先要确定连接的服务器的 URL。这并不是 Ajax 的特殊要求,但仍然是建立连接所必需的,显然现在您应该知道如何构造 URL 了。多数应用程序中都会结合一些静态数据和用户处理的表单中的数据来构造该 URL。比如,清单 7 中的 JavaScript 代码获取电话号码字段的值并用其构造 URL。

清单 7. 建立请求 URL

<script language="javascript" type="text/javascript">

var request = false;

try {

request = new XMLHttpRequest();

} catch (trymicrosoft) {

try {

request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (othermicrosoft) {

try {

request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (failed) {

request = false;

}

}

}

if (!request)

alert("Error initializing XMLHttpRequest!");

function getCustomerInfo() {

var phone = document.getElementById("phone").value;

var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

}

</script>

这里没有难懂的地方。首先,代码创建了一个新变量 phone,并把 ID 为 “phone” 的表单字段的值赋给它。清单 8 展示了这个表单的 XHTML,其中可以看到 phone 字段及其 id 属性。

清单 8. Break Neck Pizza 表单

<body>

<p><img src="breakneck-logo_4c.gif" alt="Break Neck Pizza" /></p>

<form action="POST">

<p>Enter your phone number:

<input type="text" size="14" name="phone" id="phone"

onChange="getCustomerInfo();" />

</p>

<p>Your order will be delivered t</p>

<div id="address"></div>

<p>Type your order in here:</p>

<p><textarea name="order" rows="6" cols="50" id="order"></textarea></p>

<p><input type="submit" value="Order Pizza" id="submit" /></p>

</form>

</body>

还要注意,当用户输入电话号码或者改变电话号码时,将触发 清单 8 所示的 getCustomerInfo() 方法。该方法取得电话号码并构造存储在 url 变量中的 URL 字符串。记住,由于 Ajax 代码是沙箱型的,因而只能连接到同一个域,实际上 URL 中不需要域名。该例中的脚本名为 /cgi-local/lookupCustomer.php。最后,电话号码作为 GET 参数附加到该脚本中:"phone=" + escape(phone)。

如果以前没用见过 escape() 方法,它用于转义不能用明文正确发送的任何字符。比如,电话号码中的空格将被转换成字符 ,从而能够在 URL 中传递这些字符。

可以根据需要添加任意多个参数。比如,如果需要增加另一个参数,只需要将其附加到 URL 中并用 “与”(&)字符分开 [第一个参数用问号(?)和脚本名分开]。

打开请求

有了要连接的 URL 后就可以配置请求了。可以用 XMLHttpRequest 对象的 open() 方法来完成。该方法有五个参数:

* request-type:发送请求的类型。典型的值是 GET 或 POST,但也可以发送 HEAD 请求。

* url:要连接的 URL。

* asynch:如果希望使用异步连接则为 true,否则为 false。该参数是可选的,默认为 true。

* username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。

* password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。

通常使用其中的前三个参数。事实上,即使需要异步连接,也应该指定第三个参数为 “true”。这是默认值,但坚持明确指定请求是异步的还是同步的更容易理解。

9 7 3 1 2 3 4 5 6 7 8 4 8 :

  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.