简单简洁 Ajax 实例入门

最新推荐文章于 2024-07-25 10:06:21 发布

huangwen9

最新推荐文章于 2024-07-25 10:06:21 发布

阅读量388

点赞数

文章标签： ajax xmlhttprequest javascript function border button

本文链接：https://blog.csdn.net/huangwen9/article/details/4180245

版权

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" οnclick="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" οnclick="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>

huangwen9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单简洁 Ajax 实例入门

Ajax 入门小实例 ( huangwen9@21cn.com ) 这个例子仅仅让初学者对Ajax有个认识，写这个的东东的原因是我认识的一个自称有1年多Ajax开发经验的J2EE程序员,不知道如何用记事本写一个简单的Ajax应用。//在读这篇小文章的时候希望你已经具有 Javascript和HTML的一点知识文中出现的代码皆为完整的代码,拷贝之后可直接运行。解释A
复制链接

扫一扫