一个简单的AJAX实例

最新推荐文章于 2019-12-16 15:18:27 发布
转载 最新推荐文章于 2019-12-16 15:18:27 发布 · 741 阅读 · 1
文章标签：

#ajax #xmlhttprequest #function #mozilla #html #javascript

本文介绍了一个使用 AJAX 技术实现的 HTML 输入提示功能。该功能通过客户端 JavaScript 在用户输入的同时请求服务器端数据，并实时更新建议列表。服务器端采用 ASP 和 VBS 脚本来响应请求并提供匹配项。

AJAX HTML页面
　　这是一个HTML网页。它包括了一个简单的HTML表单和关联JS的link
<html>
<head>
<script src="clienthint.js"></script>
</head><body><form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form><p>Suggestions: <span id="txtHint"></span></p> </body>
</html>The JavaScript code is listed below.
JS代码在下面

　　AJAX 的 JS
　　这是JS代码，被保存在"clienthint.js"文件中

var xmlHttp
function showHint(str)
{ 
if (str.length > 0)
{ 
var url="gethint.asp?sid=" + Math.random() + "&q=" + str
xmlHttp=GetXmlHttpObject(stateChanged)
xmlHttp.open("GET", url , true)
xmlHttp.send(null)
} 
else
{ 
document.getElementById("txtHint").innerHTML=""
} 
} 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
} 
} 
function GetXmlHttpObject(handler)
{ 
var objXmlHttp=null
if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("This example doesnt work in Opera") 
return; 
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{ 
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"
} 
try
{ 
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler 
return objXmlHttp
} 
catch(e)
{ 
alert("Error. Scripting for ActiveX might be disabled") 
return 
} 
} 
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler 
return objXmlHttp
}
}

　　AJAX 服务端页面
　　服务端页面被JS所调遣，是一名为"gethint.asp"的ASP文件，页面是用VBS来针对IIS所写的。它可以被轻松的写成PHP或是一些其他的服务语言，它只是检查了名字组并将相吻合的名字返回给客户端：
 

dim a(30)
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
q=request.querystring("q")if len(q)>0 then
  hint=""
  for i=1 to 30
    x1=ucase(mid(q,1,len(q)))
    x2=ucase(mid(a(i),1,len(q)))
    if x1=x2 then
      if hint="" then
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
  next
end if 
if hint="" then 
  response.write("no suggestion")
else
  response.write(hint)
end if 


 
一个非常简单的ajax例子
07-31
一个非常简单的ajax例子 可以直接运行 其中包括两个javascript 从中可以看到如何创建XMLHttpRequest对象 对初学AJAX的会用帮助
ajax的一个简单例子
04-25
ajax的一个简单例子,这是一个小例子,可以仅供参考
ajax例子ajax例子
05-18
ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子
高手莫入--最简单的AJAX实例
weixin_34384915的博客
09-22 286
高手莫入--最简单的AJAX实例   学习AJAX参考了网上大量的实例，学得很艰难，代码可读性太差。本例就是一个入门的Hello World，类似本例的程序网上也许有，但是绝非抄袭。   本例很模仿用户注册，输入过程中动态检查错误实时显示，效果图如下：   对着上面这个图，来写代码。   一、创建Java Web项目，并创建两个页面   a.html &lt;ht...
一个简单的AJAX示例(转)
weixin_34187862的博客
01-08 319
转载自：http://www.cnblogs.com/rubylouvre/archive/2013/01/08/2851051.html，为了防备面试，备份一份吧！！ 虽然现在有了框架，许多AJAX调用直接调用它们的API就可用。但有些极端情况，比如面试，比如第三方应用不想加载这些库，我们就只有自己写。这时想必有许多人要疯狂google，百度了。网上太多垃圾信息，我还是在自己博客上保存一份吧。...
一个简单的AJAX实例网页源代码.rar
08-06
- **服务器端**：假设是一个简单的PHP或Node.js服务，接收到请求后返回一些数据，例如一段JSON格式的文本。 5. **跨域问题**： - AJAX请求受到同源策略限制，即只能向同源（协议+域名+端口相同）的服务器发送请求...
非常简单的Ajax请求实例附
10-23
在给出的文档内容中，我们了解到一个简单的Ajax请求实例，该实例说明了如何利用原生JavaScript的XMLHttpRequest对象来构建异步请求。这个对象是Ajax通信的核心，因为它允许JavaScript在后台向服务器发送请求，并处理...
分享Ajax创建简单实例代码
10-23
今天，我们将分享一个创建Ajax简单实例的代码示例，帮助初学者理解如何在实际项目中应用Ajax。 首先，我们需要了解什么是XMLHttpRequest对象。XMLHttpRequest是一个JavaScript对象，它提供了一种在后台与服务器交换...
精选资源
ajax实例
01-08
在AJAX实例中，我们看到一个使用JavaScript库jQuery的示例。jQuery提供了简化AJAX操作的API，例如`$.ajax()`方法。这个方法允许我们配置各种参数来定制请求。以下是对`$.ajax()`方法中各个参数的详细解释： 1. `...
一个简单实现ajax的实例
05-25
【标题】：“一个简单实现ajax的实例” Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新。这个...
简单Ajax实例(带前后台交互)
06-08
附件为Ajax的几个实例，在JSP页面中实现,实现了前后端交互。
Ajax做的一个小例子
03-28
NULL 博文链接：https://zys08.iteye.com/blog/1223960
最简单的ajax例子
liguangqi的专栏
07-13 645
  自从Jesse James Garrett创造了AJAX这个名词，到现在已经过去十八个月了，AJAX几乎让Web开发彻底改头换面。在这一年半的时间里，发生了很多事情，包括Web 2.0的热炒，许多创建或使用富互联网技术公司的诞生或复苏，还有真正动态化的在线软件层出不穷。很明显，AJAX这个名词受到开发业界的广欢迎，已经真正的走入到我们生活中，Web应用程序也达到前所未有的发展。    如此火爆...
一简单的Ajax例子
David's Blog!
03-20 2729
---ajax.html http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" lang="en" dir="ltr">Developing Web Application with Ajax - Example//此函数将在电击"View XML data"链接
Ajax简单实例
01-24 1990
Ajax，异步JavaScript与XML，是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，你可以创建接近本地桌面应用的，直接的、高可用的、更丰富的、更动态的Web用户接口界面。
Ajax实例
pb951028的博客
08-09 767
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script&gt; function loadXMLDoc() {
简单的ajax实例
weixin_42917276的博客
09-17 208
此代码均写在 script中，仅供参考！！！！ //定义入口函数 window.onload=function(){ //创建ajax引擎对象 var xmlHttp=new XMLHttpRequest(); //绑定监听事件 xmlHttp.onreadystatechange=funtion(){ //判断网络状态码，获取服务...
ajax例子
野绅士的博客
10-15 942
$.ajax({ url: "${webPath}/agg/projBaTest.do?method=test", // 提交的页面 data: {"Id":id}, // 从表单中获取数据 type: "POST", // 设置请求类型为"POST"，默认为"GET" ...
Ajax 简单小例子
L的博客
12-16 844
光是看 ajax 的基本知识很难理解 ajax 的用处和具体的实现流程。下面是一个Ajax的简单小例子。 1. ajax 需要向服务器发送 ajax请求,所以我们需要有一个服务器进行响应,下面是在node.js平台创建的一个服务器,代码如下: var http = require('http') var fs = require('fs') var url = require('url') ...
简易Ajax实例：ASP服务器端运行演示
在深入探讨“一个简单的Ajax实例”时，我们首先要了解Ajax技术本身及其在服务器端语言ASP中的应用。 ### Ajax技术简介 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值