AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

<head>

<meta charset="utf-8">

<script>

function showHint(str)

{

  var xmlhttp;

  if (str.length==)

  {

    document.getElementById("txtHint").innerHTML="";

    return;

  }

  if (window.XMLHttpRequest)

  {

    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

    xmlhttp=new XMLHttpRequest();

  }

  else

  {

    // IE6, IE5 浏览器执行代码

    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

  xmlhttp.onreadystatechange=function()

  {

    if (xmlhttp.readyState== && xmlhttp.status==)

    {

      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

    }

  }

  xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);

  xmlhttp.send();

}

</script>

</head>

<body>

<h3>在输入框中尝试输入字母 a:</h3>

<form action="">

输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />

</form>

<p>提示信息: <span id="txtHint"></span></p>

如果输入框不为空，showHint() 函数执行以下任务：

  • 创建 XMLHttpRequest 对象
  • 当服务器响应就绪时执行函数
  • 把请求发送到服务器上的文件
  • 请注意我们向 URL 添加了一个参数 q （带有输入框的内容）

gethint.php：

<?php

// Fill up array with names

$a[]="Anna";$a[]="Brittany";$a[]="Cinderella";$a[]="Diana";$a[]="Eva";$a[]="Fiona";$a[]="Gunda";$a[]="Hege";$a[]="Inga";$a[]="Johanna";$a[]="Kitty";$a[]="Linda";$a[]="Nina";$a[]="Ophelia";$a[]="Tove";$a[]="Unni";

$a[]="Violet";

$a[]="Liza";

$a[]="Elizabeth";

$a[]="Ellen";

$a[]="Wenche";

$a[]="Vicky";

//get the q parameter from URL

$q=$_GET["q"];

if (strlen($q) > 0)

{

  $hint="";

  for($i=0; $i<count($a); $i++)

  {

    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))

    {

      if ($hint=="")

      {

        $hint=$a[$i];

      }

      else

      {

        $hint=$hint." , ".$a[$i];

      }

    }

  }

}

if ($hint == "")

{

  $response="no suggestion";

}

else

{

  $response=$hint;

}

//output the response

echo $response;

?>

AJAX异步实现的更多相关文章

  1. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  2. SSH实战 · AJAX异步校验

    前台JS代码 /*异步验证用户名的输入格式以及是否存在*/ function CheckUsername(){      /*取到用户名输入框*/      var nametxt = documen ...

  3. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  4. spring HandlerInterceptorAdapter拦截ajax异步请求，报错ERR_INCOMPLETE_CHUNKED_ENCODING

    话不多说,直接上正文. 异常信息: Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING 问题描述: 该异常是在页面发送ajax请 ...

  5. jquery Ajax异步请求之session

    写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...

  6. ASP.NET MVC 网站开发总结（五）——Ajax异步提交表单之检查验证码

    首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...

  7. ajax异步请求Response.Redirect重定向

    一个ajax异步请求报错->捕获异常->重定向错误提示页面.  一个简单的流程 结果一直搞不定.重定向无效.各种百度之. 后来突然想起 ajax的请求是不能在后台重定向的. 如果硬要重定向 ...

  8. AJAX 异步交互基本总结

    AJAX (Asynchronous JavaScript and Xml) 直译中文 - javascript和XML的异步 同步与异步的区别: 同步交互 执行速度相对比较慢 响应的是完整的HTML ...

  9. 触碰jQuery：AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  10. JSON.stringify实例应用—将对象转换成JSON类型进行AJAX异步传值

    在上一篇中,对JSON.stringify()方法有了初步的认识,并且做了一些简单的例子.本篇将进一步将JSON.stringify用在复杂些的实例中,例如如下需求: 在进jQuery AJAX异步传 ...

随机推荐

  1. 关于ORB SLAM2资源整理（持续更新）

    ORB SLAM2源码讲解(吴博) https://www.youtube.com/watch?v=2GVE7FTW7AU 泡泡机器人视频整理: http://space.bilibili.com/3 ...

  2. java中随机生成字符串的方法（三种）

    org.apache.commons.lang(2.6): 链接:https://pan.baidu.com/s/1k_oeA5AjSt6evoR7zT8gpQ 提取码:yhl5 1.生成的字符串每个 ...

  3. vsCode scss安装

    点击在settings.json中编辑写入代码: { /** Easy Sass 插件 **/ "easysass.formats": [ { "format" ...

  4. 在MONO Design中使用Flex3D

    在项目开发组的努力下,HTML5 3D 的开发包变得越来越优秀,越来越健壮:基于HTML5 3D技术的MONO Design建模平台功能也变得越来越强大和完善,这个方便了很多使用我们HTML5 3D的 ...

  5. 个人Linux(ubuntu)使用记录——远程访问linux

    说明:记录自己的linux使用过程,并不打算把它当作一个教程,仅仅只是记录下自己使用过程中的一些命令,配置等东西,这样方便自己查阅,也就不用到处去网上搜索了,所以文章毫无章法可言,甚至会记录得很乱. ...

  6. Linux命令rsync使用总结

    详细用法见:https://www.cnblogs.com/oboth-zl/articles/10334754.html rsync命令简介 主要用于数据同步.备份和镜像,除了本地使用之外,也可以通 ...

  7. Spring整合Junit框架

    一.开发环境 eclipse版本:4.6.1 maven版本:3.3.3 junit版本:4.12 spring版本:4.1.5.RELEASE JDK版本:1.8.0_111 二.项目结构 图 三. ...

  8. 【Codeforces 584C】Marina and Vasya

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 设cnt表示s1和s2不同的字符的个数 如果cnt>2t 因为这cnt个位置肯定至少有一边不同 显然肯定会有一个f(s,S)的值大于t的 ...

  9. Java基础学习总结（84）——Java面向对象六大原则和设计模式

    面向对象六大原则 在此之前,有一点需要大家知道,熟悉这些原则并不是说你写出的程序就一定灵活.清晰,只是为你优秀的代码之路铺上了一层栅栏,在这些原则的指导下,你才能避免陷入一些常见的代码泥沼,从而让你写 ...

  10. [洛谷P1114] “非常男女”计划

    题目描述 近来,初一年的XXX小朋友致力于研究班上同学的配对问题(别想太多,仅是舞伴),通过各种推理和实验,他掌握了大量的实战经验.例如,据他观察,身高相近的人似乎比较合得来. 万圣节来临之际,XXX ...