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世纪万年历
Dec 06 PHP
Php获取金书网的书名的实现代码
Jun 11 PHP
PHP curl_setopt()函数实例代码与参数分析
Jun 02 PHP
php 文件上传实例代码
Apr 19 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
Aug 10 PHP
php异常处理使用示例
Feb 25 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
Nov 15 PHP
php简单压缩css样式示例
Sep 22 PHP
PHP实现对数组分页处理实例详解
Feb 07 PHP
PHP 二级子目录(后台目录)设置二级域名
Mar 02 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
May 30 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
Oct 10 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
CURL状态码列表(详细)
2013/06/27 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
Python tkinter和exe打包的方法
2020/02/05 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
教学实验楼管理制度
2014/02/01 职场文书
自强之星事迹材料
2014/05/12 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
服装设计师求职信
2014/06/04 职场文书
2014年班务工作总结
2014/12/02 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书