动态网页AJAX技术

AJAX技术

AJAX = Asynchronous JavaScript and XML.

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

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

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。

本节目标：了解AJAX技术，并能够识别

本节阅读需要（20）min。
本节实操需要（20）min。

---

---

前言

直观的说来，AJAX就是前端的魔术。
我们看到很多网页是可以各种操作各种秀，根据访问者的行为还能特定的反应！！！
为什么说很像魔术呢？
因为ajax绝大部分时候是通过修改css，js等去完成特定的视觉效果的变换的。就像魔术通过各种道具获得不同的视觉效果。

AJAX的目的是交互。

---

一、判断网页

通过功能判断

1. 运用 XHTML+CSS 来表达资讯；一般显示,隐藏切换这些效果都是ajax
2. 运用 JavaScript 操作 DOM（Document Object Model）来执行动态效果；比如鼠标移动有动态效果
3. 运用 XML 和 XSLT 操作资料;比如网页版的文档应用
4. 运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换；比如某个窗口可以从服务器上加载内容

ajax请求通过network选项中的xhr请求来查找，在上述网站进行翻页，可以看到如下如下所示的ajax请求链接
以edx为例.

这是第四种，因为有了数据交换，而且链接还没变，我们刷星过程中没变换。

记住要重新刷新才可以看到加载过程。

通过最终的HTML判断

我们F12一般是动态加载基本全部结束。除了少量的不满足条件，暂时没有触发。

一般这些event就是，但是这个只能推测。

通过代码判断

如果ajax有数据交换一般会有如下代码：

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

二、Ajax的实现途径

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

向服务器发送请求

var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

接受服务器响应

浏览器会自动的接受并存储为对象的。
形如下面这种：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

也就是会对具体的节点做一些操作，上面的就是添加了一段HTML。

---

总结

ajax一般采用的都是json作为返回数据的格式。因为多快好省
当然这也是判断方式这是最明显的一种ajax的情形，见上面的情形4.

ajax的内容边界还是比较模糊的，理论上说现在的前端框架多少都有ajax的影子。
断定ajax的依据是HTML内容改变了，但是网址没有变。
也有的人认为只有局部数据交换才是ajax，其他的操作都属于js。。。我觉得不太好
一般也只有简单的文本类网站才不会用到ajax吧。。。