Ajax操作--原声JSAJAX操作

Ajax介绍：

Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据
Ajax的过程只涉及JavaScript、XMLHttpRequest和DOM。
Ajax不是一个新技术
核心：操作XMLHttpRequest对象

ajax 有那些优缺点?

优点：
通过异步模式，提升了用户体验.
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.
Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
Ajax可以实现动态不刷新（局部刷新）
缺点：
安全问题 AJAX暴露了与服务器交互的细节。
对搜索引擎的支持比较弱。
不容易调试。

操作步骤：

/* 第一步：创建对象*/
var _http;//声明一个变量，存放XMLHttpRequest对象
//做兼容
if(window.XMLHttpRequest) {//w3c
_http = new XMLHttpRequest();
} else {//ie
_http = new ActiveXObject(“Microsoft.XMLHTTP”);
}
/* 第二步：打开接口的连接，并发送请求*/
_http.open(“get”, “http://datainfo.duapp.com/shopdata/getclass.php“);
//打开接口链接
_http.send();//发送请求

/*第三部：获取数据，DOM渲染到页面上*/
_http.onreadystatechange = function() {
    if(_http.readyState == 4 && _http.status == 200){
        var _content = _http.responseText;//接受数据
        console.log(_content);
        var _jsonArr = JSON.parse(_content);// 将字符串转换成JSON对象
        console.log(_jsonArr);
        for(var i = 0; i < _jsonArr.length; i++) {
            var _li = document.createElement("li");
            _li.textContent = _jsonArr[i].className;
            _ct.appendChild(_li);
        }
    }
}