Ajax+PHP简单基础入门实例教程

首先我们来了解怎么在javascript中创建这个对象：
程序代码
var xmlhttp = new xmlhttprequest();
这行简单的代码在 mozilla、firefox、safari、opera 以及基本上所有以任何形式或方式支持 ajax 的非 microsoft 浏览器中，创建了 xmlhttprequest 对象。但是对于市场占有率达到70%的ie来说，这种方法是不行的，而不同的ie版本还有不同的创建方法，所以我们需要在ie下面使用下面两种创建对象的办法：
程序代码
try {
xmlhttp = new activexobject("msxml2.xmlhttp");//针对较新的浏览器
} catch (err) {
try {
xmlhttp = new activexobject("microsoft.xmlhttp");//针对较老的浏览器
} catch (err2) {
xmlhttp = false;
}
}
即使这样，我们也无法预料有些浏览器可能无法创建这个对象，所以在创建不成功的情况下，我们还要加上一句：
程序代码
if (!xmlhttp){
alert("无法创建 xmlhttprequest 对象！");
}
结合起来就是：
程序代码
var xmlhttp = false;
try {
xmlhttp = new xmlhttprequest();
} catch (trymicrosoft) {
try {
xmlhttp = new activexobject("msxml2.xmlhttp");
} catch (othermicrosoft) {
try {
xmlhttp = new activexobject("microsoft.xmlhttp");
} catch (failed) {
xmlhttp = false;
}
}
}
if (!xmlhttp){
alert("无法创建 xmlhttprequest 对象！");
}
然后，让我们建立一个函数getinfo()，打开异步请求：
程序代码
function getinfo() {
var num = document.getelementbyid("num").value;//获得表单的数据
var url = "/ajax/1.php?n=" + escape(num);
xmlhttp.open("get", url, true);//这里的true代表是异步请求
}
一旦用 open() 配置好之后，就可以发送请求了。虽然可以使用 send() 发送数据，但也能通过 url 本身发送数据。事实上，在大部分get 请求中，用 url 发送数据要容易得多，所以这里用null作为send()的参数就可以了。url地址里面的php文件是被请求来处理所需要数据的php文件，就像我们平时用php的时候一样，后面的参数可以加多个，并用&分隔开来。
xmlhttp.send(null);
在发送了数据之后，我们需要用回调方法来获得服务器的状态，所以就用到了onreadystatechange 属性。
xmlhttp.onreadystatechange = updatepage;
此语句已经要放在send()语句前面，这样才会有效，后面的updatepage是处理返回信息的一个函数。完整的getinfo()如下：
程序代码
function getinfo() {
var num = document.getelementbyid("num").value;//获得表单的数据
var url = "/ajax/1.php?n=" + escape(num);
xmlhttp.open("get", url, true);//这里的true代表是异步请求
xmlhttp.onreadystatechange = updatepage;
xmlhttp.send(null);
}
我们还需要在html里面来触发这个函数：
程序代码
<input name="num" id="num" onblur="getinfo()" type="text" />
下面我们需要来编写updatepage()这个函数：
程序代码
function updatepage(){
if (xmlhttp.readystate == 4) {
var response = xmlhttp.responsetext;
document.getelementbyid("city").value = response;
}
}
上面这段代码里面的readystate是服务器返回的一个状态，4这个状态表示请求已经发送，并处理完毕。responsetext是获得服务器返回的信息，然后通过javascript赋给id为city的表单。
到此，一个简单的ajax程序就完成了，完整的javascript代码如下：
程序代码
var xmlhttp = false;
try {
xmlhttp = new xmlhttprequest();
} catch (trymicrosoft) {
try {
xmlhttp = new activexobject("msxml2.xmlhttp");
} catch (othermicrosoft) {
try {
xmlhttp = new activexobject("microsoft.xmlhttp");
} catch (failed) {
xmlhttp = false;
}
}
}
if (!xmlhttp){
alert("无法创建 xmlhttprequest 对象！");
}
function getinfo() {
var num = document.getelementbyid("num").value;//获得表单的数据
var url = "/ajax/1.php?n=" + escape(num);
xmlhttp.open("get", url, true);//这里的true代表是异步请求
xmlhttp.onreadystatechange = updatepage;
xmlhttp.send(null);
}
function updatepage(){
if (xmlhttp.readystate == 4) {
var response = xmlhttp.responsetext;
document.getelementbyid("city").value = response;
}
}
这里还缺一个php文件，由于处理的方式不一样，写法也不一样，而且这不是ajax的主要部分，所以这里就不放代码了。只要记住php是输出并返回所需要的数据就可以了。
这教程,对初学者挺适合.