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中json_encode处理gbk与gb2312中文乱码问题的解决方法
Jul 10 PHP
PHP准确取得服务器IP地址的方法
Jun 02 PHP
php实现网页缓存的工具类分享
Jul 14 PHP
PHP实现的简单网络硬盘
Jul 29 PHP
PHP实现加强版加密解密类实例
Jul 29 PHP
php实现curl模拟ftp上传的方法
Jul 29 PHP
Zend Framework教程之Zend_Config_Ini用法分析
Mar 23 PHP
PHP判断表达式中括号是否匹配的简单实例
Oct 22 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
Dec 14 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
Jul 21 PHP
Yii2.0框架模型多表关联查询示例
Jul 18 PHP
TP5多入口设置实例讲解
Dec 15 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 字符转义 注意事项
2009/05/27 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php mail to 配置详解
2014/01/16 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
phpStorm2020 注册码
2020/09/17 PHP
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
python随机取list中的元素方法
2018/04/08 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
入党自荐书范文
2014/03/09 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
新年爱情寄语
2014/04/08 职场文书
学校课外活动总结
2014/05/08 职场文书
维稳承诺书
2015/01/20 职场文书
活动总结模板大全
2015/05/11 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
Python序列化模块JSON与Pickle
2022/06/05 Python