Ajax入门例子

在customer.php的文件中,代码如下:

<html>

<head>

<script type="text/javascript">

function showCustomer(str)

{

var xmlhttp;

if (str=="")

{

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

return;

}

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

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

}

xmlhttp.onreadystatechange=function()

{

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

{

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

}

}

xmlhttp.open("GET","/test/getcustomer.php?q="+str,true);//这里的url是指你的文件路径,例如,我的customer.php和getcustomer.php都在www下的test文件                                                                                                          目录下,所以就写成了此种形式

xmlhttp.send();

}

</script>

</head>

<body>

<form action="" style="margin-top:15px;">

<label>请选择一位客户:

<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">

<option value="APPLE">Apple Computer, Inc.</option>

<option value="BAIDU ">BAIDU, Inc</option>

<option value="Canon">Canon USA, Inc.</option>

<option value="Google">Google, Inc.</option>

<option value="Nokia">Nokia Corporation</option>

<option value="SONY">Sony Corporation of America</option>

</select>

</label>

</form>

<br />

<div>客户信息将在此处列出 ...</div>

<div id="txtHint"></div>

</body>

</html>

在getcustomer.php的文件中,代码如下:

<?php

$q=$_GET["q"];

$con = mysql_connect(‘localhost‘, ‘root‘, ‘root‘);

if (!$con)

{

die(‘Could not connect: ‘ . mysql_error());

}

mysql_select_db("test", $con);

$sql="SELECT * FROM user1 WHERE  firstname= ‘".$q."‘";

//var_dump($sql);

$result = mysql_query($sql);

echo "<table border=‘1‘>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

<th>Hometown</th>

<th>Job</th>

</tr>";

while($row = mysql_fetch_array($result))

{

echo "<tr>";

echo "<td>" . $row[‘firstname‘] . "</td>";

echo "<td>" . $row[‘lastname‘] . "</td>";

echo "<td>" . $row[‘age‘] . "</td>";

echo "<td>" . $row[‘hometown‘] . "</td>";

echo "<td>" . $row[‘Job‘] . "</td>";

echo "</tr>";

}

echo "</table>";

mysql_close($con);

?>

//数据库是test, 表是user1,一共有五个字段,分别是firstname,lastname,age,hometown和Job

最后能实现页面无刷新字段的变化的效果!刚学Ajax,感觉很不错!

时间: 2024-10-11 06:19:01

Ajax入门例子的相关文章

ASP.NET AJAX入门系列(9):在母版页中使用UpdatePanel

ASP.NET AJAX入门系列(9):在母版页中使用UpdatePanel 本文简单介绍一下在母版页中使用UpdatePanel控件,翻译自官方文档. 主要内容 1.添加UpdatePanel控件到Content Page 2.通过Master Page刷新UpdatePanel 一.添加UpdatePanel控件到Content-Page 1.添加一个新的Master Page,并切换到设计视图. 2.在工具箱中AJAX Extensions标签下双击ScriptManager控件添加到页面

ASP.NET AJAX入门系列(8):自定义异常处理

ASP.NET AJAX入门系列(8):自定义异常处理 在UpdatePanel控件异步更新时,如果有错误发生,默认情况下会弹出一个Alert对话框显示出错误信息,这对用户来说是不友好的,本文看一下如何在服务端和客户端脚本中自定义异常处理,翻译自官方文档. 主要内容 1.在服务端自定义异常处理 2.在客户端脚本中自定义异常处理 一.在服务端自定义异常处理 1.添加ASPX页面并切换到设计视图. 2.在工具箱中AJAX Extensions标签下双击ScriptManager和UpdatePane

AJAX入门---五步使用XMLHttpRequest对象

XMLHttpRequest简介: XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页.当页面全部加载完毕后,客户端通过该对象向服务器请求数据,服务器端接受数据并处理后,向客户端反馈数据.XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力.XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容.尽管名为 XM

ASP.NET AJAX入门系列(4):使用UpdatePanel控件(一)

UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新.通过本文来学习一下UpdatePanel简单的使用方法(第一篇). 主要内容 1.UpdatePanel控件概述 2.UpdatePanel工作原理 3.ContentTemplate属性 4.ContentT

AJAX入门---AJAX操作HTML

AJAX入门---DOM操作HTML 一边学习AJAX一边坐着总结加深印象,上次写的是如何简单的使用XMLHttpRequest对象,今天写的是DOM(文档对象模型(Document Object Model))操作HTML,希望我的博客对大家的学习能够起到帮助作用. 一.什么是DOM 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.换句话说,这是表示

AJAX入门---DOM操作HTML

一边学习AJAX一边坐着总结加深印象,上次写的是如何简单的使用XMLHttpRequest对象,今天写的是DOM(文档对象模型(Document Object Model))操作HTML,希望我的博客对大家的学习能够起到帮助作用. 一.什么是DOM 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.换句话说,这是表示和处理一个HTML或XML文档的常用方

【Bootstrap Demo】入门例子创建

本文简单介绍下如何来使用 Bootstrap,通过引入 Bootstrap,来实现一个最基本的入门例子. 在前一篇博文[Bootstrap]1.初识Bootstrap 基础之上,我们完全可以更加方便快捷的创建一个的简单例子.这个例子只有基本的东西:引入了预编译版的 CSS 和 JavaScript 文件,页面只包含了一个 container 元素. 在Bootstrap的官方网站的下载页面 http://getbootstrap.com/getting-started/#download ,也有

MINA经典入门例子----Time Server

原文地址 http://blog.sina.com.cn/s/blog_720bdf0501010b8r.html 貌似java的IO.NIO的入门例子都有相关的Time Server Demo.本例为MINA官方Demo翻译过来而已. MINA百科: Apache MINA(Multipurpose Infrastructure for Network Applications) 是 Apache 组织一个较新的项目,它为开发高性能和高可用性的网络应用程序提供了非常便利的框架.当前发行的 MI

AJAX入门--- XMLHttpRequest对象的属性和方法

由于刚刚接触到Ajax对其比较陌生,而其中的XMLHttpRequest对象更是未曾听闻.开始学之前,了解一下它的属性和方法为它的使用做下铺垫.本文重点介绍XMLHttpRequest的属性和方法. XMLHttpRequest对象的属性和事件 属性 描述 readyState 表示XMLHttpRequest对象的状态[1] responseText 包含客户端接收到的HTTP相应的文本内容[2] responseXML 服务器响应的XML内容对应的DOM对象[3] status 服务器返回h