原生JS的Ajax操作

原生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操作渲染到我们的网页中

第一步：创建对象

[html] view
plain copy

var _http;//声明一个变量，存放XMLHttpRequest对象  

  if(window.XMLHttpRequest) {  

      _http = new XMLHttpRequest();  

  } else {  

      _http = new ActiveXObject("Microsoft.XMLHTTP");  

  }  

第二步：打开接口的连接，并发送请求

   

[html] view
plain copy

_http.open("get", "http://datainfo.duapp.com/shopdata/getclass.php");  

_http.send();  

第三步：获取数据，DOM渲染到页面上

[html] view
plain copy

_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);  

           }  

       }  

   }