欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-31 13:57:28
首先我们来了解怎么在javascript中创建这个对象: 程序代码 var xmlhttp = new xmlhttprequest(); 这行简单的代码在 mozilla...
首先我们来了解怎么在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是输出并返回所需要的数据就可以了。
这教程,对初学者挺适合.