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

}

});

//测试$.post(url,{参数},函数)

$.post(url,{e:emailValue},function(result){

console.log(result);

});

}

phone.onblur = function(){

var phoneValue = phone.value;

var type = “post”;

var url = “./server/checkPhone.php”;

var params = “phonenumber=”+phoneValue;

var dataType = “json”;

$.ajax({

type:type,

url:url,

data:{phonenumber:phoneValue},

dataType:“json”,

success:function(result){

var phone_result = document.querySelector(“#phone_result”)

if (result.status == 0 ) {

//代表手机号码可用

phone_result.innerText = result.message.tips+“,”+result.message.phonefrom;

}else if (result.status == 1) {

//代表手机号码不可用

phone_result.innerText = result.message;

}

}

});

$.post(url,{phonenumber:phoneValue},function(result){

console.log(result);

});

}

}

注册界面

用户名：

邮箱：

手机号码：

2.跨域和同源策略

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

1.同源策略

---

Ajax必须在同源的前提下，才能正常的获取数据。

同源必须满足三个条件：

1.协议相同。

2.域名相同。

3.端口号相同。默认端口号为80。

下图，修改了之前register.html中ajax的xhr.open()中url的参数内容，也就是非同源的报错信息：

2.跨域

---

1.外部JS和PHP文件实现跨域

如果我们一定要在非同源的状况下，来获取数据。，那就用到了跨域。

这里解释一下，Ajax是为了访问自己服务器的数据，而跨域是为了访问别人服务器的数据。

1.通过script中的src属性调用外部JS文件，实现跨域。

2.通过script中的src属性调用外部php文件，实现跨域。

举一个携带参数实现php文件的一个例子：

创建一个weather.html文件，内容如下：

注意顺序问题，f1函数要先被读取，才能被调用！！

再创建一个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的属性，也就是键值中的键！！