【前言】前期在学习新闻发布系统和JavaScript就对AJAX有了一点儿了解，知道他可以异步刷新页面，但是具体是怎么实现的还不是很了解，学习完AJAX知道了具体是怎么实现的。

一、什么是AJAX

1.概念：

AJAX = 异步 JavaScript 和XML，是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX可以是网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，传统的网页如果需要更新内容，必须重载整个网页面。

2.工作原理

二、如何实现AJAX

1.创建XMLHttpRequest对象

XMLHttpRequest 是 AJAX的基础，用于在后台与服务器交换数据，这就是我们实现不重新加载整个网页的情况下，对网页的某部分进行更新的关键所在。

xmlhttp.open("GET","ajax_info.txt",true);

xmlhttp.send();

注意：

XMLHttpRequest 对象如果要用于 AJAX 的话，其open() 方法的 async 参数必须设置为 true：

xmlhttp.open("GET","ajax_test.html",true);

2.GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

3.使用AJAX的效果

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

三、实例

<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<script>
function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
 {
   document.getElementById("txtHint").innerHTML="";
    return;
 }
  if (window.XMLHttpRequest)
 {
    // IE7+,Firefox,Chrome,Opera,Safari浏览器执行代码
    xmlhttp=new XMLHttpRequest();
 }
  else
 {
    // IE6,IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
  xmlhttp.onreadystatechange=function()
 {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
   }
 }
  xmlhttp.open("GET","/try/ajax/gethint.PHP?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<h3>在输入框中尝试输入字母 a:</h3>
<form action="">
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p>

</body>
</html>

执行效果：

【总结】总结一下，了解这个知识的来龙去脉，弄清楚五大基本问题这样对这个知识就不会觉得学完之后脑海里什么都没有留下。欢迎大家一起交流学习！

原文地址：https://www.jb51.cc/ajax/160524.html

快速了解AJAX

一、什么是AJAX

二、如何实现AJAX

三、实例

相关推荐