JS学习系列4-Ajax

最新推荐文章于 2024-11-12 11:19:19 发布

FSL-在学习

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量1.1k

点赞数

文章标签： javascript vue.js html5 html css

本文链接：https://blog.csdn.net/m0_37643322/article/details/108743374

版权

Ajax

1.概念

AJAX 即 “Asynchronous Javascript And XML”，是指一种创建交互式网页应用的网页开发技术。AJAX = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
AJAX不是一种新的编程语言，是一种用于创建更好更快以及交互性更强的Web应用程序的技术，能够实现无刷新更新数据从而提高了用户体验。
**通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。**而传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

2.关于同步和异步
同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事
异步：请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕
Ajax发送请求时候分为同步和异步：
异步传输方式是用的最多的也是默认的方式，避免了服务器检索给用户带来的时间延迟。在异步传输时候，它只是在后面悄悄进行着，用户仍旧可以做他做的事情，不会给用户任何的等待的感觉。给了用户良好的体验。
同步传输方式却相反，发出了同步请求之后，浏览器就在等待，等待服务器检索完毕，返回结果。此时，鼠标会变成等待的形状，提醒我们的用户请求还没有响应。我们的用户就什么也干不成，能够做的一件事就是——等待

3.Ajax所包含的技术
Ajax由下列技术组合而成。
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
在上面技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。

4.Ajax原理
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对XMLHttpRequest有所了解。

5.XmlHttpRequest对象
首先，我们先来看看XMLHttpRequest这个对象的属性。
　　它的属性有：
　　onreadystatechange 每次状态改变所触发事件的事件处理程序。
　　responseText 从服务器进程返回数据的字符串形式。
　　responseXML 从服务器进程返回的DOM兼容的文档数据对象。
　　status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
　　status Text 伴随状态码的字符串信息
　　readyState 对象状态值
　　　　0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
　　　　1 (初始化) 对象已建立，尚未调用send方法
　　　　2 (发送数据) send方法已调用，但是当前的状态及http头未知
　　　　3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
　　　　4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
标准的创建XMLHttpRequest对象的方法:

function CreateXmlHttp() {
    //非IE浏览器创建XmlHttpRequest对象
    if (window.XmlHttpRequest) {
        xmlhttp = new XmlHttpRequest();
    }
    //IE浏览器创建XmlHttpRequest对象
    if (window.ActiveXObject) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {
            try {
                xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
            }
            catch (ex) { }
        }
    }
}

function Ustbwuyi() {
    var data = document.getElementById("username").value;
    CreateXmlHttp();
    if (!xmlhttp) {
        alert("创建xmlhttp对象异常！");
        return false;
    }
    xmlhttp.open("POST", url, false);
   xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            document.getElementById("user1").innerHTML = "数据正在加载...";
            if (xmlhttp.status == 200) {
                document.write(xmlhttp.responseText);
            }
        }
    }
    xmlhttp.send();
}

函数首先检查XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），即数据已经发送完毕。然后根据服务器的设定询问请求状态.

如果一切已经就绪（status=200），那么就执行下面需要的操作。对于XmlHttpRequest的两个方法，open和send，其中open方法指定了：

向服务器提交数据的类型，即post还是get。
请求的url地址和传递的参数。
传输方式，false为同步，true为异步。默认为true。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，而后一个是会覆盖前一个的，这个时候当然要指定同步方式。

XMLHttpRequest是完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，因为ajax无非是两个过程，发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。

6.Ajax的优点

Ajax的给我们带来的好处大家基本上都深有体会，在这里我只简单的讲几点：

最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

7.Ajax的缺点

AJAX干掉了Back和History功能，即对浏览器机制的破坏
AJAX安全问题
对搜索引擎支持较弱
破坏程序的异常处理机制
违背了URL和资源定位的初衷
AJAX不是很好支持移动设备

8.Ajax注意点及适用和不适用场景

注意点：

Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应，没有恰当的预读数据，或者对XMLHttpRequest的不恰当处理，都会使用户感到延迟，这是用户不希望看到的，也是他们无法理解的。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。

Ajax适用场景：