众所周知，如今网页的制作中多采用盒子模型，盒子模型结合flex布局可以完成几乎所有外观设计上的需求。然而盒子模型除了可以满足外观设计上的需求外，其最重要的一点优势在于，可以被便捷的动态生成。
盒子模型绝对不是一种设计起来效率最高的模型，为了完成特定的布局，大量的中间容器被浪费，并甚至可以导致各种各样奇奇怪怪的bug，然而人们依旧喜爱盒子模型，不单单是因为其便于理解，更是因为它能够更好地融入到如今大前端的环境中。
所谓大前端，是指服务器仅仅提供数据和读写接口，对于数据的处理，表现，都需要放在前端执行。对于接触编程不多的独立开发者来说，大前端的思想极大地降低了网页制作的门槛。以前必须要通过服务器来完成的事情，如今在不那么严谨的JavaScript上就可以很方便的实现，更别提这种技术省却的在服务器和前端交互中产生的麻烦。而所谓大前端技术的核心，不外乎一个，那便是根据数据生成内容，这也是我们网页编程中的主要工作。阅读本文后你应该能够独立完成根据任意数据自动生成的网页。
一、什么是ajax？
ajax是一种异步加载的技术，所谓异步加载便是网页在向服务器发送请求后不等待服务器的反馈而直接进行其他渲染，在服务器返回数据后再对数据进行处理的一种技术。其显著特征是不需要刷新页面而重新加载页面的内容，因此增加了用户操作的流畅感，从而提高了用户体验。最为重要的是，它可以减少对服务器的压力，将原本需要服务器端进行渲染的html放回至浏览器，因此大大提高了服务器的负载量和效率，也是所谓大前端的核心。
我们使用jquery来实现ajax.
$.ajax({
url:"https://www.jhdsoftware.com/php/hallo",//请求的地址
method:"POST",//请求的方法 @GET，POST
data:{//传递的数据，冒号前为名称，冒号后为数据。
q:1,
message:hello,
},
success:function(res){//请求成功后的回调函数
console.log(res);//在控制台中显示服务器的回应，应为|hello|
}
});
通过这样的函数我们可以从服务器获取数据，为我所用。在进几年来，比较通用的数据格式是JSON，JSON是一种对于对象和数组非常友好的数据格式，同时也具备着储存和处理大批量数据的能力。因此我所配置的服务器接口所返回的数据多为JSON格式。
二、如何处理数据
当我们从服务器中获取到数据后，我们需要使用这些数据。正常来说我们处理所获取数据的第一步便是将他在控制台中打印出来，进行这个操作的目的第一是在于确定数据的结构，第二是在于确认我们确实获取到了我们所需要的数据，可以说，我们在实际开发中所遇到的问题有百分之80以上都是由于操作了错误，不完整的数据所导致的，所以当我们面对一个看似无法解决的bug时，第一步便是确定我们所处理的东西，到底是不是我们认为我们在处理的东西，由于js的特性，也许我们在网页编程中对于空对象的操作不会导致什么后果，但是如果我们在服务器或其他更为底层的平台上操作时，这些小小的失误很有可能造成惨痛的后果。
在将数据打印出来之后，我们应该对于数据的结构有着一定的认识，剩下的便是将数据转化为可视化的页面，而在这里我不得不介绍一种可能大家接触较少的技术“HTML DOM”。
所谓的html文档，实际上是由大大小小的盒子所组成的树，而HTMLDOM便是对这种关系的抽象化，他把html的标签视为节点，在有限次的对父节点访问中一定会到达树的根部，也就是html标签。而我们所需要实际利用的，也不过是制作节点和插入节点而已。
在制作节点之前，我们首先应该直接使用html标签制作出自己想要的效果，然后再将这些标签转制为对于节点的操作。
//制作和插入节点的过程
var newItem=document.creatElement(@elementTagName);//创建节点
newItem.setAttribute(@someIndex,@someValue);//设置节点属性
document.getElementById(@id).appendChird(newItem);//将节点插入到指定节点中。
网友评论