Ajax实例解析

服务器端(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                 对象状态值

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