一个简单的AJAX实例

最新推荐文章于 2019-09-17 09:33:43 发布
最新推荐文章于 2019-09-17 09:33:43 发布
阅读量721 收藏 1
点赞数 1
分类专栏： AJAX 文章标签： ajax xmlhttprequest function mozilla html javascript
本文介绍了一个使用 AJAX 技术实现的 HTML 输入提示功能。该功能通过客户端 JavaScript 在用户输入的同时请求服务器端数据，并实时更新建议列表。服务器端采用 ASP 和 VBS 脚本来响应请求并提供匹配项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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实例
weixin_34384915的博客
09-22 273
高手莫入--最简单的AJAX实例   学习AJAX参考了网上大量的实例，学得很艰难，代码可读性太差。本例就是一个入门的Hello World，类似本例的程序网上也许有，但是绝非抄袭。   本例很模仿用户注册，输入过程中动态检查错误实时显示，效果图如下：   对着上面这个图，来写代码。   一、创建Java Web项目，并创建两个页面   a.html &lt;ht...
一个简单的AJAX示例(转)
weixin_34187862的博客
01-08 305
转载自：http://www.cnblogs.com/rubylouvre/archive/2013/01/08/2851051.html，为了防备面试，备份一份吧！！ 虽然现在有了框架，许多AJAX调用直接调用它们的API就可用。但有些极端情况，比如面试，比如第三方应用不想加载这些库，我们就只有自己写。这时想必有许多人要疯狂google，百度了。网上太多垃圾信息，我还是在自己博客上保存一份吧。...
最简单的ajax例子
liguangqi的专栏
07-13 621
  自从Jesse James Garrett创造了AJAX这个名词，到现在已经过去十八个月了，AJAX几乎让Web开发彻底改头换面。在这一年半的时间里，发生了很多事情，包括Web 2.0的热炒，许多创建或使用富互联网技术公司的诞生或复苏，还有真正动态化的在线软件层出不穷。很明显，AJAX这个名词受到开发业界的广欢迎，已经真正的走入到我们生活中，Web应用程序也达到前所未有的发展。    如此火爆...
一个简单的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例子ajax例子
05-18
ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子
简单Ajax实例(带前后台交互)
06-08
附件为Ajax的几个实例，在JSP页面中实现,实现了前后端交互。
Ajax做的一个小例子
03-28
NULL 博文链接：https://zys08.iteye.com/blog/1223960
Ajax最简单例子Demo
04-13
Ajax最简单例子，一个例子让你明白Ajax原理，XMLHttpRequest原理 <script language="javascript"> var http_request = false; function createRequest(url) { http_request = false; if (window.XMLHttpRequest) { // Mozilla浏览器 http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); //设置MIME类别 } } else if (window.ActiveXObject) { // IE浏览器 try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } if (!http_request) { alert("不能创建XMLHttpRequest对象实例！"); return false; } http_request.onreadystatechange = getResult; //调用返回结果处理函数 http_request.open('POST', url, false); http_request.send(); }
一简单的Ajax例子
David's Blog!
03-20 2710
---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 1958
Ajax，异步JavaScript与XML，是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，你可以创建接近本地桌面应用的，直接的、高可用的、更丰富的、更动态的Web用户接口界面。
Ajax实例
pb951028的博客
08-09 753
&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 193
此代码均写在 script中，仅供参考！！！！ //定义入口函数 window.onload=function(){ //创建ajax引擎对象 var xmlHttp=new XMLHttpRequest(); //绑定监听事件 xmlHttp.onreadystatechange=funtion(){ //判断网络状态码，获取服务...
ajax例子
野绅士的博客
10-15 914
$.ajax({ url: "${webPath}/agg/projBaTest.do?method=test", // 提交的页面 data: {"Id":id}, // 从表单中获取数据 type: "POST", // 设置请求类型为"POST"，默认为"GET" ...
简易Ajax实例：ASP服务器端运行演示
在深入探讨“一个简单的Ajax实例”时，我们首先要了解Ajax技术本身及其在服务器端语言ASP中的应用。 ### Ajax技术简介 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值