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 相关文章推荐
example1.php
Oct 09 PHP
php缓存技术介绍
Nov 25 PHP
深入php socket的讲解与实例分析
Jun 13 PHP
phpword插件导出word文件时中文乱码问题处理方案
Aug 19 PHP
php实现用已经过去多长时间的方式显示时间
Jun 05 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
Dec 25 PHP
教你php如何实现验证码
Jan 20 PHP
PHP is_array() 检测变量是否是数组的实现方法
Jun 13 PHP
PHP Oauth授权和本地加密实现方法
Aug 12 PHP
php+ajax简单实现全选删除的方法
Dec 06 PHP
php基于PDO实现功能强大的MYSQL封装类实例
Feb 27 PHP
PHP中类的自动加载的方法
Mar 17 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
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
中止javascript执行的方法
2014/02/14 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
jQuery实现网页拼图游戏
2020/04/22 jQuery
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
python操作excel让工作自动化
2019/08/09 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
几个常见的消息中间件(MOM)
2014/01/08 面试题
党支部书记岗位责任制
2014/02/11 职场文书
情人节活动策划方案
2014/02/27 职场文书
财务会计专业求职信
2014/06/09 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
青年教师听课心得体会
2016/01/15 职场文书