一个简单的AJAX实例

最新推荐文章于 2019-09-17 09:33:43 发布
最新推荐文章于 2019-09-17 09:33:43 发布
阅读量683 收藏 1
点赞数 1
分类专栏： AJAX 文章标签： ajax xmlhttprequest function mozilla html javascript

AJAX HTML页面
　　这是一个HTML网页。它包括了一个简单的HTML表单和关联JS的link
<html>
<head>
<script src="clienthint.js"></script>
</head><body><form>
First Name:
<input type="text" id="txt1"
οnkeyup="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 179
高手莫入--最简单的AJAX实例   学习AJAX参考了网上大量的实例，学得很艰难，代码可读性太差。本例就是一个入门的Hello World，类似本例的程序网上也许有，但是绝非抄袭。   本例很模仿用户注册，输入过程中动态检查错误实时显示，效果图如下：   对着上面这个图，来写代码。   一、创建Java Web项目，并创建两个页面   a.html &lt;ht...
一个简单的AJAX示例(转)
weixin_34187862的博客
01-08 266
转载自：http://www.cnblogs.com/rubylouvre/archive/2013/01/08/2851051.html，为了防备面试，备份一份吧！！ 虽然现在有了框架，许多AJAX调用直接调用它们的API就可用。但有些极端情况，比如面试，比如第三方应用不想加载这些库，我们就只有自己写。这时想必有许多人要疯狂google，百度了。网上太多垃圾信息，我还是在自己博客上保存一份吧。...
最简单的ajax例子
liguangqi的专栏
07-13 575
  自从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的实例
05-25
【标题】：“一个简单实现ajax的实例” Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新。这个...
ajax实例
01-08
在AJAX实例中，我们看到一个使用JavaScript库jQuery的示例。jQuery提供了简化AJAX操作的API，例如`$.ajax()`方法。这个方法允许我们配置各种参数来定制请求。以下是对`$.ajax()`方法中各个参数的详细解释： 1. `...
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应用例子
09-25
一个完整的用js写的ajax例子，模仿注册页面输入用户名，输入框失去焦点后，后台异步判断该用户名是否可用，并在页面显示判断结果
一简单的Ajax例子
David's Blog!
03-20 2656
---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 1908
Ajax，异步JavaScript与XML，是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，你可以创建接近本地桌面应用的，直接的、高可用的、更丰富的、更动态的Web用户接口界面。
Ajax实例
pb951028的博客
08-09 687
&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 156
此代码均写在 script中，仅供参考！！！！ //定义入口函数 window.onload=function(){ //创建ajax引擎对象 var xmlHttp=new XMLHttpRequest(); //绑定监听事件 xmlHttp.onreadystatechange=funtion(){ //判断网络状态码，获取服务...
Ajax基础实例：创建、执行与响应
本文将深入探讨Ajax在Web开发中的一个简单实例，主要涉及创建XMLHttpRequest对象、发送异步请求、处理响应以及使用回调函数。Ajax（Asynchronous JavaScript and XML）是一种用于创建无需重新加载整个页面即可更新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值