最近对 Ajax 产生了兴趣,花了2个星期做到了Ajax的入门。什么是 Ajax,相信网上已经有很多的介绍了,推荐下面的链接可以做到对 Ajax 的初步认识。
http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html
废话不多说现在开始我们的入门简单介绍,我们的目的是写一个 前端(html + javascript) + 后端 (php)模式的程序。
首先我们需要写一个前端页面 html 内嵌 javascript 代码。这个比较easy。网上有很多,直接上个简单的例子如下:
/***********AjaxApply.html**************************/
<html>
<head>
<meta http-equiv = "Access-Control-Allow-Origin"
content = "*">
<title>a test</title>
<script src = "AjaxApply.js"></script></head>
<body>
<p>Input a: <input type = "text" id = "a"
onChange = "sendAandB();"/></p>
<p>Input b: <input type = "text" id = "b"
onChange = "sendAandB();"/></p>
<!-- <div id = "sum">Output sum: </div></body> -->
<p>Output sum: <input type = "text" id = "sum" /></p>
</html>
/************************AjaxApply.js********************/
var xmlHttp = false;
function InitAjax()
{
var xmlHttp = false;
try {
xmlHttp = new ActiveObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveObject("Microsoft.XMLHTTP");
} catch (e1) {
xmlHttp = false;
}
}
if( !xmlHttp && typeof(XMLHttpRequest) != 'undefined')
{
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
function sendAandB()
{
var a = document.getElementById("a").value;
if(a == "")
{ return; }
var b = document.getElementById("b").value;
if( b == "")
{ return; }
var url = "http://localhost/AjaxApply.php?a=" + escape(a) + "&b=" +
escape(b);
// var url = "D:/webphp/AjaxApply.php?a=" + escape(a) + "&b=" +
// escape(b);
xmlHttp = InitAjax();
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = function() {
if( xmlHttp.readyState == 4)
{
var response = xmlHttp.responseText;
document.getElementById("sum").value = response;
// document.getElementById("sum").innerHTML = response;
}
}
xmlHttp.send(null);
}
前端比较简单,现在的问题是我们要能够调用 url 标明的 php文件,运行 php 文件并返回结果。这里比较重要的一步是搭建运行php的web服务器,
在这里,我安装的是 apache2.2 + php 5 ,网上有安装教程。重要的是两个配置文件 httpd.conf 和 php.ini 的修改,
当然最重要的就是将 apache 配置成支持解析php文件。
安装教程:http://wenku.baidu.com/link?url=OwV6dDyLqYoJ7tMnId23D21iD10N_pRfZ-M2by3YdtCyI0MQpbC4OgDLfDidWH8O4J6bemIPCw8jjMqf8yt-Yy088hAiWo0c-0VUdFKLZ9i
安装配置完成后,我出现的问题主要是不能解析 php,这是因为 php.ini 中的一个便签 short_open_tag = Off,只需改成 On 即可。
下面是服务器端 php 的问题了,也没什么只需按照 php 语法写好就可以了然后丢到你在上面设置的 apache 的默认文件夹下就行了。
/***********************AjaxApply.php*********************************/
<?php
header('Content-Type: text/php');
header("Cache-Control: no-cache, must-revalidate");
$a = $_GET["a"];
$b = $_GET["b"];
$file = fopen("info.txt", "a+");
$sum = $a + $b;
fwrite($file, $sum);
//$str = "\n";
//fwrite($file, $str);
fclose($file);
echo $sum;
?>
这里的 echo 打印的内容就是 xmlHttpRequest.responseText 中客户端接受到的文本流内容,你可以定义文本流的内容,在上面的php :echo $sum; 发现文本流里只有sum的值,这样我们在客户端上就可以从 responseText 得到我们需要的内容。