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 相关文章推荐
第三节--定义一个类
Nov 16 PHP
php购物网站支付paypal使用方法
Nov 28 PHP
php 面向对象的一个例子
Apr 12 PHP
php获取post中的json数据的实现方法
Jun 08 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
Feb 28 PHP
深入PHP中慎用双等于(==)的详解
Jun 06 PHP
php下载文件源代码(强制任意文件格式下载)
May 09 PHP
ThinkPHP令牌验证实例
Jun 18 PHP
kohana框架上传文件验证规则写法示例
Jul 14 PHP
PHP常用技术文之文件操作和目录操作总结
Sep 27 PHP
详解PHP变量传值赋值和引用赋值变量销毁
Mar 23 PHP
laravel框架中表单请求类型和CSRF防护实例分析
Nov 23 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
Zerg剧情介绍
2020/03/14 星际争霸
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
js读写json文件实例代码
2014/10/21 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
python实现小世界网络生成
2019/11/21 Python
openCV提取图像中的矩形区域
2020/07/21 Python
django有哪些好处和优点
2020/09/01 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
出国留学自荐信
2013/10/25 职场文书
汉语言文学职业规划
2014/02/14 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
交通安全月活动总结
2015/05/08 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript