Ajax PHP简单入门教程代码


Posted in PHP onApril 25, 2008

首先我们来了解怎么在javascrīpt中创建这个对象:
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是获得服务器返回的信息,然后通过javascrīpt赋给ID为city的表单。

到此,一个简单的Ajax程序就完成了,完整的javascrīpt代码如下:

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是输出并返回所需要的数据就可以了。

好久没更新,今天看到这教程,对初学者挺适合.

PHP 相关文章推荐
php Ajax乱码
Apr 09 PHP
php购物车实现代码
Oct 10 PHP
php中通过curl smtp发送邮件
Jun 05 PHP
php Ubb代码编辑器函数代码
Jul 05 PHP
PHP无限分类(树形类)
Sep 28 PHP
PHP获取QQ达人QQ信息的方法
Mar 05 PHP
ThinkPHP中where()使用方法详解
Apr 19 PHP
redis查看连接数及php模拟并发创建redis连接的方法
Dec 15 PHP
通过php动态传数据到highcharts
Apr 05 PHP
php获取'/'传参的值简单方法
Jul 13 PHP
PHP数据库操作三:redis用法分析
Aug 16 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
Feb 27 PHP
PHP开发框架总结收藏
Apr 24 #PHP
php5数字型字符串加解密代码
Apr 24 #PHP
php实现的简单压缩英文字符串的代码
Apr 24 #PHP
php格式化工具Beautify PHP小小BUG
Apr 24 #PHP
使用PHP的日期与时间函数技巧
Apr 24 #PHP
追求程序速度,而不是编程的速度
Apr 23 #PHP
编写漂亮的代码 - 将后台程序与前端程序分开
Apr 23 #PHP
You might like
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
php 文件上传系统手记
2009/10/26 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
JS 显示当前日期与时间的代码
2010/03/24 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
详解python之简单主机批量管理工具
2017/01/27 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
python逆向入门教程
2018/01/15 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
Python 如何实现访问者模式
2020/07/28 Python
Python自动创建Excel并获取内容
2020/09/16 Python
Oracle的内存结构(Memory structures)
2015/06/10 面试题
民族学专业求职信
2014/07/28 职场文书
敬老月活动总结
2014/08/28 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
2015年端午节活动方案
2015/05/05 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书