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 相关文章推荐
BBS(php &amp; mysql)完整版(八)
Oct 09 PHP
社区(php&amp;&amp;mysql)五
Oct 09 PHP
给初学PHP的5个入手程序
Nov 23 PHP
MYSQL 小技巧 -- LAST_INSERT_ID
Nov 24 PHP
PHP页面间参数传递的四种方法详解
Jun 09 PHP
WIFI万能钥匙密码查询接口实例
Sep 28 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
Oct 01 PHP
php获取汉字拼音首字母的方法
Oct 21 PHP
提交表单后 PHP获取提交内容的实现方法
May 25 PHP
PHP登录验证码的实现与使用方法
Jul 07 PHP
PHP让数组中有相同值的组成新的数组实例
Dec 31 PHP
Yii 框架使用数据库(databases)的方法示例
May 19 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网站提速三大“软”招
2006/10/09 PHP
php 随机生成10位字符代码
2009/03/26 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
解决Python中回文数和质数的问题
2019/11/24 Python
python如何查看安装了的模块
2020/06/23 Python
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
实习期自我鉴定
2013/10/11 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
煤矿安全生产标语
2014/06/06 职场文书
生物科学专业自荐书
2014/06/20 职场文书
三八节标语
2014/06/27 职场文书
催款函怎么写
2015/06/24 职场文书
婚宴父母致辞
2015/07/27 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python