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 相关文章推荐
一个用mysql_odbc和php写的serach数据库程序
Oct 09 PHP
php面向对象全攻略 (十五) 多态的应用
Sep 30 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
Dec 29 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
Dec 06 PHP
一个漂亮的php验证码类(分享)
Aug 06 PHP
php中hashtable实现示例分享
Feb 13 PHP
PHP实现服务器状态监控的方法
Dec 09 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
Oct 09 PHP
thinkphp配置文件路径的实现方法
Aug 30 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
Jul 20 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
Feb 15 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
May 01 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
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
PHP 验证码的实现代码
2011/07/17 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
js 立即调用的函数表达式如何写
2014/01/12 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
JavaScript知识点整理
2015/12/09 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
jQuery事件用法详解
2016/10/06 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
Python自定义线程池实现方法分析
2018/02/07 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
python3中的md5加密实例
2018/05/29 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
python logging.info在终端没输出的解决
2020/05/12 Python
PyTorch的torch.cat用法
2020/06/28 Python
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
中专生职业生涯规划书范文
2013/12/29 职场文书
毕业生自我鉴定实例
2014/01/21 职场文书
中秋节主持词
2014/04/02 职场文书
放射科岗位职责
2015/02/14 职场文书
2016年主题党日活动总结
2016/04/05 职场文书