AJAX - 基础

什么是 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


GET 请求代码
<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


GetUrl 请求代码
<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

返回文章列表 文章二维码 打赏
本页链接的二维码
打赏二维码
期待你的评论