标签：使用Ajax，只需数行代码即可快速获取指定div中的数据库信息 (ajax指定div获取数据库)

使用Ajax，轻松快速获取指定div中的数据库信息 随着web技术的不断发展，笔者相信大家对Ajax这个词一定不会陌生。它是一种在页面内部进行数据交互的技术，其更大的特点在于可以实现页面的异步加载。相信各位已经用过很多的基于Ajax的网站，例如豆瓣电影，展示电影图片和简介的时候，没有刷新页面同时自动加载，就是使用了Ajax技术。 本文主要介绍。对于大多数网站而言，动态数据是来源于数据库的，而对于我们Web前端工程师，如何通过Ajax技术能快速地将数据库数据在页面上展示出来，就是我们所需要考虑的问题。 在针对以上问题之前，我们先简单描述一下什么是Ajax。Ajax就是JavaScript技术的应用，通过对JavaScript的XMLHttpRequest对象进行操作，实现了异步加载页面数据的技术。使用Ajax，获取后台数据后，可以脱离传统页面请求的方式，实现无须重载整个页面即可更新部分数据，为网页软件提供了更好的交互效果。 那么，我们如何使用Ajax才能轻松获取到我们想要的数据呢？接下来，笔者会结合实例代码来说明如何快速获取指定div中的数据库信息。 我们要确定一个目标div，这个目标div是用来放置我们从后台获取到的数据。例如下图中绿色部分的div  接着，我们来看看一段简单的Ajax代码如下： “`html var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById(“targetDiv”).innerHTML = xmlhttp.responseText; } } xmlhttp.open(“GET”,”getData.php”,true); xmlhttp.send(); “` 如上面的代码所示，我们定义了一个id为“targetDiv”的div标签，并在JavaScript中通过document.getElementById()方法获取该div对象。然后，通过new XMLHttpRequest()创建一个XMLHttpRequest对象，并进行onreadystatechange的设置，在onreadystatechange内部通过readyState和status判断请求是否已经完成。 当readyState等于4时，表示数据已经完全接收，而status为200，则表示请求成功，这个条件的判断也可以理解为是否连接上了后台服务器，成功了，那么再通过 document.getElementById(“targetDiv”).innerHTML方法获取到数据并将其填充给目标div。 具体地，这里是XmlHttpRequest相关属性的解析： – readyState：XMLHttpRequest对象的状态，0、1、2、3、4五个值，其中0表示未初始化，1表示正在加载中，2表示已经加载，3表示数据传输中，4表示数据传输完毕. – status：表示服务器返回的HTTP状态码，200表示成功，404表示资源未找到. – responseText：代表了服务端响应返回的内容，通常是一段json格式的字符串. send()方法发出请求。getData.php这个服务端文件用来返回后台数据，可以根据实际项目开发特点自己修改。 在此基础上，我们可以继续向下拓展，例如通过参数形式向后台传递数据，从而使得目标div中展示出来的数据更具针对性。下面的代码示范了通过Ajax实现向后台传递参数，并返回数据的方式： “`html var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById(“targetDiv”).innerHTML = xmlhttp.responseText; } } xmlhttp.open(“GET”,”getData.php?param1=”+param1+”&param2=”+param2,true); xmlhttp.send(); “` 这里我们通过参数的形式向后台传递了两个参数，分别是param1和param2。其中，url属性冒号后面的代码中的param1和param2就是传递的参数名，数据可以通过get方式传递。 以上是基于Ajax在页面内部实现数据的异步请求过程。在数据请求过程中，通过指定的div展示是我们经常使用到的一种数据展示方式，也是实现无刷新页面的展示机制。相信只要按照上述方法，即使你没有后端经验，也可以快速实现页面数据更新的效果。 综上所述，Ajax的特点和应用场景优点不言而喻，除了可实现异步刷新，还能够传递数据，对于数据传输方面有比较高的自由度。除了本文介绍的示例外，Ajax技术还可以应用到更多的场合，例如通过表格展示数据、表单提交、搜索联想等，所以掌握Ajax技术，对前端工程师而言是非常必要的一个技能点。 相关问题拓展阅读： jsp中，用ajax获取数据 jsp中，用ajax获取数据 PrintWriter out = response.getWriter(); out.println(“zhangsan”);; 页茄衡面不是有接收文本的方法么就卜纳和直接可以获型盯取了啊 jsp中用ajax获取数据的例子如下： jsp代码： 留首升旅学生系统 var XMLHttpReq = false; //ajax接口 function createXMLHttpRequest(){ if(window.XMLHttpRequest){ XMLHttpReq = new XMLHttpRequest(); }else if(window.ActiveXObject){ try{ XMLHttpReq = new ActiveXObject(“MSXML2.XMLHTTP”); }catch(e){ try{ XMLHttpReq = new ActiveXObject(“Mircsoft.XMLHTTP”); }catch(e1){} } } } function sendRequest(url){ createXMLHttpRequest(); XMLHttpReq.open(“GET”,url,true); XMLHttpReq.onreadystatechange = processResponse; XMLHttpReq.send(null); } function processResponse(){...