Java Script里Ajax操作

来源：互联网发布：网络延迟怎么解决编辑：程序博客网时间：2024/05/21 09:42

上一章我们谈了下原生JS里面的面向对象，今天我就给大家说下我对原生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);            }        }    }

以上就是如何用JS来操作Ajax然后把数据渲染到页面上

0 0