今天是个不那么美好的一天。
但是学习不能停。
今天看教程讲的是AJAX ASP/PHP的实例,但是我对PHP的掌握还停留在输入输出酱紫,对ASP也不是很懂。所以就很懵逼。
大概就是动态响应吧。
当小可爱们在输入框中键入字符时,就会执行函数 "showHint()" 。
该函数由 "onkeyup" 事件触发:
```
function showHint(str){
var xmlhttp;
if (str.length==0) {
document.getElementById("txt1").innerHTML=""; return;
} //如果输入框为空 ,则该函数清空 txt1 占位符的内容,并退出函数。
xmlhttp=new XMLHttpRequest();//创建 XMLHttpRequest 对象
xmlhttp.onreadystatechange=function() {//当服务器响应就绪时执行函数
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txt1").innerHTML=xmlhttp.responseText; }
}
xmlhttp.open("GET","gethint.asp?q="+str,true);//这个里面是ASP哦 也可以是.php文件
xmlhttp.send();//把请求发送到服务器上的文件
}
```
下面是AJAX 从数据库读取信息的学习!!!(个人认为这个比较重要哦)
1、先写一个简单的 HTML 表单,以及指向 JavaScript 的链接:
```
<html>
<head>
<script src="pigs.js"></script>
</head>
<body>
<form>
Select a Pig:
<select name="pig" onchange="showPig(this.value)">
//当用户选择数据时,执行名为 "showPig()" 的函数,该函数的执行由 "onchange" 事件触发。
<option value="1">Xupeichen</option>
<option value="2">Zhangtong</option>
</select>
</form>
<p>
<div id="txt1"><b>小猪就在这里</b></div> //这个div 用作从 web 服务器检索到的信息的占位符
</p>
</body>
</html>
```
2、在 "pigs.js" 文件中的 JavaScript 代码:
```
var xmlHttp;
function showPig(str){
xmlHttp=GetXmlHttpObject();//调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象
if (xmlHttp==null){
alert ("Browser does not support HTTP Request");
return;}
var url="getpig.php";//定义发送到服务器的 URL(文件名)
url=url+"?q="+str;//向 URL 添加带有下拉列表内容的参数 (q)
url=url+"&sid="+Math.random();//添加一个随机数,以防服务器使用缓存的文件
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);}
function stateChanged(){//当触发事件时调用 stateChanged
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("txt1").innerHTML=xmlHttp.responseText;}
}
function GetXmlHttpObject(){//通过给定的 URL 打开 XMLHTTP 对象
var xmlHttp=null;
return xmlHttp;
}//向服务器发送 HTTP 请求
```
3、JavaScript 调用的服务器页面,是名为 "getpig.php" 的简单 PHP 文件。
该页面用 PHP 编写,并使用 MySQL 数据库。
其中的代码执行针对数据库的 SQL 查询,并以 HTML 表格返回结果:
```
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'didi', 'abc123');//PHP 打开到达 MySQL 服务器的连接
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM pig WHERE id = '".$q."'";//找到拥有指定姓名的 "pig"
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Pigname</th>
<th>Pigage</th>
<th>Pighome</th>
<th>Pigjob</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['Pigname'] . "</td>";
echo "<td>" . $row['Pigage'] . "</td>";
echo "<td>" . $row['Pighome'] . "</td>";
echo "<td>" . $row['Pigjob'] . "</td>";
echo "</tr>";
}//创建表格,插入数据,然后将其发送到 "txt1" 占位符
echo "</table>";
mysql_close($con);
?>
```
当查询从 JavaScript 被发送到这个 PHP 页面,就会放生酱紫的事情啦。
今天没有好好学习哦!!!
明天开始好好学习PHP!!!