JS中ajax学习基础教程

当接触一项新技术时，首先我们要问自己四个问题，如果这四个问题我们都能学习并理解到位，那么可以说这个新技术你已经完成了初步掌握，下面我们就这四个问题来说ajax应该怎么学习。

一，ajax是什么？

AJAX = 异步 JavaScript 和 XML。是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

二，ajax用在哪里？

简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这种类型的适合用ajax，避免了属性整个页面带来的资源浪费。

三，为什么要使用ajax？

减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。无恻新更新页面，减少用户心理和实际的等待时间。带来更好的用户体验。可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和速写的负担，节约空间和宽带租用成本。可以调用外部数据。基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。进一步促进页面呈现和数据的分离。

四，怎么使用ajax？

1，创建XMLHttpRequest对象

/* 第一步：创建对象*/    var _http;//声明一个变量，存放XMLHttpRequest对象    if(window.XMLHttpRequest) {        _http = new XMLHttpRequest();    } else {        _http = new ActiveXObject("Microsoft.XMLHTTP");    }
2，打开和服务器之间的连接，发送请求。（这里使用的是淘宝接口）

 /* 第二步：打开接口的连接，并发送请求*/    _http.open("get", "http://datainfo.duapp.com/shopdata/getclass.php");    _http.send();

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

/*第三部：获取数据，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);            }        }    }

通过以上的学习，相信你已经对ajax有一些基础的了解，再通过练习使用，就可以对ajax有一个基本的掌握。