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 array_flip() 删除数组重复元素
Jan 14 PHP
PHP array_flip() 删除重复数组元素专用函数
May 16 PHP
php生成随机密码的三种方法小结
Sep 04 PHP
php tp验证表单与自动填充函数代码
Feb 22 PHP
spl_autoload_register与autoload的区别详解
Jun 03 PHP
PHP静态文件生成类实例
Nov 29 PHP
将FCKeditor导入PHP+SMARTY的实现方法
Jan 15 PHP
php 输入输出流详解及示例代码
Aug 25 PHP
浅谈PHP中如何实现Hook机制
Nov 14 PHP
PHP设计模式之原型模式定义与用法详解
Apr 03 PHP
php图片裁剪函数
Oct 31 PHP
thinkphp5 redis缓存新增方法实例讲解
Mar 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 foreach 参数强制类型转换的问题
2010/12/10 PHP
php防攻击代码升级版
2010/12/29 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
深入解析php中的foreach函数
2013/08/31 PHP
php计算整个目录大小的方法
2015/06/01 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP递归算法的简单实例
2019/02/28 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
python 异或加密字符串的实例
2018/10/14 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
python中栈的原理及实现方法示例
2019/11/27 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
便利店投资的创业计划书
2014/01/12 职场文书
机关保密工作承诺书
2015/05/04 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android