[前端学习]AJAX部分学习笔记，第三天

跨域的由来

• 实际上浏览器为了保证安全性，对ajax使用了一种同源策略
• 同源的意思就是：ajax发送请求的url地址中，必须协议、域名、端口都相同才能获取到数据。如果有其中任意一种不同，那么就是跨域
• 解决跨域的方案有很多，包括：jsonp、iframe、H5新增API、flash等，但是目前最常用的方法还是使用jsonp来解决

jsonp原理

• 在html标签中规定了，script标签的src属性可以跨域发送请求，而jsonp就是利用这个特性来进行跨域
• 使用script标签有两种方法：
  • 一是直接静态的写script标签，它可以实现跨域获取数据。但是它的缺点是不灵活，并且如果标签中含有async属性(异步方式)，那么因为异步的特性，可能执行到你操作获取到数据代码时，数据还没返回来，那就没意义了
  • 而是动态创建script标签，动态设置src请求地址，追加到head标签中。这样就可以让跨域变得非常灵活
  • 重点说明动态创建并请求的原理：
    • 动态请求的方式，是让后端语言返回一段js代码字符串，而这段js代码字符串是一个函数调用。把想要获取到的数据，作为实参传入函数，这样返回调用代码时就能直接拿到数据并操作，并且哪怕动态创建默认是异步方式也不会受到影响，因为函数会声明提升，所以调用代码晚点传过来也是可以正常执行的
    • 所以，在发送请求前需要先声明一个函数，内部就是你想对数据操作的代码。另外为了更灵活，可以让函数名，作为参数传到后端，后端用你传过去的参数值作为函数名。相当于你就是自定义函数名了
• 总结：实际上jsonp跨域的本质就是让后端返回一段字符串到script标签中，然后js解析器会将字符串作为js代码处理并运行，所以你会发现返回的json格式字符串会被自动解析为对象，返回的函数调用字符串会解析并执行调用。还有一点要注意，使用jsonp方法发送跨域请求，只能通过get的方式，因为它是通过src属性的地址来发送的
• 文字描述较长，看完结合代码案例，就很清晰了

jqeury封装的jsonp方法

• jq中封装的jsonp跨域功能也是放在$.ajax()方法中，不过有几个参数属性要注意：
  • dataType属性的值必须显式的指定为jsonp
  • jsonp属性用来指定函数名参数的中参数名，例如?callback = fun，这段参数jsonp就是用来设置callback这个值的
  • jsonpcallback属性用来指定函数名参数中的值，也就是后端要用的函数名，就是上面例子中设置fun这个值
  • 操作返回数据的回调函数，依然是使用success属性

ajax和jsonp总结

• 关于ajax和jsonp跨域两种请求发送方式，基本知识点就学完了。在工作中可以更深入的去研究，目前掌握熟练使用
• 不管ajax还是jsonp都不是通过表单发送的数据，这点要分清楚，一般前端用到表单的场景就是几个固定的需求

渲染数据模板引擎

• 模板引擎的主要目的是为了获取到数据后的处理代码易读、便于维护、标准化。因为每个程序员风格或多或少都有不同，在处理请求到的数据时方式也不太一样
• 这就会让后期维护变得很不方便，因此就推出了模板引擎
• 模板引擎的实际功能就是通过它特有的格式来编写数据处理代码，并最终由引擎渲染来成为一段代码片段

artTemplate

• 很多大型互联网公司都推出了自己的模板引擎，比如BAT都有。这里重点学习腾讯的模板引擎artTemplate，因为它的渲染效率非常高
• 模板功能：以html的方式来书写，但是带有条件判断和循环遍历
• 大致用法：
  • 在script标签中书写模板代码，注意该标签要设置type=text/html，html文本格式
  • 然后在另一个script标签中使用模板API，template('上面所说标签的id'，要处理的数据)方法来渲染成html代码，最后追加
  • 注意使用模板引擎的API将数据对象传入后，会自动解析获取到里面的属性，所以直接调用属性名称即可
  • 如果要渲染的值本身就是html标签，那么引擎会自动转义为普通字符显示。在值前面加上#号就是不转义，不转义就会当作html标签来解析
  • 如果不想单独在一个标签中写模板，可以把模板内容以字符串的形式来拼接，然后调用template.compile(字符串)方法来生成渲染函数，再调用该函数(render)并把要处理的数据作为实参传入，就能渲染为html片段
  • 使用手册中的案例要搞清楚，全部用法手册都有说明