Java Script里Ajax操作

上一章我们谈了下原生JS里面的面向对象，今天我就给大家说下我对原生JS里面的Ajax的理解。

第一点说下什么是Ajax？

Ajax是异步的Java Script和XML技术！某些领域也被称为局部刷新技术！

XML可扩展标记语言和HTML一模一样

HTML中，已经规定了只能出现哪些标签，规定了每一个标签的含义如：p是段落、b加粗、a超链接

XML中，没有规定，所以可以出现任意的标记

Ajax用来做什么？

主要用来在前段页面中向服务器后端请求数据。

Ajax用在哪里？

主要用再前端开发过程中，需要向服务器请求数据的时候使用。

Ajax不是一个新技术

  Ajax核心：操作XMLHttpRequest对象2

原生JS运用Ajax的步骤：

1、创建XMLHttpRequest对象

2、打开和服务器之间的连接、发送请求

3、获取服务器返回的数据，DOM操作渲染到我们的网页中

第一步：创建对象

  var _http;//声明一个变量，存放XMLHttpRequest对象
    if(window.XMLHttpRequest) {
        _http = new XMLHttpRequest();
    } else {
        _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);
            }
        }
    }

以上就是如何用JS来操作Ajax然后把数据渲染到页面上