什么是 AJAX

AJAX 的全称是 Asynchronous JavaScript And XML.
AJAX 不是新的编程语言，它是一个使用已有标准的新的编程技术，是一种创建交互式网页应用的网页开发技术。
AJAX 是以异步方式与服务器交换数据，在不重新加载整个页面的情况下更新部分网页的元素。
使用 AJAX 可以创建更好，更快，更用户界面友好的Web应用。

AJAX 原理

AJAX 通过 XmlHttpRequest 对象来向服务器发异步请求。
从服务器获得数据，然后用 javascript 来操作 DOM 更新页面。
XMLHttpRequest 是 AJAX 的核心机制，是一种支持异步请求的技术。
简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，而不阻塞用户。
达到无刷新的效果。

为什么用 AJAX

传统的动态如果需要获取更新内容，必需重新载入整个网页。
AJAX技术可以实现动态页面不刷新（局部刷新）。
就是能在不刷新整个页面的前提下把数据显示。
这使得Web应用程序更为友好地为用户服务。
AJAX通过在后台与服务器进行少量数据交换，达到对网页的某部分进行更新的目的。

XMLHttpRequest 对象

variable=new XMLHttpRequest();

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。
如果支持，则创建 XMLHttpRequest 对象。
如果不支持，则创建 ActiveXObject 。

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

XMLHttpRequest 对象用于和服务器交换数据

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
//
send(string)
将请求发送到服务器。
string：仅用于 POST 请求

GET ，POST 的使用环境

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET 请求 demo

<script>
function loadXMLDocGet()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("loadXMLDocGet").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/demo/ajax-get.php?t=" + Math.random(),true);
xmlhttp.send();
}
</script>
<h2>GET 请求 demo</h2>
<button type="button" onclick="loadXMLDocGet()">获取当前时间</button>
<div id="loadXMLDocGet"></div>
//
ajax-get.php
<?php
    echo "当前时间为：".date('Y-m-d H:i:s', time());
?>

GetUrl 请求 demo

<script>
function loadXMLDocGetUrl()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("loadXMLDocGetUrl").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/demo/ajax-get-url.php?fname=小&lname=尾巴",true);
xmlhttp.send();
}
</script>
<h2>GetUrl 请求 demo</h2>
<button type="button" onclick="loadXMLDocGetUrl()">GetUrl 请求</button>
<div id="loadXMLDocGetUrl"></div>
//
ajax-get-url.php
<?php
$fname = $_GET['fname'];
$lname = $_GET['lname'];
    echo "</br><code>你好，".$fname.$lname."，今天过得怎么样？</code>";
?>

参考自 W3C