1、AJAX基本组成（170204）
（1）、Ajax，异步请求，实现页面的局部刷新；
客户端（Client）：前端，iOS，安卓；
服务器（Server）：服务器集群；
系统：Windows Server、linux（常用）；
作用：提供数据，存储数据；
（2）、URL:
基本概念:
• URL 的全称是 Uniform Resource Locator（统一资源定位符）
• 通过 1 个 URL，能找到互联网上唯一的 1 个资源
• URL就是资源的地址、位置，互联网上的每个资源都有一个唯一的 URL
URL格式:
• 基本格式：协议头://主机地址/路径
◦ 协议头：不同的协议，表示不同的资源查找及传输方式
◦ 主机地址：存放资源主机的 IP 地址（域名）
◦ 路径：资源在主机中的具体位置
HTTP协议
http，Hypertext Transfer Protocol，超文本传输协议；
请求
请求行：写明了请求方式（get/post）和请求路径（url）；
请求头：关键，包含了Content-type等信息，
客户端环境描述、客户端请求的主机地址信息、
客户端所能接收的数据类型，Accept:text/html；
请求体：请求方式为get时其请求体为空，post时请求体里存放了需要传输的数据，例如需要上传的数据；
tips：post需要设置请求头，get不需要设置；
响应
响应行/状态行：写有状态码和http版本号；
HTTP协议版本，状态码，状态码英文名称；
响应头：Content-type，记录了响应体中返回数据的文件格式；
响应体：服务器返回的数据，格式为JSON或XML；
Content-Type:text/html;
text/css;
text/xml;
text/html;
tips：这些Content-type都统称称为MIME类型；
Wamp配置
w:windows,
a:apache,
m:MySQL,
p:php
C/S架构，Client/Server，客户机/服务器；
B/S架构，Browser/Server，浏览器/服务器；
目的:为了能让我们在浏览器中输入域名的时候,也能访问我们服务器的资源
步骤:
0.配置apache服务器根目录；
目的:浏览器中输入 127.0.0.1 访问的不再是wamp安装目录下C:\wamp\www 这个里面的资源,让其访问我们自己的资源；
更改\apache\Apache2.2.21\conf 目录下面的 httpd.conf 文件,
改其中两个地方,一个是 DocumentRoot的路径 , 另外一个是 <Directory/> 路径；
1.开启虚拟主机辅配置，在httpd.conf 中找到 Virtual hosts,去掉第二句前面的#号注释，开启httpd-vhosts虚拟主机模块；
2.配置虚拟主机，打开conf/extra/httpd-vhosts.conf ；
分别修改以下三项:
DocumentRoot "在浏览器中输入域名之后访问的文件夹路径"；
ServerName "自己配置的域名"；
ServerAlias "www.自己配置的域名.com"；
其它项不需要修改
3.修改本机DNS（hosts）文件
打开C:\Windows\System32\drivers\etc\hosts(目录是固定的)进行修改
tips：配置文件修改之后必须要重启wamp服务器，配置才能够生效，否则将会出错；
2、http通信
URL:Uniform Resource Locator;
HTTP:Hypertext Transfer Protocol;
AJAX:Asynchronous JavaScript And XML;
URL:
（1）、基本概念:
URL 的全称是 Uniform Resource Locator（统一资源定位符）；
通过 1 个 URL，能找到互联网上唯一的 1 个资源；
URL就是资源的地址、位置，互联网上的每个资源都有一个唯一的 URL；
（2）、URL格式:
基本格式：协议头://主机地址/路径
协议头：不同的协议，表示不同的资源查找及传输方式；
主机地址：存放资源主机的 IP 地址（域名）；
路径：资源在主机中的具体位置；
HTTP：
（1）、作用：规定了客户端与服务器数据的传输格式，一般有XML和JSON；
让客户端和服务器能有效地进行数据沟通；
HTTP 协议是网络编程使用最为广泛的协议；
· https协议，对页面进行了加密，相比http协议加载速度更慢；
旧版本：http 0.9、1.0；
现通用：http 1.1；
（2）、HTTP协议特点
简单快速：因为HTTP协议简单，所以 HTTP 服务器的程序规模小，通信速度快；
灵活：HTTP 允许传输任意类型的数据；
HTTP 0.9 和 1.0 使用非持续连接
限制每次连接只处理一个请求，服务器对客户端的请求做出响应后，立刻断开连接，这种方式可以节省传输时间；
HTTP 1.1 使用持续连接
不必为每个web对象创建一个新的连接，一个连接可以传送多个对象；
tips:持续连接并非连接上就不会断开，http1.1在客户端与服务器连接的时候，有一个时间戳，
当计时结束的时候，客户端仍然没有新的操作发送到服务器，连接就会自动断开；
tips：一个url代表了互联网上唯一的一个资源，域名解析控制在政府手中；
Request
请求（Request）：客户端向服务器索取数据的一种行为；
HTTP协议规定：一个完整的由客户端发给服务器的 HTTP 请求 需要包含以下内容：
（1）、请求行：指定请求方法（GET/POST）、请求资源路径，以及 HTTP协议版本，/表示访问根目录；
eg：
GET / HTTP/1.1
tips:也称为请求报文行。
（2）、请求头：对客户端的环境描述、客户端请求的主机地址等信息
请求头中至少包含，客户端要访问的服务器主机地址；
eg:
Host: m.baidu.com
请求头中还可以包含，客户端的类型，客户端的软件环境
eg:
User-Agent: iPhone AppleWebKit
客户端所能接收的数据类型： Accept: text/html, */*
客户端的语言环境： Accept-Language: zh-cn
客户端支持的数据压缩格式： Accept-Encoding: gzip
访问结束后，是否断开连接： Connection: Close
（3）、请求体(可选)：客户端发给服务器的具体数据，例如要上传的文件数据
请求格式
每一项请求信息末尾使用 \r\n
最后一个请求项末尾使用 \r\n\r\n 表示请求结束
tips：get方式请求体为空，post方法请求体不为空；
Response
响应（Response）：服务器对客户端的请求做出的反应，一般指返回数据给客户端
HTTP协议规定：一个完整的 HTTP 响应包含以下内容：
（1）、状态行：包含了HTTP协议版本、状态码、状态英文名称
eg：请求成功
HTTP/1.1 200 OK
eg：内容无变化
HTTP/1.1 304 Not Modified
tips:一般的，响应状态行的作用在于调试；
（2）、响应头：包含了对服务器的描述、对返回数据的描述
服务器的类型：
Server: Apache/2.4.10 (Unix) PHP/5.5.20
返回数据的类型
Content-Type: text/html
返回数据的长度
Content-Length: 660
响应时间
Date: Thu, 04 Jun 2015 19:31:50 GMT
ETag(HASH值，用于检测本地资源和服务器资源是否一致)
ETag: "294-4e1862f57e7c0"
（3）、实体内容：服务器返回给客户端的具体二进制数据；
3、php基本语法
<?php
phpCodePushHere;
?>
（1）、echo "文本";
将文本内容输出，仅限简单数据类型；
复杂数据类型：var_dump(数组/对象)；
print_r(数组/对象)；
tips：布尔型数据，true输出1，false没有内容输出；
echo true; //输出了一个1；
echo false; //什么也没有输出；
（2）、定义变量， $变量名
$name = "jack";
$age = 20;
（3）、访问对象属性， $对象名->$属性名
（4）、数组
索引数组：$arr1 = array('1','2','3');
关联数组：$arr2 = array(
'name'=>'rose',
'age'=>30
);
var_dump(arr2);
深度数组：一个数组作为另外一个数组的元素，相当于js中的二维数组；
多个关联数组组成的索引数组；
4、XMLHttpRequest（170205）
XMLHttpRequest异步请求对象；
无论是前端、iOS、Android，只要是发送网络请求，基本都采用异步方式，因为同步的效率太低；
（1）、使用原生方式发送Ajax请求
1、创建XHR对象
var xhr = new XMLHttpRequest();
tips：该对象是一个浏览器对象，用于局部刷新完成；
2、发送请求
请求行 xhr.open("get/post" , "url");
请求头 xhr.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
请求体 xhr.send(data);
tips：
请求行中如果方式为get，
xhr.open("get",url + data)，将需要发送的数据写在url的后缀上 ，url？name=zhangsan&pwd=123；
xhr.setRequestHeader()可以不用设置，可以不用设置请求头；
xhr.send(null)；
请求行中如果方式为post，
xhr.open("post","url")；
xhr.setRequestHeader()需要设置；
xhr.send(data)，data的值为一个对象；
3、处理服务器的响应
xhr.onreadystatechange = function(){
//当服务器返回了数据的时候触发该事件；
};
-------------------
tips：返回的数据都存在了xhr对象中；
xhr.status 服务器返回的状态码，200表示成功响应；
xhr.readyState 异步对象状态码，4表示数据已经解析完成并可以使用；
tips：服务器返回的状态码:
1xx:消息
2xx:成功
3xx:重定向
4xx:请求错误
5xx:服务器错误
tips：异步对象的状态码
0:异步对象已经创建
1:异步对象初始化完成,发送请求
2:接收服务器返回的原始数据
3:数据正在解析,解析需要时间
4:数据解析完成,数据可以使用了
tips:get方式主要用于获取数据，十分不安全，但是get具有缓存，效率快；
post方式主要用于给服务器传递数据，相对安全，post没有缓存，相率慢；
get方式将上传的数据存放在URL中，因此数据有长度限制；
post将上传的数据放在请求体中，理论上没有限制，取决于服务器；
-------------------
（2）、form标签的ajax配合
表单元素全部放在form标签中，在提交的时候将以表单元素的name作为键，以其值作为键值；
<form action="表单提交后处理数据的服务器后台程序路径"
method="get/post"
enctype="application/x-www-form-urlencoded">
<input type="text" name="age">
<input type="text" name="name">
<input type="submit">
</form>
tips：如果form里面存在type=file的input标签，即需要上传文件，
enctype="multipart/form-data";
-------------------
eg:
<form method="post" action="03-login.php" enctype="multipart/form-data">
用户名:<input type="text" name="uname"><br>
密码:<input type="text" name="pwd"><br>
图片:<input type="file" name="picture"><br>
<input type="submit" value="登录">
</form>
-------------------
-------------------
（3）、php语法补充
$_GET 从客户端以get方式发来的数据都保存在了$_GET变量中；
$_POST 同理，post方式的数据存在了$_POST变量中；
eg:
var_dump($_GET);
-------------------
$_FILES 上传的文件保存在该变量中；
eg:
move_uploaded_file($_FILES['picture']['tmp_name'],'images/jz1e.jpg');
作用：移动上传的文件到指定的文件夹，并指定重命名；
tmp_name保存到服务器中的临时名称，
images/jz1e.jpg，表示保存到images文件夹，并重命名为jz1e.jpg；
'Files' =>
array
'name' => string '啦啦啦 (2).jpg' (length=17)
'type' => string 'image/jpeg' (length=10)
'tmp_name' => string 'C:\wamp\tmp\php483C.tmp' (length=23)
'error' => int 0
'size' => int 186891
-------------------
include "xxx.html" 在php中导入html页面；
tips：注意，php代码必须在服务器环境下才能生效，没有服务器环境php代码是无法运行的，html页面中的php代码将会全部解析成注释；
5、xml或json返回数据（170207）
服务器返回的数据通常有两种格式，json或xml；
XML:Extensible Markup Language
JSON:JavaScript Object Notation
XML常用于设置文件和游戏score的保存；
JSON 是网络上用来传输数据使用最广泛的数据格式，没有之一；
（1）、xml的解析需要前后台配合:
1.后台在返回的时候,在响应头中设置Content-Type的值为 application/xml；
2.前台异步对象在接收后台数据时,记得按照xml的方式来接收,xhr.responseXML,并且它返回的是一个object对象,内容是#document；
eg:
<?php
header("Content-Type:text/xml;charset=UTF-8");
echo file_get_contents('text_147_XML_Build.xml');
?>
（2）、js中解析/操作JSON：
JSON.parse(json字符串); 将一个json格式的字符串解析成js对象；
JSON.stringify(js对象); 将一个js对象转成一个json格式的字符串；
eg:
var result = JSON.parse(xhr.responseText);
var resultStr = JSON.stringify(result);
（3）、JSON数据用xhr.responseText，
XML数据用xhr.responseXML；
（4）、XML
<?xml version="1.0" encoding="UTF-8" ?>
下面写xml的自定义标签，标签里面存放数据；
xml里面的标签可以自定义，但是尽量使用标签存储数据，而不用标签属性存储数据。
eg:
xhr.onreadystatechange= function () {
if(xhr.status==200 && xhr.readyState==4){
var result=null;
var rType=xhr.getResponseHeader("Content-Type");
if(rType.indexOf("xml")){
result=xhr.responseXML;
}else if(rType.indexOf("json")){
result=JSON.parse(xhr.responseText);
}else{
result=xhr.responseText;
}
}
//在这里获取到的result，是一个XML文本对象
callback(result);
}
6、ajax封装
function ajax(obj) { //异步请求封装
var url = obj.url;
var method = obj.method.toLowerCase();
var data = obj.data;
//现在就是js对象了 {name:"zhangsan","pwd":123}
//把上面的data，js对象拼接成键值对的字符串
var success = obj.success;
var finalData = pinjieData(data);
//finalData最终的效果 name=zhangsan&pwd=123
//1.创建xhr对象
var xhr = new XMLHttpRequest();
if (method=='get'){
url = url + "?"+finalData;
finalData = null;
}
//2.设置请求行
xhr.open(method,url);
// 如果是post请求,要设置请求头
if (method=='post'){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
}
//3.发送
xhr.send(finalData);
//4.监听服务器返回的数据
xhr.onreadystatechange = function () {
if (xhr.status==200 && xhr.readyState==4){
var result = null;
//获取返回的数据类型
var rType = xhr.getResponseHeader("Content-Type");
if (rType.indexOf('xml')!=-1){
result = xhr.responseXML;
}else if(rType.indexOf('json')!=-1){
// JSON.parse 的意思是 将 json格式的字符串
//比如 [{ "src":"./images/nav0.png","content":"商品分类1"}]
//转成js对象
result = JSON.parse(xhr.responseText);
}else{
//当成普通的字符串去处理
result = xhr.responseText;
}
//将这里解析好的数据交给页面去渲染
success(result);
}
}
}
7、jQuery的$.ajax()方法（170208）
eg:
$.ajax({
url:"",
type:"get/post",
data:"{}",
success:function(){
},
error:function(){
},
})
url :接口地址
type :请求方式(get/post)
timeout : 要求为Number类型的参数，设置请求超时时间（毫秒）
dataType: 应该是客户端传递给服务器一个值，告诉服务器如何进行处理:
data: 发送请求数据
beforeSend: 要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，
例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求.
success: function(){}，成功响应后调用
error: function(){}，错误响应时调用
complete: function(){}，响应完成时调用（包括成功和失败）
8、artTemplate模板引擎
（1）、原理：其本质是利用正则表达式，替换模板当中预先定义好的标签
常用的模板引擎
a) ArtTemplate：https://github.com/aui/artTemplate -- 主要介绍
b) BaiduTemplate：http://tangram.baidu.com/BaiduTemplate/
c) velocity.js：https://github.com/shepherdwind/velocity.js/
d) Handlebars：http://handlebarsjs.com/
（2）、使用:
a) 1、引入template-native.js
b) 2、<% 与 %> 符号包裹起来的语句则为模板的逻辑表达式-js语句
c) 3、<%= content %>为输出表达式
（3）、模版引擎单个对象处理和多个对象处理的差异:
单个对象:直接将单个对象传递进去即可,到时候在模版中使用的就是单个对象中的属性
多个对象:将数组包装成一个对象传递进去,到时候就可以在模版中使用对象的属性了,如{"items":数组}；
（4）、简洁语法
引入template.js；
<% %>改为{{}}即可，可以使用if语句，可以使用each遍历；
（5）、在script中，使用template方法可以获取到模板生成的代码；
以简洁语法为例；
eg:
<script type="text/template" id="list_info_tpl">
{{each result as v i}}
<tr>
<td>{{i+1}}</td>
<td>{{v.tc_name}}</td>
<td>{{v.tc_roster}}</td>
<td>{{v.tc_birthday}}</td>
{{if v.tc_gender == 0}}
<td>男</td>
{{else}}
<td>女</td>
{{/if}}
<td>{{v.tc_cellphone}}</td>
<td data-id={{v.tc_id}}>
<a href="#teacherModal" data-toggle="modal">查 看</a>
<a href="./teacher_add.html">编 辑</a>
{{if v.tc_status == 0}}
<a href="javascript:;" data-status="{{v.tc_status}}">注 销</a>
{{else}}
<a href="javascript:;" data-status="{{v.tc_status}}">启 用</a>
{{/if}}
</td>
</tr>
{{/each}}
</script>
<script>
var html = template("list_info_tpl" , info);
tips：info是一个对象，里面有个数组，数组名字叫做result，所以在模板中开头写的是each result as v i ，v、i分别代表了result里面的元素和索引；
</script>
9、使用script实现跨域（170210）
（1）、概念:
同源：同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同
跨域：不同源则该行为是跨域；
tips：在Ajax请求的时候，不允许跨域请求；
src属性和href属性有天生跨域的特性，<img> <script> <link> <a>；
script的src属性可以访问外链，一般通过该特性实现跨域。
（2）、原理:
1.本质是使用script中src的天然跨域特性
2.客户端,通过GET请求,url传递一个客户端的方法到服务器,
服务器再返回这个方法的执行代码到客户端,最终在客户端进行调用执行；
3.方法的执行本质是在客户端执行的
eg:
<script src="http://www.link.com?callback="function_Name"&date=date "></script>
（3）、采用jsonp实现跨域，需要和后台定义返回的数据格式，jsonp只能用get方式发送；
返回的数据格式为
eg: callback({
key:value,
key:value
})
tips：为什么跨域要在script的src中解决，而不是link的href中，那是因为script比起link，它能执行方法
tips：在ajax中,如果使用了dataType:jsonp,那么当前请求就和XMLHTTPRequest没有任何关系了，jquery自动采用script的src属性实现了跨域；
10、瀑布流
11、$.fn()
$.fn是所有jQuery对象的共同指向的方法库,
这就意味着,在这个方法库中添加方法,那么所有的jQuery对象都可以调用到---这就是所谓的jQuery插件
12、tips
（1）、表单元素label的用法
<label for="xid"></label>
<input id="xid">
在label中的for属性中赋予和input的id相同的值，当点击了label中的元素时，就会触发对应id的表单元素；
（2）、$.extend
eg:
var deOption = {
col:5,
padding:20
};
deOption = $.extend(deOption,option);
deOption代表了对象的默认值，option表示需要改变的值；
（3）、$.each(obj,[callback]);
obj代表了需要遍历的对象或者数组；
