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 相关文章推荐
Discuz板块横排显示图片的实现方法
May 28 PHP
php 无限级 SelectTree 类
May 19 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
Apr 17 PHP
强烈声明: 不要使用(include/require)_once
Jun 06 PHP
解析php中两种缩放图片的函数,为图片添加水印
Jun 14 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
Mar 18 PHP
php返回json数据函数实例
Oct 09 PHP
Thinkphp中数据按分类嵌套循环实现方法
Oct 30 PHP
PHP new static 和 new self详解
Feb 19 PHP
PHP实现根据密码长度显示安全条
Jul 04 PHP
safari下载文件自动加了html后缀问题
Nov 09 PHP
laravel 多图上传及图片的存储例子
Oct 14 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的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
Python Pandas 箱线图的实现
2019/07/23 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
租车协议书范本
2014/04/22 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
科技活动周标语
2014/10/08 职场文书
收入证明范本
2015/06/12 职场文书
详解redis在微服务领域的贡献
2021/10/16 Redis