很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈哈。

为了防止我自己忘记，现在把这个简单的实例记录下。这个实例是网上搜的，文末附上链接。

首先你得有自己的服务器，这个我已经采用xampp配置好了。

实现ajax需要三个文件，一个是html的表单文件，一个是js的核心文件，一个是php的后台文件。具体的文件如下所示：

下面的是test.html文件，当键盘按下时触发showHint方法，在showHint方法中会有ajax的核心内容，实例化，获取地址，获取数据并展示等等。

<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>

下面是js的内容clienthint.js，太长了，我就折叠了,其中的url也可以写成这样http://localhost/shen/test/gethint.php。效果是一样的。

var xmlHttp

function showHint(str){

    if (str.length==0)

     {

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

    return

 }

    //获取xmlHttpObject对象，如果为空，提示浏览器不支持ajax

    xmlHttp=GetXmlHttpObject()

    if (xmlHttp==null){

        alert ("Browser does not support HTTP Request")

        return

     } 

     //获取url

    var url="gethint.php"

    url=url+"?q="+str

    url=url+"&sid="+Math.random()

     //回调函数，执行动作

    xmlHttp.onreadystatechange=stateChanged 

     //open

    xmlHttp.open("GET",url,true)

    xmlHttp.send(null)

} 

function stateChanged() {

    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){

        //将获取的信息插入到txtHint中

        document.getElementById("txtHint").innerHTML=xmlHttp.responseText

    }

}

//获取xml对象

function GetXmlHttpObject(){

    var xmlHttp=null;

    try{

        // Firefox, Opera 8.0+, Safari

        xmlHttp=new XMLHttpRequest();

        }

    catch (e){

        // Internet Explorer

        try{

         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

         }

        catch (e){

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

         }

    }

    return xmlHttp;

}

下面是php的内容gethint.php。根据ajax对象传入的参数，获取相应的数据。

<?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[]="Jiqing";

$a[]="Kitty";

$a[]="Linda";

$a[]="Nina";

$a[]="Ophelia";

$a[]="Petunia";

$a[]="Amanda";

$a[]="Raquel";

$a[]="Cindy";

$a[]="Doris";

$a[]="Eve";

$a[]="Evita";

$a[]="Sunniva";

$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"];

//lookup all hints from array if length of q>0

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];

     }

   }

 }

}

//Set output to "no suggestion" if no hint were found

//or to the correct values

if ($hint == "")

{

$response="no suggestion";

}

else

{

$response=$hint;

}

//output the response

echo $response;

?>

首先把所有的文件都放在Xampp/htdocs（xampp安装位置）文件夹中，我又新建了两个文件夹，于是路径就变成了Xampp/htdocs/shen/test。

接下去在浏览器中输入以下地址http://localhost/shen/test/test.html，当输入a后，会触发ajax效果，从后台获取相应的名字中带有j的数据，并展示在suggestions中。

本文转自http://www.jb51.net/article/47329.htm

php的ajax简单实例的更多相关文章

  1. PHP Ajax简单实例

    最近学习Jquery Ajax部分,通过简单例子,比较了下post,get方法的不同 HTML部分 <html> <head> <title>jQuery Ajax ...

  2. ASP.NET Ajax 简单实例

    本实例讲解Ajax 调用WCF服务. 1.建立一个网站,并在其中添加一个WCF服务(这里需要选择Ajax-Enabled WCF Service). 2.IDE会自动生成一个SVC文件. 3.服务代码 ...

  3. Ajax 简单实例，其实就是js里面内容有些不同而已（转载）

    这些时间,瞎子也看得见,AJAX正大踏步的朝我们走来.不管我们是拥护也好,反对也罢,还是视而不见,AJAX像一阵潮流,席转了我们所有的人. 关于AJAX的定义也好,大话也好,早有人在网上发表了汗牛充栋 ...

  4. EXT ajax简单实例

    转载:http://www.cnblogs.com/xiepeixing/archive/2012/10/24/2736751.html EXT ajax request是ext中对于ajax请求的实 ...

  5. AJAX简单实例

    越用AJAX越觉得它的强大.好用. 平常我们提交表单,是直接通过action属性,直接向后台提交数据. 我们也可以用AJAX向后台提交数据.例如: 这是一个表单,两个字段:notice,scort,保 ...

  6. ajax 简单实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> ...

  7. Ajax简单实例（基于jQuery）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. 初学者必读之AJAX简单实例2

    1.a前台页面的主体 b.添加script函数: 这个函数功能1:把文本框的数据传入到后台程序   2.再接收后台程序处理之后的数据,将其插入到页面 2.后台程序功能 软件测试

  9. ajax原理总结附简单实例及其优点

    在工作中用了Ajax N多次了,也看过一些相关方面的书籍,也算是认识了它,但是一直没有认真总结和整理过相关的东东,失败! 近有闲情,将之总结如下: [名称] Ajax是Asynchronous Jav ...

随机推荐

  1. Linux Mint 楷体问题

    很多人都遇见过刚装完的 Linux Mint 界面字体是黑体,然后莫名其妙就变成楷体的问题. 先不说技术层面的原因,只说怎么解决. 造成这种情况,多数是安装输入法或其他某种软件的时候,同时安装了 AR ...

  2. OC 数组以及字符串拼接与分割

    //@""空的字符串对象-------分割 NSString * ptr = @"I am a man"; NSArray * array = [ptr com ...

  3. java 附件上传、下载前后端代码

    前言:业务需要:附件上传,需要同时满足浏览器上传,和APP上传附件,并且浏览器端不可使用form表单提交,因为表单提交无法直接获取返回值,除非刷新页面才可显示上传的附件.所以此处使用ajaxfileu ...

  4. Java的HashMap

    FAQ: 为什么要有HashMap? 答:我非常期待能在Java 中使用Hash表 这种数据结构 ,因为它的快速存取特性. Hash表 和HashMap的关系? 答:Hash表 是一种逻辑数据结构,H ...

  5. Nexus3.6 window版私服搭建 安装、配置教程

    1.本地环境配置(Nexus3.6支持jdk版本1.6.1.7.1.8) 1.1.官网下载地址:https://www.sonatype.com/download-oss-sonatype       ...

  6. 如何修改静态IP地址和动态IP地址

    打开控制面板,一般在电脑的菜单栏能找到,win8和win10可以使用快捷键(win键+X键),找不到的朋友可以搜索一下.   进入到网络和共享中心,点击更改适配器设置.   这里显示的是电脑所以的网络 ...

  7. 【jxoi2018】游戏 组合数学

    首先令$n=r-l+1$. 令$k$表示区间$[l,r]$中存在多少个数$x$,使得$x$不存在小于$x$且在区间$[l,r]$中的因数,我们把包含这些数的数集称为$S$ 我们来先想一个$O(nk)$ ...

  8. 剑指offer五十四之字符流中第一个不重复的字符

    一.题目 请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从字符流中只读出前两个字符"go"时,第一个只出现一次的字符是"g".当从该字符流中读出 ...

  9. 设置pip源头地址

    更新pip源 1 . 可以直接在pip时加入参数 比如: pip install -i https://pypi.tuna.tsinghua.edu.cn/simple mysqldb 2 . 修改默 ...

  10. spring 接收前台ajax传来的参数的几个方法

    知识补充 JSON.stringify(), 将value(Object,Array,String,Number...)序列化为JSON字符串JSON.parse(), 将JSON数据解析为js原生值 ...