原生JS Ajax操作

最新推荐文章于 2024-09-19 16:13:24 发布

chongxiaocheng

最新推荐文章于 2024-09-19 16:13:24 发布

阅读量1.4k

点赞数 1

分类专栏： js-ajax 文章标签： web前端 ajax javascript 前端开发

本文链接：https://blog.csdn.net/chongxiaocheng/article/details/70948671

版权

js-ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原生JS Ajax操作

Ajax不是一个新技术！是前端页面与后台数据交互的一种手段

Ajax用在什么地方？
需要用向服务器请求数据的环境中！

核心：操作XMLHttpRequest对象
操作步骤：
**1. 创建XMLHttpRequest对象

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

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

<body>

<ul id="classType">

</ul>
</body>
<script>
var _ct = document.getElementById("classType");
/* 第一步：创建对象*/
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);
}
}
}

注：后台获取的数据一般有不同的几种数据类型

渲染到前端页面时应采用相对应的数据解析方法

</script>