ajax优缺点及原理,Ajax实例解析，异步机制以及优缺点

Ajax实例解析

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

服务器端(PHP):

客户端：

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头不全，这时通过responseBody和responseText获取部分数据会出现错误

4(完成)

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

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)对搜索引擎的支持比较弱。