原生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

1. var _http;//声明一个变量，存放XMLHttpRequest对象  
2.   if(window.XMLHttpRequest) {  
3.       _http = new XMLHttpRequest();  
4.   } else {  
5.       _http = new ActiveXObject("Microsoft.XMLHTTP");  
6.   }  

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

   

[html] view plain copy

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

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

[html] view plain copy

1. _http.onreadystatechange = function() {  
2.        if(_http.readyState == 4 && _http.status == 200){  
3.            var _content = _http.responseText;//接受数据  
4.            console.log(_content);  
5.            var _jsonArr = JSON.parse(_content);// 将字符串转换成JSON对象  
6.            console.log(_jsonArr);  
7.            for(var i = 0; i < _jsonArr.length; i++) {  
8.                var _li = document.createElement("li");  
9.                _li.textContent = _jsonArr[i].className;  
10.                _ct.appendChild(_li);  
11.            }  
12.        }  
13.    }