简单简洁 Ajax 实例入门

来源：互联网发布：最美乡村网络评选编辑：程序博客网时间：2024/06/05 06:15

Ajax 入门小实例

( huangwen9@21cn.com )

这个例子仅仅让初学者对Ajax有个认识，写这个的东东的原因是我认识的一个自称有1年多Ajax开发经验的J2EE程序员,不知道如何用记事本写一个简单的Ajax应用。

//在读这篇小文章的时候希望你已经具有 Javascript和HTML的一点知识

文中出现的代码皆为完整的代码,拷贝之后可直接运行。

解释Ajax最直接的是网页的局部刷新，就是说我们可以只刷新显示数据的表格而不用刷新整个页面。
例如：显示最新新闻的时候

我们通常使用Javascript来实现Ajax功能。其中的主角是一个名字为XMLHttpRequset的对象。

通过这个对象，我们可以直接使用脚本通过 HTTP(S) 来访问服务器，并存储返回的结果；通过Javascript操作HTML对象把返回的结果更新到页面中去。而这个过程不需要整个页面的刷新。

先来看一个小例子:
(使用Javascript来改变一个Div的内容)

testA.html
---------------------------------------------------------------------------------------

<html><head> <title> TestA </title> <mce:script language="javascript"></mce:script></head><p><input type="text" name="userInput" style="length:300px" mce_style="length:300px" /><input type="button" onclick="javascript:fillContainer();" value="Go Go Go" /></p><body><p>Message:</p><div id="msgContainer" style="border:1px solid #000000" mce_style="border:1px solid #000000">Input Message</div></body></html>

---------------------------------------------------------------------------------------

现在呢，我们通过xmlHttpRequest来访问Google进行搜索,然后把结果显示在页面中。

testB.html
----------------------------------------------------------

<html><head> <title> TestB </title><mce:script language="javascript"></mce:script></head><body><p><input type="text" name="userInput" style="length:300px" mce_style="length:300px" /><input type="button" onclick="javascript:goSearch();" value="Go Go Go" /></p><p>Message:</p><div id="msgContainer" style="border:1px solid #000000" mce_style="border:1px solid #000000">Input Message</div></body></html>

简单 简洁 Ajax 实例 入门

简单简洁 Ajax 实例入门