Ajax工作原理

最新推荐文章于 2022-06-23 21:42:50 发布

qianmacao

最新推荐文章于 2022-06-23 21:42:50 发布

阅读量922

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/findmyself_for_world/article/details/42264893

版权

Ajax 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Ajax工作原理简单来说，就是通过XmlHttpRequest 来向服务器发送异步请求，然后获取数据，Javascript操作DOM更新页面。

XmlHttpRequest是Ajax的关键技术，也就是通过它来达到向服务器发送异步请求并获取数据进行处理，而不阻塞用户，达到无刷新的效果。是一种支持异步请求的技术。

XmlHttpRequest的属性有：

1.onreadystatechange:每次状态改变所触发事件的事件处理程序

2.responseXML:从服务器返回数据的DOM兼容的数据格式

3.responseText:从服务器返回数据的字符串形式

4.status:从服务器返回的数字代码，如404 ，200

5.status text:伴随状态码的字符串信息

6.readyState:对象状态值

0（未初始化）：对象已建立，但是并未初始化（尚未调用open）

1（已初始化）：对象已经初始化，还没有调用send方法

2（发送数据）：send方法已经调用，但是当前状态和http头未知

3（数据传送中）：已接收部分数据，但是因为响应和http头不全，所以调用responseTest和responseXml获取数据出错

4（完成）：数据发送完成，这时调用responseTest和responseXml获取完整数据

由于浏览器之间的差异，所以创建XmlHttpRequest之间存在着差别。但是差别主要体现在ie和非ie得浏览器之间。

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对象相当容易。首先，声明一个全局变量xmlHttp用来保存即
将创建的XMLHttpRequest对象的引用；然后，在createXMLHttpRequest()方法中完成具体创建
工作。因为IE与其他浏览器对XMLHttpRequest 对象的实现方法不同，因此在创建时，通过一
个分支语句进行判断。如果window.ActiveXObject调用返回true，则证明为IE浏览器，那么就
通过传递“Microsoft.XMLHTTP”给ActiveXObject()来创建XMLHttpRequest对象，否则就把
XMLHttpRequest实现为本地JavaScript对象。XMLHttpRequest对象在不同浏览器上的实现是兼
容的，所以可以用同样的方法访问XMLHttpRequest的方法和属性。

2．利用XMLHttpRequest对象发送简单请求
创建了XMLHttpRequest对象，并了解了XMLHttpRequest对象的方法和属性之后，让我们来
看看怎样利用XMLHttpRequest对象发送简单的请求。利用XMLHttpRequest对象发送简单请求的
基本步骤如下：
1）创建XMLHttpRequest对象实例。
2）设定XMLHttpRequest对象的回调函数，利用onreadystatechange属性。
3）设定请求属性：设定HTTP方法（GET或POST）；设定目标URL。利用open()方法。
4）将请求发送给服务器。利用send()方法。
3．利用DOM对服务器响应进行处理
前面已经设置了回调函数，回调函数正是用来处理服务器响应信息的。但是，别忘了我们
的最终目的：解决页面完全刷新和缺乏交互性的问题。在服务器对我们的请求信息作出响应
后，我们就得实现页面的无缝更新（就是无闪烁的更新信息）。要实现这一点，那么就不得不
提到DOM了。
DOM（Document Object Model）,文档对象模型，是以面向对象方式描述页面文档的对象
模型。DOM中定义了，与平台和语言无关的，用来表示和修改文档所需的对象、以及这些对象
的属性和方法。通过DOM，我们可以把页面上的数据和结构抽象成一个树型表示，进而可以通
过DOM中定义的属性和方法对文档进行操作，如遍历、编辑等。
这样，服务器相应信息就可以通过DOM的方法和属性，动态的更新到页面的相应节点。
从而使用户感觉不到刷新过程的存在，提高了交互性。

如上所示，首先检查XmlHttpRequest的整体状况（readystatus=4）确保它已经完成，即数据已经发送完毕。然后根据服务器的设定询问请求状态（status=200），然后就执行下面需要的操作。

XmlHttpRequest的两个方法send()和open(),open()方法指定了：

1.向服务器提交数据的类型，即post还是get

2,请求的url还有传递的数据

3.传输的方式，false为同步，true为异步。如果是异步方式，客户端就不需要等待服务器的响应。如果是同步，客户端需要等待服务器端的响应再进行下面的操作。这要根据实际的业务需求，有时客户端会一次发送多个请求，后面的请求可能会覆盖前面，所以这时就需要指定同步。

send用来发送请求。

ajax的优点

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

1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。

　 2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。

　 3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

ajax的缺点

　　下面我着重讲一讲ajax的缺陷，因为平时我们大多注意的都是ajax给我们所带来的好处诸如用户体验的提升。而对ajax所带来的缺陷有所忽视。

　　下面所阐述的ajax的缺陷都是它先天所产生的。

　1、ajax干掉了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）

但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。

2、安全问题

技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。至少从目前看来，像ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。关于这个问题，我曾经在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来我自己做了一次试验，分别采用ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。

5、另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。例如，我给你一个url地址，如果采用了ajax技术，也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。

6、一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，比如说我们在手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的，当然，这个问题和我们没太多关系。

下面是一个完整的例子：

<html>
<head>
<title>Ajax应用实例</title>
<script type="text/javaScript">
var xmlHttp;
var requestType="";
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(theRequestType){
requestType = theRequestType;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET","Response.xml",true);
xmlHttp.send(null);
}
function myCallback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
if(requestType=="all")
listAll();
else if(requestType=="north")
listNorth();
}
}
}
function listAll(){
var xmlDoc = xmlHttp.responseXML;
var allProvs = xmlDoc.getElementsByTagName("prov");
outputList("all",allProvs);
}
function listNorth(){
var xmlDoc = xmlHttp.responseXML;
var north = xmlDoc.getElementsByTagName("north")[0];
var northProvs = north.getElementsByTagname("prov");2014/12/30 AJAX原理
data:text/html;charset=utf8,%3Cp%20class%3D%22MsoNormal%22%20style%3D%22color%3A%20rgb(68%2C%2068%2C%2068)%3B%20fontfamil… 2/2
outputList("north",northProvs);
}
function outputList(title,provs){
var out=title;
var currentProv = null;
for(var i=0;i<provs.length;i++){
currentProv = provs[i];
out = out + “<br/>” + currentProv.childNodes[0].nodeValue;
}
document.getElementById(title).innerHTML = out;
}
</script>
</head>
<body>
<h1> Ajax应用实例</h1>
<form action="#">
<input type="button" value="列出所有沿海省市"
cοnclick="startRequest('all'); "/>
<div id="all"></div>
<input type="button" value="列出江北沿海省市"
cοnclick="startRequest('north'); "/>
<div id="north"></div>
</form>
</body>
</html>
<!--Response.xml---------------------------------------------------------->
<?xml version="1.0"encoding="utf-8" ?>
<provs>
<north>
<prov>辽宁</prov><prov>河北</prov><prov>天津</prov>
<prov>山东</prov><prov>江苏</prov>
</north>
<south>
<prov>浙江</prov><prov>福建</prov><prov>广东</prov>
<prov>广西</prov><prov>海南</prov><prov>上海</prov>
<prov>台湾</prov><prov>香港</prov><prov>澳门</prov>
</south>
</provs>

其实原理很简单，Ajax通过javascript创建XmlHttpRequest对象吗，然后通过javascript调用这个对象实现和服务器的异步通信，然后javascript调用DOM对象的属性和方法实现页面的不完全刷新。