原生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);
- }
- }
- }