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结合飞信 免费天气预报短信
May 07 PHP
PHP教程 变量定义
Oct 23 PHP
我的php学习笔记(毕业设计)
Feb 21 PHP
php实现图片添加水印功能
Feb 13 PHP
ThinkPHP CURD方法之table方法详解
Jun 18 PHP
php导出CSV抽象类实例
Sep 24 PHP
Yii框架中memcache用法实例
Dec 03 PHP
Thinkphp调用Image类生成缩略图的方法
Mar 07 PHP
PHP的Yii框架的常用日志操作总结
Dec 08 PHP
PHP笛卡尔积实现算法示例
Jul 30 PHP
详解PHP PDO简单教程
May 28 PHP
php和html的区别点详细总结
Sep 24 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
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
php实现encode64编码类实例
2015/03/24 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
vue filters的使用详解
2018/06/11 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python 运算符 供重载参考
2009/06/11 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
python生成验证码图片代码分享
2016/01/28 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
廉洁自律个人总结
2015/02/14 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript