PHP中AJAX应用入门：实现无刷新交互的三种方式

AJAX核心原理与准备

AJAX并非单一新技术，而是CSS、JavaScript、XHTML/XML和XSLT等现有技术的组合。其核心在于使用 XMLHttpRequest 对象执行HTTP请求。该对象允许客户端脚本发起异步请求，并在不中断用户操作的情况下解析服务器响应。关键在于注册回调函数：当状态改变时自动处理数据，而不是让浏览器挂起等待。

第一步：初始化AJAX兼容对象

为了适配不同浏览器（包括旧版IE与现代标准浏览器），需构建一个能够自动检测并实例化正确XMLHttpRequest对象的函数。这是后续所有操作的入口。

function InitAjax() {
  var ajax = false;
  // 尝试创建ActiveXObject（兼容老版本IE）
  try {
    ajax = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      ajax = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      ajax = false;
    }
  }
  // 如果失败，则尝试标准的XMLHttpRequest（Firefox, Chrome等）
  if (!ajax && typeof XMLHttpRequest != 'undefined') {
    ajax = new XMLHttpRequest();
  }
  return ajax;
}

第二步：使用GET方式获取数据

GET适用于从服务器获取静态或简单的动态数据（如新闻ID对应的详情）。操作时需设置URL参数，监听状态变化，并将结果插入指定DOM元素。

1. HTML结构：创建一个链接触发事件，并预留一个隐藏的 div 容器接收数据。

<a href="#" onClick="getNews(1)">新闻1</a>
<div id="show_news"></div>

2. JavaScript逻辑：
   • 通过 InitAjax() 获取对象。
   • 调用 open("GET", url, true) 建立异步连接。
   • 定义 onreadystatechange 回调：当 readyState == 4 且 status == 200 时，将 responseText 写入 #show_news。

function getNews(newsID) {
  if (typeof(newsID) == 'undefined') return false;
  
  var url = "/show.php?id=" + newsID;
  var show = document.getElementById("show_news");
  var ajax = InitAjax();
  
  ajax.open("GET", url, true);
  ajax.onreadystatechange = function() {
    if (ajax.readyState == 4 && ajax.status == 200) {
      show.innerHTML = ajax.responseText;
    }
  }
  ajax.send(null);
}

第三步：使用POST方式提交表单

POST方式常用于提交表单数据（如保存用户资料）或需要发送大量数据的场景。相比GET，它需要设置HTTP头部信息以声明请求体格式。

1. HTML结构：

<form name="user_info">
  姓名：<input type="text" name="user_name" /><br />
  年龄：<input type="text" name="user_age" /><br />
  <input type="button" value="提交" onClick="saveUserInfo()">
</form>
<div id="msg"></div>

2. JavaScript逻辑：
   • 手动拼接 postStr 字符串（格式为 key=value&key2=value2）。
   • 调用 setRequestHeader("Content-Type","application/x-www-form-urlencoded") 至关重要，否则PHP可能无法正确接收数据。
   • 通过 send(postStr) 发送数据。

function saveUserInfo() {
  var f = document.user_info;
  var userName = f.user_name.value;
  var userAge = f.user_age.value;
  var postStr = "user_name="+ userName + "&user_age="+ userAge;
  
  var ajax = InitAjax();
  ajax.open("POST", "/save_info.php", true);
  ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  ajax.send(postStr);
  
  ajax.onreadystatechange = function() {
    if (ajax.readyState == 4 && ajax.status == 200) {
      document.getElementById("msg").innerHTML = ajax.responseText;
    }
  }
}

第四步：模拟AJAX的文件上传（伪Ajax）

由于原生 XMLHttpRequest 出于安全原因通常不支持直接上传文件（早期浏览器环境），可采用“浮层iframe”方案模拟无刷新效果。主要思路是将表单的 target 指向一个隐藏的 iframe，由后端脚本处理后，返回嵌入JS代码的HTML页面，从而回调父窗口函数显示结果。

1. 前端上传页（upload.html）

<!-- 隐藏的目标Iframe -->
<iframe name="iframe1" width="0" height="0" scrolling="no"></iframe>

<!-- 指定target=