AJAX的奥秘(2)

今天是个不那么美好的一天。


但是学习不能停。

今天看教程讲的是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 的链接:

```

Select a Pig:

小猪就在这里
  //这个div 用作从 web 服务器检索到的信息的占位符

```

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 表格返回结果:

```

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

";

while($row = mysql_fetch_array($result))

{

echo "

";

echo "

";

echo "

";

echo "

";

echo "

";

echo "

";

}//创建表格,插入数据,然后将其发送到 "txt1" 占位符

echo "

Pigname Pigage Pighome Pigjob
" . $row['Pigname'] . " " . $row['Pigage'] . " " . $row['Pighome'] . " " . $row['Pigjob'] . "
";

mysql_close($con);

?>

```

当查询从 JavaScript 被发送到这个 PHP 页面,就会放生酱紫的事情啦。

今天没有好好学习哦!!!

明天开始好好学习PHP!!!


你可能感兴趣的:(AJAX的奥秘(2))