常见前端面试题--AJAX原理

95 阅读 0 评论 63 点赞

我是靠谱客的博主明理面包，最近开发中收集的这篇文章主要介绍常见前端面试题--AJAX原理，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Asynchronous JavaScript And XML (异步 JavaScript及XML)
仅仅是一种新的技术，在Web浏览器与Web服务器之间来发送和接受数据，不需要用户作出改变时重载整个Web页面。
XMLHttpRequest
AJAX的核心是XMLHttpRequest对象，不同的浏览器创建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('msxm12.XMLHTTP');
            }
            catch (ex) {}
        }
    }
}

function XMLHR() {
    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();
}

步骤：
（1）函数首先检测XMLHttpRequest的整体状态并且保证它已经完成（readyState=4），即数据已经发送完毕。
（2）根据服务器的设定询问请求状态，如果一切就绪（status=200），于是就执行一下操作：

向服务器提交数据的类型，即post还是get
请求的url地址和传递的参数
传输方式，false为同步，true为异步。默认是true。若是异步通信方式（true），客户机就不等待服务器的响应。若是同步方式（false），客户机就要等到服务器返回消息后才去执行其他操作。（根据实际需求来指定同步/异步模式）
（3）Send方法来发送请求。
ajax就是两个过程，发送请求和响应数据，并且这是一种客户端的技术，而XMLHttpRequest正是处理了服务器端和客户端通信的问题。

Ajax的优点：
（1）页面无刷新，在页面内与服务器通信，给用户的体验非常好
（2）使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力
（3）可以把以前一些服务器负担的工作转嫁客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，
（4）基于标准化，并被广泛支持的技术，不需要下载插件或者小程序。
Ajax的缺点：
（1）ajax请求，会对浏览器后退机制（back按钮）产生破坏。
（2）安全问题，ajax技术就如同对企业数据建立一个直接通道，使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
（3）对搜索引擎的支持比较弱。
（4）如ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制，对调式带来了很大的困难。
（5）违背了url和资源定位的初衷。
（6）一些手持设备（如手机、PDA等）现在还不能很好的支持ajax。