注册界面
用户名:
邮箱:
手机号码:
======================================================================
Ajax必须在同源的前提下,才能正常的获取数据。
同源必须满足三个条件:
1.协议相同。
2.域名相同。
3.端口号相同。默认端口号为80。
下图,修改了之前register.html中ajax的xhr.open()中url的参数内容,也就是非同源的报错信息:
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);
====================================================================================
调用淘宝搜索词服务器案例:
一定看好步骤一步步实施。
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
调用百度搜索词服务器案例:
百度关键字 - 1.
- 2.
- 3.
- 4.
- 5.
- 6.
-
====================================================================
就是将跨域的几个步骤封装到外部的一个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语句,来区分同源和非同源,从而去执行。
所有封装起来的代码,都是直接可以使用的,对往后都是有很大帮助!
===========================================================================
使用jQuery进行跨域和jQuery的同源代码差不多,只不过多了几个参数。
注意jsonp和jsonpCallback两个参数!!!,指定了datatype指定了jsonp就相当于指定跨域,动态创建script标签。
创建一个baidu_jQuery.html文件如下运行:
百度关键字 - 1.
- 2.
- 3.
- 4.
- 5.
- 6.
-
======================================================================
模板引擎作用:将数据和模板结合起来生成html片段,而不是像以前一样以字符串的形式来组合html片段。
常见的模板引擎有很多,其中效率最高的模板引擎就是artTemplate,是腾讯公司的开源的模板引擎,在github上面可以下载到源代码。这里我使用了github上面的一个template-web.js文件。
artTemplate模板引擎使用主要四个步骤:
1.引入js文件。
2.定义模板。
3.将数据和模板结合起来生成html片段。
4.将html片段渲染到界面中。
下面使用template模板进行一个简单的例子:
一定要多看注释步骤!!
百度关键字 ==================================================================================
定义template()方法。
多注意script的type="text/html"和id,以及data的属性,也就是键值中的键!!
案例一 template模板,if的使用:
案例二 传递的data,本身就是一个数组的情况:
案例三 使用#号来进行是否转义:
案例四 ===========================================================================
平时我们简单的一些\u5317等等,如下图一样的格式,都是json格式,而这些\u5317都是utf-8编码浏览器中显示的汉字。