第一章
http 协议
① 学习http协议的目标
1. 调试ajax应用程序中"看不见模不着"的错误
2. 进行web访问优化 ——— 高阶面试题
②URL
世界上任何一个建筑必须有一个"地址"
互联网上任何一个资源(html/img/css/js/php)必须有一个"URL"才能被访问
标准URL语法:<scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<frage>
<scheme> 方案: 指定以哪种 协议 从服务器上获取指定资源
常见方案: http/https/ftp/mailto/file/telnet等
<host> 主机名: 资源所在服务器ip地址或者域名(DNS转换IP)
http://127.0.0.1 <=> localhost，本地计算机
<port> 端口号: 每个程序在计算机上运行时都有一个监听端口号，整型数字(1～65535)
DOS操作系统命令: netstat -an/ano
apache 80,443
mysql 3306
ftp 21 文件上传下载
ssh 22 安全的远程登录
telnet 23 远程登录(不加密)
smtp 25 邮件传输
dns 53 域名解析(把网址转换成ip地址)
http 80 超文本传输协议(传送网页)
pop3 110 邮件接收协议
https 443 加密超文本传输协议(https的SSL加密是在传输层实现的)
?<query> 参数: http://127.0.0.1/1.php?uname=tom&upwd=123
# 相对URL/绝对URL:1. 以方案开头绝对URL:
2. 不以方案开头相对URL: <a herf="1.html"/>
③ URL/URN/URI
Unified ResourceLocator统一的资源定位符
Unified ResourceNaming统一的资源命名符
Unified ResourceIdentifier统一的资源识别符,URI 包含 URL 和 URN
URL: <a href="http://tmooc.cn/login.html"></a>
<img src="http://tmooc.cn/1.jpg" />
URN: <a href="mailto:admin@tmooc.cn"></a>
<a href="tel:12345678910"></a>
_______________________________________________________________________________________________
HTTP 协议概述:用于传输网页的内容(html/css/js/img/mp3/avi...)
互联早期没有http协议，IETF (国际互联网任务委员会)制定协议标准
1990年 http/0.9 有严重缺陷
1996年 http/1.0 标准 RFC1945
1999年 http/1.1 沿用到现在
2015年 http/2发布，但不叫http/2.0，因为标准委员会不打算再发布子版本，所以下一个新版本将是http/3
http/2的特点:
① 二进制协议，头信息和数据体都是二进制，统称为帧(frame)，并定义了近十种帧
② 多工，复用TCP连接，在一个连接里,客户端和浏览器都可以同时发送多个请求或回应,避免了队头堵塞
③ 数据流，http/2将每个请求或回应的所有数据包称为一个数据流，都有一个独一无二的编号，数据包发送时，必须标记数据流id，用于区分数据哪个数据流。规定客户端发出的id为奇数，服务端发出的id为偶数
④ 引入头信息压缩机制，一方面头信息使用gzip或compress压缩后再发送，另一方面客户端和服务端同时维护一张头信息表，所有字段都存入这个表，生成一个索引号，只发送索引号，而不需要发送同样的字段
⑤ 服务器推送，http/2允许服务端未经请求主动向客户端发送资源
http协议工作原理:请求响应式
① 客户端浏览器发送请求给web服务器(apache)，请求
② web服务器接收请求，处理数据，并且将结果返回客户浏览器，响应
http协议的数据组成:
请求(request): 请求起始行，请求头信息，请求主体内容
客户端浏览器 发送给 服务器
请求方法:GET/POST/PUT/DELETE/HEAD/CONNECT/TRACE/OPTIONS
Content-Type: 描述请求主体的内容类型(三种) //指定提交给服务器表单数据的编码方式
text/plain 请求数据是普通文本，特殊字符不行
application/x-www-form-urlencoded 请求主体经过二进制编码，可以是普通字符/特殊字符/标点符号
multipart/form-data 表单中包含上传文件数据，进行二进制编码，普通字符/特殊字符/标点符号不行
响应(response): 响应起始行，响应头消息，响应主体
服务器 发送给 客户端浏览器
响应状态码:
100-199 提示性信息。100: 继续；101: 切换协议
200-299 成功响应。200: OK成功响应
300-399 需要客户端重定向。301: 永久性转移；302: 暂时性转移；304: 没有被修改过
400-499 客户端请求错误。403: 服务器收到请求但拒绝提供服务；404: Not Found请求资源不存在
400:前端提交的数据字段与后台不一致，或没有将对象用JSON.stringify转化为字符串
500-599 服务端运行错误。500: 内部服务器错误
响应主体的内容类型(Content-Type):①AJAX接收服务器返回的数据
text/plain 纯文本
text/html 文本与网页
text/css css文件
application/javascript js程序
application/xml xml格式的数据
application/json json格式的数据
header('Content-Type:text/html;charset=utf-8'); //设置响应主体类型(放在php顶部，指定php发送给ajax的数据类型)
面试题: http/1.1比http/1.0改进了哪些地方
① 支持虚拟主机技术，在一个web服务器上同时并存多个不同域名网站。Host: tmooc.cn/tts/jobshow
② 支持持久化连接技术，早期http1.0不支持持久连接。服务器机制: 三次握手/四次挥手
Connection:keep-alive 持久化连接(默认打开)，客户端和服务器之间的连接会保持一段时间,网页数据传输完毕后才会断开
③ 支持代理连接: Proxy:xxx，对于软件很有必要
第二章*****************************************************************************************
面试题: get请求和post请求的区别
GETPOST
语义客户端想获取服务器(程序)上指定资源客户端想传递数据给服务器端(程序)
如何发起浏览器地址栏输入URL、超链接、标签href /src、js跳转、表单GET、AJAX-GET表单-POST提交、AJAX-POST
安全级别不安全不安全
表单提交请求URL地址中请求数据主体
数据长度总长度(1KB),字母数字1000个(请求在url地址中)没限制(在请求主体中)
是否需要编码需要编码,一个汉字9个字节自动编码
是否适合缓存类似于查找的过程，不用每次都与数据库连接，适合使用缓存一般是修改、删除的操作，必须与数据库交互，一般不使用缓存
注意: http协议并未规定GET/POST的请求长度限制是多少，对GET请求参数的限制是来源于浏览器或web服务器，浏览器或web服务器限制了url的长度，不同的浏览器和web服务器，限制的最大长度不一样
浏览器中如何发起PUT请求: AJAX-PUT
浏览器中如何发起DELETE请求: AJAX-DELETE
_______________________________________________________________________________________________
Ajax: Asynchronous JavaScript AND Xml: 异步JavaScript和Xml，用于在Web页面中实现异步数据交互，实现页面局部刷新
php内容无变化，html中form的action="#"，input不需要name属性，使用type="button"提交(不会跳转)
不使用ajax时需要用<input type="submit">或者<button></button>提交数据，用name添加数据
为type="button"绑定事件(注意大小写):
① 创建ajax对象:var xhr = new XMLHttpRequest();
② 为xhr绑定监听(状态改变触发,触发4次)事件: //在里面加if(...)判断使只执行一次
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){//判断的固定格式
elem.innerHTML=xhr.responseText;//接收服务器(程序)返回数据，即请求url(php)的返回结果
}}//php尖括号外面不能有回车或空格，Network→Response调试
GET请求方法:
③ 创建一个与服务器程序的连接
xhr.open('GET','login.php?name=(请求url)'+name+'&...',true(是否异步));
④ 发送请求消息: xhr.send(null);
POST请求方法:
③创建一个与服务器程序的连接:xhr.open('POST','login.php(请求url)',true(是否异步));
④ 设置请求主体内容类型:
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
⑤ 发送请求消息: xhr.send('name='+name+'&pwd='+pwd+'&...');
ajax简介:
2002年，由Google在搜索引擎，提出GoogleSuggest自动提示，提出AJAX概念
AJAX=HTML+CSS+JS+DOM+HTTP+XML
ajax的作用: 实现 无刷新、无提交、无跳转 的情况下页面内容局部更新
ajax应用场合: 股票走势图、搜索建议、聊天室、注册...
交互模型就是Ajax在客户端引入一个执行引擎，它一边应付用户的请求，一边把接收到的数据传送给服务器，同时把服务器端返回的数据，展现给客户的技术模式
工作方式:
同步请求: 不使用ajax的请求方式均属于同步，阻塞的
客户端 服务器
填写表单等待
点击提交发送(等待) 操作
接收数据等待
异步请求:只有ajax一种实现方式，非阻塞的
填写表单 操作
点击提交发送(操作) 操作
接收数据 操作
第三章*****************************************************************************************
AJAX对象与属性
核心对象:xhr=newXMLHttpRequest();//作用发送请求并且接收服务器返回数据
兼容性:
if(window.XMLHttpRequest){
var xhr = newXMLHttpRequest(); //W3C(IE9、chrome、firefox、safari)
}else{
var xhr = newActiveXObject("Microsoft.XMLHTTP");//IE6、7、8(极少)
}
属性:
readyState: 表示xhr对象当前状态，不能赋值，其值会随请求→响应过程自动改变(0→4)
可取值: 0 UNSENT 请求信息尚未发送
1 OPENED xhr己经创建与web服务器连接
2 HEADERS_RECEVICED xhr己经接收到响应消息头部
3 LOADING xhr正在收到响应消息主体
4DONE xhr接收完成响应消息主体
status: 服务器响应状态码，主要:200成功响应
responseText: 保存响应消息主体(文本,响应数据)
responseXML: 保存响应消息主体(XML)
成员方法:
open(method,url,isAsyn);创建/打开一个服务器连接
method: 请求方法 GET/POST/DELETE...
url: 请求地址
isAsyn 发送请求方式是异步请求(true)/同步请求(false)
send();发送请求主体
GET: send(null);
POST: send('name=tom&age=10(拼接)');
成员事件:
onreadystatechange(): 当xhr状态改变时触发该事件
第四章*****************************************************************************************
AJAX处理不同的数据类型(JSON/JavaScript/XML)
XML是字符串格式，用于描述数据，麻烦→重量级
JSON是字符串格式，用于描术数据，简单→轻量级，是字符串格式的数组或对象
JSON(JavaScript Object Notation，js对象表示法)是一种轻量级的数据交换格式，易于阅读和编写，语法基于JS，但目前己经被各种语言支持，成为一种"异构系统交互数据的标准"
JSON字符串语法要求:
①一个JSON字符串有且只有一个根: {...}对象 [...]数组
比如:'[1,2,3,4]' //数组
'{ "name":"tao","age":10 }' //对象
'[ {"name":"tao"},{"name":"james"} ]' //由对象组成的数组
$output=["page"=>$num];//组成数组，再用函数转为json
echo'{"code":1,"count":'.$counts.'}';//直接拼接输出
② JSON中可以表示数字、bool、null、字符串 ————— 字符串必须用双引号引起来
③ []数组可以包含多个值，使用逗号分隔
④ {}对象中可以包含多个键值对，使用逗号分隔，键和值之间用冒号，键必须是用双引号贴身引起来
_______________________________________________________________________________________________
PHP→AJAX→JSON开发流程
服务器端php: 将数组转换成json字符串，并发送给客户端浏览器(注意输出的类型,在客户端输出确认)
可能是'数组'也可能是'对象'
header('Content-Type:application/json;charset=utf-8'); //修改响应主体内容类型为json
$json = json_encode($arr); //$arr数组可手工创建(创建时要加单引号)对象或 索引/关联数组
//或从数据库中得到(可仅转换字符串的某个下标的值，再与手写的json语句按php语法拼接)
echo '结果为:'.$json； //$json: json格式的字符串，可按php语法与其它数据(如php变量)拼接
json_decode($json); //把JSON字符串解析为PHP对象或数组
客户端js: 将json字符串转换成js对象
["...":"..."]json字符串 → js数组(对象组成的数组)[{},{},{}] → 用模板字符串拼接创建DOM
var obj = JSON.parse(xhr.responseText);//把xhr.responseText(后端响应的数据),转换成对象
varstr=""；
for(var i=0;i<obj.length;i++){
var o = obj[i]；
str += `<tr>
<td>${o.name}</td>
<td>${o.price}</td>
</tr>`
}
tb1.innerHTML=str；
对象转json字符串: var json =JSON.stringify(obj);
json字符串转对象: var obj =JSON.parse(json);
jQuery中的API: json字符串转为对象: var obj =$.parseJSON(json);
jQuery的ajax中:
若服务器端代码直接返回一个常量字符串(没有定义String变量)，success会自动将json转为对象
若服务器端返回一个定义过的String，则success会接收到一个json字符串，不会转为对象
_______________________________________________________________________________________________
jquery中的 ajax 方法
①$("选择器").load('URL',[data],[fn]);发起一个 XHR 请求，data为null则为GET，否则发起POST请求，get会把服务器端返回的响应数据(必须是html片段)追加为选定元素的innerHTML
1.若有参数fn,则在请求成功后，调用该函数
2. 接收响应数据必须是html片段，且会被追加到$(...)中，用于添加动态php中的header和footer
比如:$("#header").load('data/header.php');
3. 选中元素内容必然被清除
jQuery load() 方法是简单但强大的 AJAX 方法
load() 方法从服务器加载数据，并把返回的数据放入被选元素中
$(selector).load(URL,[data],[callback]);
可加载: *.txt、*.php、*.html等文件
.load()方法，与$.get()不同，允许规定要插入的远程文档的某个部分，通过url参数的特殊语法实现，如果该字符串中包含一个或多个空格，紧接第一个空格的字符串则是决定所加载内容的jQuery选择器
例如: $("#result").load("ajax/test.html #container");
如果执行该方法，则会取回ajax/test.html的内容，不过jQuery会解析被返回的文档，来查找带有容器 ID的元素,该元素连同其内容，会被插入带有结果ID的元素中，所取回文档的其余部分会被丢弃
jQuery使用浏览器的 .innerHTML 属性来解析被取回的文档，并把它插入当前文档。在此过程中，浏览器常会从文档中过滤掉元素，比如<html>,<title>或<head>元素。结果是，由.load()取回的元素可能与由浏览器直接取回的文档不完全相同
② $.get('URL',[data],[fn]); 发起一个XHR GET请求,如果成功接收返回数据,调用fn
③ $.post('URL',[data],fn); 发起一个XHR POST请求,并在请求主体中提交请求数据,如果服务器返回成功响应消息,调用参数fn,在该方法中处理响应数据
④ $.getJSON('URL',[data],fn); 发送get请求，接收响应数据格式为json,会自动执行JSON.parse();
⑤ $.getScript('URL',[data],fn); 发送get请求，发送get请求，接收响应数据格式为script,会自动执行 eval(xhr.responseText)
⑥ jquery中对ajax操作封装函数—————ajax(); 万能
语法（放在监听事件里，比如button）:
$.ajax({ type:'?', url:'xx.php', data:'?',?:function(接收的参数,可不写){...} });
//function是回调函数(可用箭头函数简化)，ajax请求返回结果自动调用函数
//接收的参数是数组(对象组成的数组)[{},{},{}]或对象，不必再转化
type:'GET', 请求方式POST/PUT/DELETE/HEAD...
url:'xx.php', 请求的php地址 //url必须写，其它可不写
data:'name=tom&age='+num, 往服务器php传的参数,写法1，自动转为json字符串
data:{name:'tom',age:num}, 往服务器php传的参数,写法2(属性不加引号)，自动转为json字符串
beforeSend:fn 请求消息发送之前回调函数(没有网络也会调用)
success:fn 响应完成并且响应成功回调方法，200
error:fn 响应完成并且出错回调方法，404,500，json格式不正确
complete:fn 响应完成后回调(不论成败)
获取数据时，有时jQuery不会自动转换为JSON格式
方法① 判断是不是对象，是否需要从json转换为对象
if(typeof res !== 'object'){ //判断是不是对象，是否需要从json转换为对象
res = JSON.parse(res); //或 res = JSON.parse(res);
}
if(Object.prototype.toString.call(res).slice(8,-1) === 'String'){ //更严格
res = JSON.parse(res);
}
方法② 设置dataType: 'json'
若返回的不是json格式，即使状态码返回200，也会执行eroor回调函数
可通过返回的状态码判断要执行的代码
可通过dataType选项指定其他不同数据处理方式:
"xml": 返回 XML 文档，可用 jQuery 处理
"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行
"script": 返回纯文本 JavaScript 代码，不会自动缓存结果，除非设置了"cache"参数
注意:在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求(因为将使用DOM的script标签来加载)
"json": 返回 JSON 数据
"jsonp": JSONP 格式，使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换?为正确的函数名，以执行回调函数
"text": 返回纯文本字符串
async: false //同步加载数据，发送请求时锁住浏览器(需要锁定用户交互操作时可使用同步方式)
//若有操作DOM的函数写在ajax之前，等ajax执行完毕才会操作DOM
processData: false //设置 rocessData 选项为 false，可防止自动转换数据格式
