Ajax提高篇(1)入门
学习目的:理解 Ajax 及其工作原理,构建网站的一种有效方法. Ajax是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 下面是 Ajax 应用程序所用到的基本技术: 从上面可以看出,Ajax不是什么新的技术,而是几个老的技术通过新的方法结合起来,从而实现了新的效果!很多事物都是多元化的,可以说Ajax是一个新技术,也可以说Ajax是一个新的思路,一个新的架构! Ajax的基本工作原理及流程: 在一般的 Web 应用程序中,用户填写表单字段并单击Submit按钮。然后整个表单发送到服务器,服务器将它转发给处理表单的脚本(通常是 PHP 或 Java,也可能是 CGI 进程或者类似的东西),脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的 HTML,也可能是确认页面,或者是具有根据原来表单中输入数据选择的某些选项的页面。当然,在服务器上的脚本或程序处理和返回新表单时用户必须等待。屏幕变成一片空白,等到服务器返回数据后再重新绘制。这就是交互性差的原因,用户得不到立即反馈,因此感觉不同于桌面应用程序。 Ajax 基本上就是把 JavaScript 技术和 然后,服务器将数据返回 JavaScript 代码(仍然在 Web 表单中),后者决定如何处理这些数据。它可以迅速更新表单数据,让人感觉应用程序是立即完成的,表单没有提交或刷新而用户得到了新数据。JavaScript 代码甚至可以对收到的数据执行某种计算,再发送另一个请求,完全不需要用户干预!这就是 XMLHttpRequest 对象: 由于前两年的浏览器大战,使得各种浏览器获得 支持多种浏览器的方式创建 XMLHttpRequest 对象
这段代码的核心分为三步: Ajax中的请求/响应 发出请求:Ajax 应用程序中基本相同的流程:
copy
处理响应: readyState可能返回的值: 0:请求未初始化(还没有调用 1:请求已经建立,但是还没有发送(还没有调用 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。 3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。 4:响应已完成;您可以获取并使用服务器的响应了。 必须知道两点: 1.什么也不要做,直到 2.服务器将把响应填充到
copy
开始的代码使用基本 JavaScript 代码获取几个表单字段的值。然后设置一个asp 脚本作为链接的目标。要注意脚本 URL 的指定方式,city 和 state(来自表单)使用简单的 GET 参数附加在 URL 之后。 然后打开一个连接,这是您第一次看到使用 最后,使用值 简单总结的Ajax的工作流程: javascript获得要向服务器段传递的参数或变量,然后利用创建的XMLHttpRequest 对象发送个服务器段,如果服务器端接受数据并返回数据,则保存在responseText 属性中,最后通过javascript修改DOM,从而实现在客户端无刷新的修改数据。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |