当前位置: 首页 > 手册 > ajax手册 > AJAX 教程

AJAX 教程

时间:2020-10-10 22:43来源:未知 点击:
分享到:

AJAX 简介

 

 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

 AJAX 教程涵盖了适用于初学者和专业人士的AJAX技术的概念和示例。

 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

 AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

 AJAX 允许您仅将重要信息发送到服务器而不是整个页面。因此,只有来自客户端的有价值数据才会路由到服务器端。它使您的应用程序具有交互性和更快。

如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tryrun 1</title>
</head>
<body>
    <div id="view">
        <p>点击下面的按钮,将 Ajax 请求回来的数据更新在该文本内</p>
    </div>
    <button type="button" id="btn">发起 Ajax 请求</button>
 
    <script>
        document.getElementById("btn").onclick = ajaxRequest;
 
        function ajaxRequest () {
            var xhr = new XMLHttpRequest();
 
            xhr.open("GET", "ajax_info.txt", true);
            xhr.send();
 
            xhr.onreadystatechange = function(){
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById("view").innerHTML = xhr.responseText;
                }                
            }
        }
    </script>
</body>

 

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。


您应当具备的基础知识

在继续学习之前,您需要对下面的知识有基本的了解:

  • HTML / XHTML
  • CSS
  • JavaScript / DOM

如果您希望首先学习这些项目,请在我们的首页访问这些教程。


什么是 AJAX ?

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。


AJAX 工作原理

AJAX


AJAX是基于现有的Internet标准

AJAX是基于现有的Internet标准,并且联合使用它们:

  • XMLHttpRequest 对象 (异步的与服务器交换数据)
  • JavaScript/DOM (信息显示/交互)
  • CSS (给数据定义样式)
  • XML (作为转换数据的格式)

lamp  AJAX应用程序与浏览器和平台无关的!


Google Suggest

在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面:当您在谷歌的搜索框输入关键字时,JavaScript 会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。


今天就开始使用 AJAX

AJAX 基于已有的标准。这些标准已被大多数开发者使用多年。

请阅读下一章,看看 AJAX 是如何工作的!


(责任编辑:admin)
推荐教程
关于我们--广告服务--免责声明--本站帮助-友情链接--版权声明--联系我们--网站地图          黑ICP备17004983号-1