Ajax实例解析,异步机制以及优缺点

作者:日期:2014-02-26 16:49:09 点击:217

Ajax实例解析

1.Ajax读取一个xml文档并进行解析的实例;

服务器端(PHP):

11.jpg

客户端:

var ajax = new XMLHttpRequest();
function sendMessage() {
    ajax.open("get", "http://localhost/zhufengpeixun/zhufengpeixun.php", true);
    ajax.send();
    ajax.onreadystatechange = fn;
    return false;
}
function fn() {
    if (ajax.readyState == 4 && ajax.status == 200) {
        var xmlDoc = ajax.responseBody;
        console.log(xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue);
        console.log(xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue);
    }
}

2.简述Ajax异步机制,Ajax有哪些的好处和弊端,介绍一下Ajax异步请求的原理和过程?

XMLHttpRequest对象是Ajax技术的核心。XMLHttpRequest对象使得JS脚本能够实现对服务器的异步请求,即向后台发送请求并接收服务器响应,通过动态获取响应数据来更新局部页面。

首先,我们先来看看XMLHttpRequest这个对象的属性:

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

responseText            从服务器进程返回数据的字符串形式。

responseXML           从服务器进程返回的DOM兼容的文档数据对象。

status                         从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)

statusText                 伴随状态码的字符串信息

readyState                 对象状态值

含义

0(未初始化)

对象已建立,但是尚未初始化(尚未调用open方法)

1(初始化)

对象已建立,尚未调用send方法

2(发送数据)

send方法已调用,但是当前的状态及http头未知

3(数据传送中)

已接收部分数据,因为响应及http头不全,这时通过responseBodyresponseText获取部分数据会出现错误

4(完成)

数据接收完毕,此时可以通过通过responseXmlresponseText获取完整的回应数据

XMLHttpRequest对象向服务器发送请求有2种方式:GET和POST:

Get方式:

用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是,它会被客户端的浏览器缓存起来,那么,别人就可以从浏览器的历史记录中,读取到此客户的数据,比如帐号和密码等。因此,在某些情况下,get方法会带来严重的安全性问题。

Post方式:

当使用POST方式时,浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器,而不是作为URL地址的参数进行传递,使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。

总之,GET方式传送数据量小,处理效率高,安全性低,会被缓存,而POST反之,代码如下:

var oRequest = new XMLHttpRequest();
//GET方式发送
function sendMessageByGet() {
    oRequest.open("GET", "http://localhost/4/wc.php?'&name='+name+'&age='+age", true);
    oRequest.send(null);
    oRequest.onreadystatechange = fnCallBack;
}
//POST方式发送
function sendMessageByPost() {
    oRequest.open("POST", "http://localhost/4/wc.php", true);
    var params = "&name=" + name + "&age=" + age;
    oRequest.send(params);
    oRequest.onreadystatechange = fnCallBack;
}
//回调函数
function fnCallBack(oRequest) {
    if (oRequest.readyState == 4 && oRequest.status == 200) {
        alert(oRequest.responseText); //获取服务器字符串流
        //alert(oRequest.responseXML);//获取服务器XML流
    }
}

优点:

(1)页面无刷新,在页面内与服务器通信,给用户的体验非常好。

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

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

(4)基于标准化(xml和json)的并被广泛支持的技术,不需要下载插件或者小程序。

(5)进一步促进页面和数据的分离。

缺点:

(1)AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性。

(2)AJAX只是局部刷新,所以页面的后退按钮是没有用的。

(3)对流媒体还有移动设备的支持不是太好等。

(4)对搜索引擎的支持比较弱。

上一篇: JavaScript关于this的绑定与涉及到函数的调用方式

下一篇: 文思海辉前端面试题