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的urlencode()URL编码函数浅析
Aug 09 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
Jan 15 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
Jun 25 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
Aug 11 PHP
如何使用PHP给图片加水印
Oct 12 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
Oct 14 PHP
php获取今日开始时间和结束时间的方法
Feb 27 PHP
PHP实现Unicode编码相互转换的方法示例
Nov 17 PHP
Yii2表单事件之Ajax提交实现方法
May 04 PHP
PHP用continue跳过本次循环中剩余代码的注意点
Jun 27 PHP
PHP实现的多维数组排序算法分析
Feb 10 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
Jan 16 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
phpfans留言版用到的install.php
2007/01/04 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
用 JSON 处理缓存
2007/04/27 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
回门宴新郎答谢词
2014/01/12 职场文书
工程材料采购方案
2014/05/18 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
自荐信格式范文
2015/03/04 职场文书
吴仁宝观后感
2015/06/09 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL
Python的三个重要函数详解
2022/01/18 Python
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python