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+DBM的同学录程序(5)
Oct 09 PHP
使用网络地址转换实现多服务器负载均衡
Oct 09 PHP
用文本文件实现的动态实时发布新闻的程序
Oct 09 PHP
解析如何去掉CodeIgniter URL中的index.php
Jun 25 PHP
php配合jquery实现增删操作具体实例
Dec 12 PHP
使用php显示搜索引擎来的关键词
Feb 13 PHP
php编程中echo用逗号和用点号连接的区别
Mar 26 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
Oct 25 PHP
php正则表达式基本知识与应用详解【经典教程】
Apr 17 PHP
thinkphp5框架路由原理与用法详解
Feb 11 PHP
php数值计算num类简单操作示例
May 15 PHP
php远程请求CURL案例(爬虫、保存登录状态)
Apr 01 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实现过滤表单提交中html标签的方法
2014/10/17 PHP
php遍历目录方法小结
2015/03/10 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
Python 函数返回值的示例代码
2019/03/11 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
django的model操作汇整详解
2019/07/26 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
MySQL面试题目集锦
2016/04/14 面试题
自荐信格式
2013/12/01 职场文书
给导游的表扬信
2014/01/10 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
Python基础详解之邮件处理
2021/04/28 Python
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis