Ajax+PHP快速上手及应用

最新推荐文章于 2025-12-07 20:09:59 发布

原创最新推荐文章于 2025-12-07 20:09:59 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #php #xmlhttprequest #javascript #asynchronous #html

PHP 专栏收录该内容

7 篇文章

订阅专栏

本文介绍Ajax（Asynchronous JavaScript and XML）的基本概念和技术组成，包括HTML、JavaScript、DHTML、DOM及核心对象XMLHttpRequest的使用方法，展示了如何通过JavaScript发起异步请求、处理响应数据，并更新页面内容。

ajax的工作原理（Asynchronous JavaScript and XML）

Ajax由HTML，JavaScript技术，DHTML和DOM组成，这一杰出的方法可以将笨拙的Web界面转化为交互性的Ajax应用程序。

基本技术有：

HTML用于建立Web表单并确定应用程序其他部分使用的字段。

JavaScript代码是运行Ajax应用程序的核心代码，帮助改进与服务器应用程序的通信。

DHTML或Dynamic HTML，用于动态更新表单。我们将使用div，span和其他动态HTML元素来标记HTML。

文档对象模型DOM用户（通过JavaScript代码）处理HTML结构和（某些情况下）服务器返回的XML。

XMLHttpRequest对象

对于Ajax，最核心的一个对象是XMLHttpRequest,所有的Ajax操作都离不开这个对象的操作

首先我们来了解怎么在javascript中创建这个对象：xmlHttp = new XMLHttpRequest();

但是要注意的是，在IE浏览器中比较特殊，xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');

相关方法

打开请求

XMLHttpRequest.open(传递方式，地址，是否异步请求)

准备就绪执行

XMLHttpRequest.onreadystatechange

获取执行结果

XMLHttpRequest.responseText

js代码

var xmlHttp; function $_xmlhttprequest(){ if(window.ActiveXObject){ xmlHttp = new ActiveXObject('Microsoft.XMLHttp'); } else if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } //数据发送 function funphp100(url) { $_xmlhttprequest(); xmlHttp.open("GET", "for.php?id="+url, true); xmlHttp.onreadysatechange = byphp;//调用方法之间写就可以 xmlHttp.send(null); } //数据刷新 function byphp(){ var byphp100 = xmlHttp.responseText; //DOM技术 document.getElementById('php100').innerHTML = byphp100; }

php代码

<mce:script type="text/javascript" src="ajax.js" mce_src="ajax.js"></mce:script> //这里是脚本触发 <a href="#" mce_href="#" onclick="funphp('o')">o</a> //这里的id要对应 <div id="php100"></div>

for.php中只是做了个数据处理，返回一个数据即可

http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html