原生JS Ajax操作

原生JS Ajax不是一项新技术，其核心是：操作XMLHttpRequest对象。

什么是Ajax？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

什么地方使用Ajax？

在有与后端有数据交互的时候使用Ajax，如：注册页判断用户名是否被注册过，在登陆页用户名或密码是否正确。

原生JS Ajax操作的步骤：

1.创建XMLHttpRequest对象

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

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

下面就分别说说这三个步骤：

1.创建XMLHttpRequest对象

var _ct = document.getElementById("classType");
/* 第一步：创建对象*/
var _http;//声明一个变量，存放XMLHttpRequest对象
if(window.XMLHttpRequest) { //判断IE与W3C
_http = new XMLHttpRequest();
} else {
_http = new ActiveXObject("Microsoft.XMLHTTP");
}

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

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

3.获取服务器返回的数据，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++) { //DOM操作
var _li = document.createElement("li"); //创建li标签
_li.textContent = _jsonArr[i].className;
_ct.appendChild(_li);
}
}
}