西安HTML5培训给刚入门前端工程师前后端交互指南

作为刚接触前端的不久的童鞋，大家都会兴奋于CSS和JS所带来漂亮界面，然而，前端工程师除了UI重构外，还有非常重要的职责在正确的区域渲染出服务端的数据。毕竟，我们要构建一个大的web应用，必然不是普普通通的静态页面构成。西安

下文将罗列将来前端工程师应该必备的同后端打交道的常用技能。

服务端渲染

谈起服务端渲染，对于动态服务而言，这个世界上跑的大多数页面都经历过服务端的数据渲染，接口->前端赋值->模版渲染 。这一切都在服务器完成，我们查看源码时候，可以看到完整的html代码，包括每个数据值。

常用的php模版有，Smarty,Blade,Mustache,如果你们团队使用Smarty，我们可以看到一些view的文件里会前套Smarty的模版语言;

<div>
{foreach $list as $item}
  <h3>{$item['name']}</h3>
  <p>{$item['desc']}</p>
{/foreach}
</div>
如果Node,js作为服务端的话，这个时候我们可以使用前端模版渲染的模块，比如ejs,doT,jade等等。

注意不同的模版可能存在不同模版语法，需要自己学习使用

AJAX

当然服务端渲染随着单页应用以及Restful接口的兴起，Ajax逐渐成为目前前后端交流为频繁的方式。Ajax实际核心是XmlHttpRequest,我们通过对该对象的操作来进行异步的数据请求。

// 一般流程
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function(res) {
  // your code to do something
});
oReq.open("GET", "http://www.ex***/example.txt");
oReq.send();
实际上我们接触到多jQuey就有很好的封装，比如$.ajax，$.post等，如果用Angular的话我们可以用$http服务，除了这些之外，我们可以使用第三方的Ajax库qwest等。

如果使用Ajax的话，我们不得不面临一些问题，由于同源限制的问题，我们不得不去克服这个问题，这个时候我们可以要求服务端，设置header头，header('Access-Control-Allow-Origin: *');或者叫设置nginx配置

add_header 'Access-Control-Allow-Origin' 'http://yo***';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET';
当然这不是做法，实际现在我们也可以这么做:

ajax -> 代理 -> API
我们可以用php的curl或者通过服务器的配置来实现反向代理。从而达到同源的效果。

前端工程师一定要要求每次请求的数据接口一严格遵循基础的数据结构要求，尽管js是弱变量类型语言，但是我们还是应该严格要求，是数组，就不应该是对象，是数字就不应该是字符串，这样做有利于降低隐藏bug并且提升前后端工作效率。

JSONP

JSONP算作JSON的一种”使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于CORS的支持，我们可以简单的将数据封装成一个js脚本请求，当然我们在jquery中会用到。

function logResults(json){
console.log(json);
}
$.ajax({
url: "https://yo***/api",
dataType: "jsonp",
jsonpCallback: "logResults"
});
如果你对前端HTML5开发感兴趣，就来蓝鸥参加就业培训，西安靠谱培训机构！