网页更新

更新时间:2023-04-19 06:07:43 阅读：评论：0

我的班级我做主-鬼迷心窍意思

2023年4月19日发(作者：对公司的建议和意见)维普资讯
第２Ｏ卷第１期
现代商贸Ｉ业
ＭｏｄｅｒｎＢｕｓｉｎｅｓｓＴｒａｄｅＩｎｄｕｓｔｒｙ２００８年１月
基于Ａｊａｘ技术的网页更新设计与实现
王福全
（秦皇岛职业技术学院，河北秦皇岛０６６０００）
摘要：简要介绍了Ａｊａｘ技术基本原理与功能，并通过按钮更新实例，探讨了在ＪａｖａＳｅｒｖｅｒｌｅｔ技术条件下，利用
ＡＪＡＸ模式实现Ｗｅｂ页面数据的动态更新的一般方法。
关键词：ＡＪＡＸ；ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ；ＸＭＬ）动态更新
中图分类号：ＴＰ３９３．０７文献标识码：Ａ文章编号：１６７２—３１９８（２０Ｏ８）Ｏ１一Ｏ２７２一Ｏ２
传统的ｗｅｂ页面重载机制已经严重的制约着网络应用
软件的开发，因此，关于页面的载人技术的研究也就成为
ｗｅｂ应用程序设计的关键。然而这种状况一直没能彻底改
变，直到Ａｉａｘ技术的出现。ＡＪＡＸ采用独特的远程脚本调
用技术，可以异步的实现页面数据的更新，彻底解决了传统
页面的重载问题，开启了全新的网页应用程序设计模式。
其典型应用有ｇｏｏｇｌｅ的ＧＭａｉｌ、ＧｏｏｇｌｅＳｕｇｇｅｓｔ等。在国
内，Ａｊａｘ技术已经成功的应用到网易的邮件系统。然而，通
过典型的应用我们也不难发现一个问题，ａｊａｘ成熟的应用
主要集中在一些有相当实力的公司。对于大众化的应用来
ｊ糟产麓口ｌ
量Ｉ ▲
’ Ｉ
Ｊ・ｌｓｃｒｉＰｔ＊ｍａｌ＂Ｘｔ＋ＣｓＳＩｍ
＿Ｉ＾ｊ・ｌ亭｛肇ｌ
ｍｒ请舭ｔ伯输
ｌｔｕ一
ｌｌ１熏曩奇牟
『竺Ｉ・ｂ靳碱“Ｌ＿舟－ｌ
ｌ ●
＜ｈｔｍｌ＞＜ｈｅａｄ＞＜ｍｅｔａｈｔｔｐ—ｅｑｕｉｖ一”ｃｏｎｔｅｎｔ—
讲，探索一下ａｊａｘ技术的应用模式特别是页面的更新模式
设计，无疑有助于Ａｉａｘ技术推广和发展。
Ａｉａｘ技术的基本原理：Ａｊａｘ是一个结合了Ｊａｖａ技术、
ＸＭＬ、以及ＪａｖａＳｃｒｉｐｔ的ｗｅｂ开发模式，可以让你构建基于
Ｊａｖａ技术的Ｗｅｂ应用。和传统的ｗｅｂ更新技术不同，如图
ｔｙｐｅ”ｃｏｎｔｅｎｔ＝”ｔｅｘｔ／ｈｔｍｌ；ｃｈａｒｓｅｔ＝ＵＴＦ一８”＞
＜ｓｃｒｉｐｔｓｒｃ＝”／ａｄｓｅｎｓｅ／ｓｔａｔｉｃ／ｅｎ—ＵＳ／ｕｒｃｈｉｎ．ｊＳ”ｔｙｐｅ
一
”ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”＞＜／ｓｃｒｉｐｔ＞
＜ｓｃｒｉｐｔｔｙｐｅ一”ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”＞
ｕａｃｃｔ＝”ＵＡ一１８００６—１”；
所示，相当于在客户端和服务器之间加了一个中间层，即
Ａｉａｘ引擎。这样，并不是所有的用户请求都提交给服务器，
些数据的验证和处理由Ａｉａｘ自己来做，只有确实需要从
一
ｕｔｃｐ＝”／ａｄｓｅｎｓｅ／”；
ｕａｎｃｈｏｒ＝１；
ｕｃｃｎ￣”ｓｏｕｒｃｅｉｄ”；
一
服务器读取新数据时，才由客户端通过ＪａｖａＳｃｒｉｐｔ调用Ａｉａｘ
引擎向服务器端发出Ｈｔｔｐ请求，但它并不等待请求的响
应，用户可以继续浏览或交互。当服务端的数据以ＸＭＬ形
式返回时，Ａｉａｘ引擎接收数据，并指定ＪａｖａＳｃｒｉｐｔ函数来完
成相应的处理或页面的更新，而不是刷新整个页面，从而实
ｕｃｍｄ￣”ｍｅｄｉｕｍｌｆ－
ｕｃｓｒ￣“ｓｕｂｉｄ”；
ｕｃ繁华的近义词ｔｒ－－”ｔｅｒｍ”；
ｕｃｃｔ￣”ｃｏｎｔｅｎｔ”；
ｕｃｉｄ＝”Ｕｉｄ”；
一
现用户操作与服务器响应的异步化。
客户螭
ｕｃｎｏ￣－”ｎｏｏｖｅｒｒｉｄｅ”；
ｕｒｃｈｉｎＴｒａｃｋｅｒ（）；
＜／ｓｃｒｉｐｔ＞
＜ｔｉｔｌｅ＞ＧｏｏｇｌｅＡｄＳｅｎｓｅ
ｓ毂括
Ｉ用户接ａｌ
ｔ蒲碍４ｎ传输］－。
Ｉ，ｌｈ麓务墨
推介＜／ｔｉｔｌｅ＞
＜ｌｉｎｋｒｅｌ＝”ｓｔｙｌｅｓｈｅｅｔ”ｔｙｐｅ＝＝”ｔｅｘｔ／ｃｓｓ”ｈｒｅｆ＝”／ａｄ－
ｓｅｎｓｅ／ｕｉ－－ｒｅｓｏｕｒｃｅｓ／４２８１４Ｏ５９Ｏ１一ｓｔｙｌｅ．ａｓｓ”＞
＜ｌｉｎｋｒｅｌ＝”ｓｔｙｌｅｓｈｅｅｔ”ｔｙｐｅ＝”ｔｅｘｔ／ｃｓｓ”ｈｒｅｆ＝”／ａｄ－
ｓｅｎｓｅ／ｕｉ－－ｒｅｓｏｕｒｃｅｓ／５９６８５４１３６一ｔａｂｎａｖｂａｒ．ａｓｓ”＞
＜ｌｉｎｋｒｅｌ＝”ｓｔｙｌｅｓｈｅｅｔ”ｔｙｐｅ＝＝”ｔｅｘｔ／ｃｓｓ”ｈｒｅ［” ａｄ－
ｓｅｎｓｅ／ｕｉ－－ｒｅｓｏｕｒｃｅｓ／２２６９６７００６９一ｓｕｂｍｅｎｕ．ＣＳＳ”＞
＜ｌｉｎｋｒｅｌ＝”ｓｔｙｌｅｓｈｅｅｔ”ｔｙｐｅ＝”ｔｅｘｔ／ｃｓｓ”ｈｒｅｆ＝”／ａｄ－
◆ 千
ｌ数擐仓库
羼务矗螭
基于Ａｉａｘ技术的页面数据更新的实例。
Ａｉａｘ技术是组合技术，它只是一个工作模式但并未限
－ｒｅｓｏｕｒｃｅｓ／１０６４０６９７９３－－ｒｅｐｏｒ台式机显卡在哪ｔ中国电信英文ｓ．ａｓｓ”＞ｓｅｎｓｅ／ｕｉ
定具体的方法。下面我们通过设计一个按钮更新页面实例
来探讨在ＪａｖａＳｅｒｖｌｅｔ技术条件下，利用Ａｊａｘ实现页面数据
＜ｌｉｎｋｒｅｌ＝”ｓｔｙｌｅｓｈｅｅｔ”ｔｙｐｅ＝”ｔｅｘｔ／ｃｓｓ”ｈｒｅｆ＝”／ａｄ－
动态更新的方法，共需要创建三个文件，代码如下：
Ｉｎｄｅｘ．Ｊｓｐ文件代码：
．．——
ｓｅｎｓｅ／ｕｉ－ｒｅｓｏｕｒｃｅｓ／２２８３８７５Ｏ２７一ｐａｇｅｒ．ａｓｓ”＞
＜ｌｉｎｋｒｅｌ＝”ｓｔｙｌｅｓｈｅｅｔ”ｔｙｐｅ＝＝”ｔｅｘｔ／ｃｓｓ”ｈｒｅｆ＝”／ａｄ－
２７２．－——

维普资讯
笫２ｏ卷第１期
现代商贸工业
ＭｏｄｅｒｎＢｕｓｉｎｅｓｓＴｒａｄｅＩｎｄｕｓｔｒｙ２００８年１月
ＰｒｉｎｔＷｒｉｔｅｒｏｕｔ—ｒｅｓｐｏｎｓｅ。ｇｅｔＷｒｉｔｅｒ（）；
ｏｕｔ．ｗｒｉｔｅ（ｓｂ．ｔｏＳｔｒｉｎｇ（））；
ｏｕｔ。ｃｌｏｓｅ（）；
ｓｅｎｓｅ／ｕｊ—ｒｅｓｏｕｒｃｅｓ／２Ｏ６Ｏ１７４６６一ｔａｘ．ＣＳＳ”＞
＜ｌｉｎｋｒｅｌ＝”ｓｔｙｌｅｓｈｅｅｔ”ｔｙｐｅ＝”ｔｅｘｔ／ｃｓｓ”ｈｒｅｆ＝”／ａｄ—
ｓｅｎｓｅ／ｕｉ－－ｒｅｓｏｕｒｃｅｓ／５５２５４６６９１一ｏｖｅｒｖｉｅｗｒｅｐｏｒｔ。ＣＳＳ”＞
＜ｌｉｎｋｒｅｌ＝”ｓｔｙｌｅｓｈｅｅｔ”ｔｙｐｅ＝’’ｔｅｘｔ／ｃｓｓ”ｈｒｅｆ＝”／ａｄ—
ｓｅｎｓｅ／ｕｉ－－ｒｅｓｏｕｒｃｅｓ／３８６４９３９２８５一ＬＴＲ。ＣＳＳ”＞
＜ｌｉｎｋｒｅｌ＝”ｓｔｙｌｅｓｈｅｅｔ”ｔｙｐｅ一”ｔｅｘｔ／ｃｓｓ”ｈｒｅｆ＝”／ａｄ—
）｝
Ａｊａｘ技术的组合创新，带给我们的不仅仅是页面的更
新方法，更是编程观念和开发模式的创新。相信，Ａｊａｘ技术
ｓｅｎｓｅ／ｕｉ—ｒｅｓｏｕｒｃｅｓ／３３２２３６９１００一ｓｔａｒ．ＣＳＳ”＞
＜ｓｃｒｉｐｔｔｙｐｅ一”ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”＞
ｆｕｎｃｔｉｏｎＡＳｗｉｎｄｏｗＯｎＬｏａｄ（ｈａｎｄｌｅｒ）｛
ｖａｒｐｒｅｙ—ｗｉｎｄｏｗ．ｏｎｌｏａｄ；
ｉｆ（ｐｒｅｖ）｛
ｗｉｎｄｏｗ。ｏｎｌｏａｄ＝ｆｕｎ
｝
ｗｅｂ．ｘｍｌ文件代码
＜？ｘｍｌｖｅｒｓｉｏｎ＝“１．０“ｅｎｃｏｄｉｎｇ＝”ＵＴＦ一８”？＞
＜！ＤＯＣＴＹＰＥｗｅｂ—ａｐｐＰＵＢＬＩＣ”一／／ＳｕｎＭｉｃｒ—
ｏｓｙｓｔｅｍｓ，Ｉｎｃ．／／ＤＴＤＷｅｂＡｐｐｌｉｃａｔｉｏｎ２．３／／ＥＮ””ｈｔｔｐ：／／
ｊａｖａ。ｓｕｎ．ｃｏｍ／ｄｔｄ／ｗｅｂ－－ａｐｐ＿２
３．ｄｔｄ”＞
＜ｗｅｂ—ａｐｐ＞
＜ｓｅｒｖｌｅｔ＞
＜ｓｅｒｖｌｅｔ－－ｎａｍｅ＞ＡｊａｘＵｓｅ＜／ｓｅｒｖｈｔ－－ｎａｍｅ＞
＜ｓｅｒｖｈｔ—ｃｌａｓｓ＞ｅｏｍ．ｓｅｒｖｌｅｔ．ＡｊａｘＵｓｅ＜／ｓｅｒｖｌｅｔ～
ｃｌａｓｓ；＞
＜／ｓｅｒ烟花画法ｖｌｅｔ＞
＜ｓｅｒｖｌｅｔ—ｍａｐｐｉｎｇ＞
＜ｓｅｒｖｌｅｔ－－ｎａｍｅ＞ＡｊａｘＵｓｅ＜／ｓｅｒｖｌｅｔ－－ｎａｍｅ＞
＜ｕｒｌ—ｐａｔｔｅｒｎ＞／ｓｅｒｖｌｅｔ／ＡｊａｘＵｓｅ＜／ｕｒｌ－－ｐａｔｔｅｒｎ＞
＜／ｓｅｒｖｌｅｔ－－ｍａｐｐｉｎｇ＞
＜／ｗｅｂ—ａｐｐ＞
ＡｊａｘＵｓｅｒ．ｊａｖａ文件代码
ｐａｃｋａｇｅｃｏｍ．ｓｅｒｖｌｅｔ；
ｉｍｐｏｒｔｊａｖａｘ．ｓｅｒｖｌｅｔ．； ‘
ｉｍｐｏｒｔｊａｖａｘ．ｓｅｒｖｌｅｔ．ｈｔｔｐ．；
ｉｍｐｏｒｔｊａｖａ．ｉｏ．；
ｉｍｐｏｒｔｊａｖａ．１ａｎｇ．Ｅｘｃｅｐｔｉｏｎ；
ｐｕｂｌｉｃｃｌａｓｓＡｊａｘＵｓｅｅｘｔｅｎｄｓＨｔｔｐＳｅｒｖｌｅｔ｛
ｐｒｉｖａｔｅＳｅｒｖ描写雨的成语ｌｅｔＣ０ｎｔｅｘｔｃｏｎｔｅｘｔ；
ｐｕｂｌｉｃｖｏｉｄｉｎｋ（ＳｅｒｖｌｅｔＣｏｎｆｉｇｃｏｎｆｉｇ）ｔｈｒｏｗｓＳｅｒｖｌｅ－
ｔＥｘｃｅｐｔｉｏｎ｛
ｔｈｉｓ．ｃｏｎｔｅｘｔ—ｃｏｎｆｉｇ．ｇｅｔＳｅｒｖｌｅｔＣｏｎｔｅｘｔ（）；
｝
ｐｕｂｌｉｃｖｏｉｄｄｏＧｅｔ（ＨｔｔｐＳｅｒｖｌｅｔＲｅｑｕｅｓｔｒｅｑｕｅｓｔ，ＨｔｔｐＳ－
ｅｒｖｈｔＲｅｓｐｏｎｓｅｒｅｓｐｏｎｓｅ）
ｔｈｒｏｗｓＩＯＥｘｃｅｐｔｉｏｎ，ＳｅｒｖｌｅｔＥｘｃｅｐｔｉｏｎ｛
Ｓｔｒｉｎｇｔａｒｇｅｔｌｄ＝ｒｅｑｕｅｓｔ．ｇｅｔＰａｒａｒｎｅｔｅｒ（”ｉｄ”）；
ＳｔｒｉｎｇＢｕｆｆｅｒｓｂ＝ｎｅｗＳｔｒｉｎｇＢｕｆｆｅｒ（“＜ｍｅｓｓａｇｅ＞”）；
ｒｅｓｐｏｎｓｅ．ｓｅｔＣｏｎｔｅｎｔＴｙｐｅ（”ｔｅｘｔ／ｘｍｌ”）；
ｒｅｓｐｏｎｓｅ．ｓｅｔＨｅａｄｅｒ（“Ｃａｃｈｅ—Ｃｏｎｔｒｏｌ”，”ｎｏ—
ｃａｃｈｅ”）；
ｓｂ．ａｐｐｅｎｄ（”＜ｄａｔａ＞Ｈｅｂｅｉ＜／ｄａｔａ＞＜ｄａｔａ＞Ｑｉｎ－
ｈｕａｎｇｄａｏ＜／ｄａｔａ＞”）；
ｓｂ．ａｐｐｅｎｄ（”＜／ｍｅｓｓａｇｅ＞”）；
Ｓｙｓｔｅｍ．ｏｕｔ．ｐｒｉｎｔｌｎ（ｓｂ．ｔｏＳｔｒｉｎｇ（））；
必然会带给我们更为广泛的ｗｅｂ应用。
注意事项
（１）保障Ｊａｖａ５与ＡｐａｃｈｅＴｏｍｃａｔ系统环境的正确配
置。
（２）将ａｊａｘ目录目录部署至ｗｅｂａｐｐｓ目录，如图：
（３）启动Ｔｏｍｃａｔ失去与得到，在ＩＥ地址栏软件的ＵＲＬ应为：ｈｔ—
ｔｐ：／／１２７。ｏ。ｏ。１：８０８０／￣ａｘ／，如图：
｜肇＆零爨黧蹙ｌｌｌｊ童｜萎｜
如填簿蝴岫：一… 小打．－＝一… ｏ．０．１：删＝～＝删一一－…一一；；＝；一…… …一… ……
擘避趣 ≮ ？｜量ｌ
输凡散宇墁垃ａｘ将会在曩面Ｉ’寒捩职服务搴埔相应，＿＿■＿＿—‘＿ｉ
Ｈｅｂｅｉ
（４）输入数字０时，服务器返回值为ＨｅＢｅｉ，输入数字１
时，服务器返回ＱｉｎＨｕａｎｇＤａｏ
（５）ｍｄｉｖ．ｉｎｎｅｒＨＴＭＬ＝”＜ｄｉｖ＞”＋ｓｔｒｒｄｏｃｕｍｅｎｔ．
ｇｅｔＥｈｍｅｎｔＢｙＩｄ（ｕｓｅｒｉｄ）．ｖａｈ￣ｅ－］＋”＜／ｄｉｖ＞”中红色部分是
我新增加的，它的功能是从ＩＤ号为ｄｓｅｒｉｄ的文本框中取出
值，函数ｐａｒｓｅＭｅｓｓａｇｅ（）ｌ的作用是将服务器返回的数组值
进行显示与格式化，文本框中的数值代表着从服务端返回
的某个数组元素值。
（６）可直接访问ｈｔｔｐ：／／１２７．０．ｏ．１：８０８０／￣ａｘ／ｓｅｒｖｌｅｔ／
ＡｊａｘＵｓｅ，效果如图：
毫爱蘧毫 ≮ｉ≥ ｊ
攮螋！一
懑
《ｍｅｓｓａｇｅ＞
＜ｄａｔａ＞Ｈｅｂｅ｜＜／ｄａｔａ＞
＜ｄａｃａ）Ｑｉｎｈｕ凸ｎｇｄａ０＜／ｄａｔａ＞
＜／ｍｅｓｓｇｅ＞
参考文献
［１］游丽贞等．ｆｉｘ引擎的原理和应用［刀．微计算机信息，２００６，（２２）：２
～
３．
［２］方俊．Ａｊａｘ引擎设计和应用［刀电脑与信息技术，２００６，１４（３）．
［３３扬圆瑞，张思博．基于ＡＪＡＸ的Ｗｅｂ应用架构设计［Ｊ］．现代电子
技术，２００６，（１５）．
一
２７３—

明天一定-美丽上海

本文发布于:2023-04-19 06:07:43，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/zhishi/a/168185566345552.html

本文word下载地址：网页更新.doc

本文 PDF 下载地址：网页更新.pdf

上一篇：书香网

下一篇：返回列表

标签：网页更新

留言与评论（共有 0 条评论）