Ajax 跨域和同源策略的解释和使用，使用jQuery跨域，模板引擎artTemplate的使用【详细解释+案例】（三

再创建一个data.php文件，内容如下：

<?php $city = $_GET["city"]; if ($city == "beijing") { echo "f('北京天气晴')"; }else{ echo "f('天气查询无')"; } ?>

2.动态创建script标签和指定回调函数来实现跨域

创建一个动态的script的三个步骤如下：

就是使用代码创建script标签，定义好src，并添加到head标签下。

一定注意src属性的callback它的值和回调函数的值一样的！！！这样我们就可以修改回调函数的名称了。

//第一步，定义动态script

var script = document.createElement(“script”);

//这里写了url路径和参数参数值格式，最后添加了一个callback来定义方法名。

script.src = “url(路径)?参数=” + 参数值 + “&callback=fun”;

script.type = “text/javascript”;

//第二步，指定的回调函数

window[“fun”] = function(data){

console.log(data);

};

//第三部，将script放到head元素下面。

var head = document.querySelector(“head”);

head.appendChild(script);

3.下面使用script和回调函数调用外部案例

====================================================================================

调用淘宝搜索词服务器案例：

一定看好步骤一步步实施。

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

• 调用百度搜索词服务器案例：
• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

• 4.跨域的封装

  ====================================================================

  就是将跨域的几个步骤封装到外部的一个JS文件当中，进行调用即可。

  创建一个baidu_function.html文件

  jsonp非常重要，包括使用jQuery的时候，多多区分注意！
• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

• 在创建一个myutils.js文件：

  function kuayu(obj){

  var defaults = {

  type:“get”,

  url:“#”,

  data:{},

  success:function(data){},

  jsonp:“callback”,

  jsonpCallback:“haha”

  };

  for(var key in obj){

  defaults[key] = obj[key];

  }

  var params = “”;

  for(var attr in defaults.data){

  params += attr+“=”+defaults.data[attr]+“&”;

  }

  if (params) {

  params = params.substring(0,params.length-1);

  defaults.url += “?”+params;

  }

  defaults.url += “&”+defaults.jsonp+“=”+defaults.jsonpCallback;

  console.log(defaults.url);

  var script = document.createElement(“script”);

  script.src = defaults.url;

  window[defaults.jsonpCallback] = function(data){

  defaults.success(data);

  };

  var head = document.querySelector(“head”);

  head.appendChild(script);

  }

  可以修改自己写的Ajax，用if语句，来区分同源和非同源，从而去执行。

  所有封装起来的代码，都是直接可以使用的，对往后都是有很大帮助！

  5.使用jQuery进行跨域

  ===========================================================================

  使用jQuery进行跨域和jQuery的同源代码差不多，只不过多了几个参数。

  注意jsonp和jsonpCallback两个参数！！！，指定了datatype指定了jsonp就相当于指定跨域，动态创建script标签。

  创建一个baidu_jQuery.html文件如下运行：
• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

• 6.模板引擎的使用

  ======================================================================

  模板引擎作用：将数据和模板结合起来生成html片段，而不是像以前一样以字符串的形式来组合html片段。

  常见的模板引擎有很多，其中效率最高的模板引擎就是artTemplate，是腾讯公司的开源的模板引擎，在github上面可以下载到源代码。这里我使用了github上面的一个template-web.js文件。

  artTemplate模板引擎使用主要四个步骤：

  1.引入js文件。

  2.定义模板。

  3.将数据和模板结合起来生成html片段。

  4.将html片段渲染到界面中。

  下面使用template模板进行一个简单的例子：

  一定要多看注释步骤！！

  7.artTemplate模板常用格式语法

  ==================================================================================

  定义template()方法。

  多注意script的type="text/html"和id，以及data的属性，也就是键值中的键！！

  template模板，if的使用:

  传递的data，本身就是一个数组的情况:

  使用#号来进行是否转义：

  使用#号来进行是否转义：