AJAX - 阿贾克斯
1、URL
1、作用
用于表示互联网上任意一个资源的位置
2、详解
格式：
<scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<frag>
1、scheme
方案或协议，以哪种方式到服务器上获取资源，协议不区分大小写，常见的协议：http,https,ftp,scheme可以省略，省略的话，默认是http
2、user
访问特定资源时要用到的用户名
3、pwd
访问特点资源时要用到的密码
4、host ：要访问的服务器的主机名称，或IP地址，或 域名(由DNS转换为IP地址)
5、port ：端口号，可以省略，默认为 80
6、path ：路径，要访问的资源在服务器上的路径
7、params ：提交的参数
8、query ：查询字符串，要传递给服务器的数据
9、frag : 锚点
http://localhost/a.html#NO1
http://admin:admin@localhost/abc.php?uname=tom&upwd=jerry#NO1
2、HTTP协议
1、什么是HTTP
Hyper Text Transfer Protocol
超文本传输协议
规范了数据是 如何打包 以及 如何传递的
2、详解 Message 消息/报文
message指的是在http客户端与服务器之间传递的数据块分类
1、请求(request)消息
客户端要传递给服务器的数据都是什么，由三部分组成
1、请求起始行
1、请求方法
1、GET
表示客户端向服务器获取资源时使用(img/js...)
特点：
1、无请求主体
2、靠地址栏(查询字符串)传递数据给服务器
2、POST
表示客户端想传递数据给服务器使用
特点：
1、有请求主体
3、PUT
表示客户端要把文件放置到服务器上
特点：
1、有请求主体
4、DELETE
表示客户端要删除服务器上指定的数据(禁用)
5、HEAD
表示客户端只想获取指定的响应头
6、CONNECT
测试连接
7、TRACE
追踪请求路径
8、OPTIONS
选项，保留以后去使用
2、请求URL
3、协议版本 ：HTTP/1.1
2、请求头(消息头)
Host:localhost
告诉服务器请求哪一个虚拟主机
Connection：keep-alive
告诉服务器做持久连接
User-Agent
告诉服务器，客户端浏览器的类型
Cache-Control:max-age=0
告诉服务器缓存信息：max-age,即不缓存
Accept-Language:zh-CN
告诉服务器自己能接收的自然语言
Accept-Encoding:gzip
告诉服务器自己能接收的压缩类型
Referer:url
告诉服务器来自于哪个页面
3、请求主体
Form Data：真正的请求主体
2、响应(response)消息
服务器要传递给浏览器的数据，由三部分组成
1、响应起始行
1、协议版本号：HTTP/1.1
2、响应状态码
告诉浏览器是否正常处理所有的请求
1、1xx ：100-199 ，提示信息
2、2xx ：成功处理请求以及给出响应
200 : OK
3、3xx ：需要重定向
301 ：永久性重定向
302 ：临时性重定向
4、4xx ：客户端请求错误
404 ：请求的资源不存在
403 ：无访问权限
405 ：请求方法不被允许
5、5xx ：服务器运行错误
500 ：服务器内部错误
3、原因短句
对状态码的简单解释
200 ：OK
404 ：Not Found
403 ：Forbidden
405 ：Method Not Allowed
2、响应头(消息头)
1、Content-Type
作用：告诉浏览器响应回来的数据是什么类型的，相当于告诉浏览器要用什么样的方式解析响应回来的数据
值：
1、text/html:响应回来的数据是html文本
2、text/plain:响应回来的数据是普通文本
3、text/css:响应回来的数据是css样式
4、application/javascript:响应回来的数据是JS脚本代码
5、application/xml:响应回来的数据是xml格式字符串
6、application/json:响应回来的数据是json格式字符串
7、images/jpeg:响应回来的数据是jpeg的图片
3、响应主体
Response / Preview
3、缓存
1、什么是缓存
客户端将服务器响应回来的数据进行自动的保存，当再次向服务器发送请求之前，会先取缓存中获取之前保存好的数据
2、缓存优点
1、减少了冗余数据的传输，节省客户端流量
2、可以节省服务器的带宽
3、降低了对服务器资源的消耗和运行要求
4、降低了由远距离而造成的延时加载
3、与缓存相关的消息头
1、Cache-Control 消息头
作用：从服务器将文档传递给客户端之时起，可以认为此文档处于新鲜的秒数
Cache-Control:max-age=新鲜的秒数
ex:
Cache-Control:max-age=3600
Cache-Control:max-age=0;//不缓存
Cache-Control:no-cache;//不缓存
2、Expires 消息头
作用：指定缓存过期的确切时间
Expires:Fri,27 Oct 2017,15:59:59 GMT
如果希望客户端永不缓存网页的话，可以给一个过期的时间
Expires:Fri,27 Oct 2017,00:00:00 GMT
Expires:0;--非标准写法，执行性不是特别好
4、如何在网页中设置消息头
1、更改服务器的配置文件
2、在网页上增加消息头
1、html
<meta http-equiv="消息头" content="值">
禁用缓存配置
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
ex:
<meta http-equiv="Cache-Control" content="max-age=3600">
2、php
header("Expires:0");
或
Response.AddHeader("Expires","0");
4、DOM操作
1、什么是DOM
完整的JavaScript的组成
1、JS核心 ：ECMAScript
2、DOM ：Document Object Model
文档对象模型
本质：JS提供了一系列的方法和属性，用于操作页面的元素
3、BOM ：Browser Object Model
浏览器对象模型
本质：JS提供了一系列的方法和属性，用于操作浏览器
2、使用JS获取页面上的某个元素
<div>窗前明月光</div>
1、为元素增加一个id属性
<div id="d1">窗前明月光</div>
<input type="text" id="uname">
2、在JS中，允许通过元素的ID来获取指定的元素
var elem=document.getElementById("元素ID");
elem : 指定ID值的元素在JS中的表现形式(DOM对象)
练习：
1、创建 03-dom-getElementById.html
2、页面中创建一个div，id为d1，内容自定
3、页面中创建一个按钮，单击时，获取id为d1的元素，并将结果打印在控制台上
3、获取 / 设置 某元素中的全部内容
属性：innerHTML
语法：
取值：var value = DOM对象.innerHTML;
设置：DOM对象.innerHTML = 值;
练习：
1、在上面的练习基础上完成
2、添加一个按钮，单击时，获取div中的文本，并打印在控制台上
3、添加一个按钮，单击时，将div中的文本内容更改为 "我的第一个DOM操作"
4、获取 / 设置 表单控件的值
<input type="text" id="uname" value="">
<input type="password">
<select id="">
<option value=""></option>
</select>
取值：var value = DOM对象.value;
在DOM中，要获取/设置表单控件的值，使用 value 属性
设置：DOM对象.value = 值;
5、简化 document.getElementById()
var elem = document.getElementById("id");
根据 "指定的ID值" 获取 "对应的HTML元素"
简化：
1、将document.getElementById()封装成一个函数，取名叫 $()
2、将 "指定的ID值"，作为 $() 的参数
3、将 "对应的HTML元素"，作为 返回值 进行返回
function $(id){
return document.getElementById(id);
}
练习：
1、封装 $() , 用于简化 document.getElementById();
2、在页面中创建一个文本框(id="uname"),再创建一个div(id="d1"),创建一个按钮
3、单击按钮时，将文本框中的数据，以一级标题的形式显示div中
6、HTML 元素事件
1、什么是事件
事件就是允许通过用户的行为来激发的操作
ex：
onclick ：鼠标单击时激发的事件
2、其它事件
1、文本框 和 密码框
1、onfocus
元素获取焦点时激发的操作
2、onblur
元素失去焦点时激发的操作
作业：
1、模拟表单的数据验证
1、页面中创建如下元素
1、文本框-用户名称-uname
2、密码框-用户密码-upwd
3、密码框-重复密码-cpwd
以上三个元素后，各创建一个span(用于显示提示内容)
2、添加以下事件完成数据的验证
1、文本框获取焦点时，提示，用户名称6-18位
2、文本框失去焦点时，判断，用户名称是否为空并给出相应提示(用户名不能为空/通过)
3、upwd获取焦点时，提示，密码6-18位
4、upwd失去焦点时，判断，密码是否为空并给出提示(参考文本框提示)
5、cpwd失去焦点时，判断 cpwd的值是否与 upwd的值一致，并给出提示(通过/两次密码输入不一致)
2、提供以下数组，在网页中完成数据加载操作，效果 参考 作业.png
var infos = [
["《西游记》","吴承恩","神话故事..."],
["《水浒传》","施耐庵","动作片..."],
["《红楼梦》","曹雪芹","爱情片..."]
];
/**/*/===============================*/**/\
1、DOM - 事件
1、onload
window.onload 事件,网页在加载时要执行的操作
练习：
1、给定以下数组
var province = ["黑龙江","吉林","辽宁"];
2、当网页加载时，将province的数据，显示在一个选项框中<select>
结构如下：
<select>
<option value="0">黑龙江</option>
<option value="1">吉林</option>
<option value="2">辽宁</option>
</select>
2、onchange
1、给定如下数组
var city = [
["哈尔滨","齐齐哈尔","牡丹江"],
["长春","吉林","四平"],
["沈阳","大连","铁岭"]
];
2、onchange 事件
1、作用
当选项框中的选项发生改变时要激发的操作
===================================================
1、AJAX
1、名词解释
1、同步(Synchronous)
在一个任务进行中，不能开启其它的任务
同步访问：浏览器在向服务器发送请求的时候，浏览器只能等待服务器的响应，不能做其它的事情
2、异步(Asynchronous)
在一个任务进行过程中，可以随时开启其它任务去执行
异步访问：浏览器在向服务器发送请求的时候，不耽误用户在网页上做其它的操作
使用场合：
1、用户名的重复验证
2、聊天室
3、股票走势图
4、搜索建议(百度，京东，淘宝的搜索框)
2、什么是AJAX
Asynchronous Javascript And Xml
异步的 JS 和 Xml
本质：使用JS所提供的异步对象，异步的向服务器发送请求，并接收响应的数据(响应数据的格式是Xml的，但已过时)
使用AJAX发送请求时，服务器响应回来的是部分数据而不是完整的页面，可以以无刷新的效果来更改页面中的内容
3、AJAX的核心对象 - 异步对象
异步对象 - XMLHttpRequest
在 AJAX 中，所有的请求 和 响应 都是由异步对象来完成的。
4、创建 AJAX的核心对象
标准创建：var xhr=new XMLHttpRequest();
IE8及以下：
var xhr=new ActiveXObject("Microsoft.XMLHttp");
通过 window.XMLHttpRequest 操作来判断浏览器是否支持标准创建法
if(window.XMLHttpRequest){
//当前浏览器支持 XMLHttpRequest ，标准创建
}else{
//当前浏览器只能用 ActiveXObject() 创建
}
练习：
1、创建一个 xhr 对象，并将创建好的对象打印在 控制台上
5、xhr 的常用方法 和 属性(难点)
1、open() - 方法
作用：创建请求
语法：xhr.open(method,url,isAsyn);
1、method
string类型
请求方式：get,post
2、url
string类型
请求地址
3、isAsyn
boolean 类型
指定采用同步(false)还是异步(true)的方式发送请求
ex:
xhr.open("post","test.php",true);
通过xhr，采用post的请求方式，异步的向test.php发送一个请求
练习：(5分钟)
1、创建一个网页04-getResponse.html,网页中创建一个按钮，单击时完成以下功能
1、获取 xhr 对象
2、创建一个请求，采用异步的方式，get提交方式向04-response.php页面发送一个请求
2、创建04-response.php,响应输出一句话"我的第一个AJAX程序 "
2、readyState - 属性
作用：表示 xhr 对象的 请求状态
值： 0-4 表示5个状态
0 : 请求尚未初始化的状态
1 : 正在发送请求
2 : 请求完成
3 : 正在接收服务器端的响应
4 : 接收响应数据成功
注意：当readyState的值为4的时候，才表示所有的响应都已经接收完毕
3、status - 属性
作用：表示服务器的响应状态码
值：
只记住一个即可 -> 200
当status的值为200的时候，表示服务器已经正确的处理请求以及给出正确的响应
4、onreadystatechange - 事件
作用：当 xhr 的readyState状态码发生改变时，要自动激发的操作
语法：
xhr.onreadystatechange = function(){
//判断当xhr.readyState为4的时候并且xhr.status 为 200的时候，才可以正确接收响应数据
if(xhr.readyState==4&&xhr.status==200){
//可以接收响应回来的数据并处理
var resText=xhr.responseText;
console.log(resText);
alert(resText);
}
}
5、send() - 方法
作用：发送请求
语法： xhr.send(请求主体);
如果没有请求主体的话，该位置为 null
如果有请求主体，则放请求主体的数据
6、发送异步请求的步骤
1、创建 xhr
2、创建请求 xhr.open()
3、设置xhr的onreadystatechange事件(回调函数)
回调函数：要在readyState的值发生改变之后才回来调用的函数
4、发送请求
练习：
1、创建05-response.php，响应输出一句话"我的AJAX练习"
2、创建05-ajax-exercise.html
1、增加一个按钮，增加一个div(id="show")
2、单击按钮时，异步的使用get提交方式向05-response.php发送一个请求
3、将响应回来的数据以 <h1> 标题的方式显示在div中
7、使用GET提交方式，发送请求数据
在地址后拼参数信息
05-response.php?name1=value1&name2=value2
在php中取值：
$n1=$_REQUEST["name1"];
$n2=$_REQUEST["name2"]
作业：
1、登录名称的重复性验证，参考学子商城-注册页
/*==================================================================*/
1、使用AJAX发送POST请求
注意两点：
1、post的请求数据要放在请求主体中
xhr.send("name1=value1&name2=value2");
2、
使用AJAX发送post请求时，默认会将 Content-Type的消息头更改为 text/plain, 导致在后台无法正常接收请求的数据
所以，在发送post请求时，必须手动的将Content-Type的消息头更改为 "application/x-www-form-urlencoded"
修改方式如下：
要在发送请求之前,增加如下代码：
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
练习：
使用post请求方式，完成学子商城的登录验证操作
练习：(10分钟)
1、03-province.php
1、["黑龙江","吉林","辽宁"]
2、将数组解析，拼成 <option>再响应给客户端浏览器
2、03-province.html
网页加载时，向03-province.php 发送请求，再获取响应数据，并填充到<select>元素中
3、03-city.php
1、
[
["哈尔滨","齐齐哈尔","牡丹江"],
["长春","吉林","四平"],
["沈阳","大连","铁岭"]
]
2、03-province.html中，当 <select> 的选项发生改变时，向03-city.php 发送一个请求，并将选中的省份的值，传递过来
3、03-city.php 中，根据传递过来的省份的值，将城市的信息拼成 <option> 再响应回去，并显示在
一个<select>中
=====================================
2、JSON
1、JS对象 - JavaScript Object(JSO)
1、使用关联数组表示范冰冰的信息
var fbb = [];
fbb["name"] = "范冰冰";
fbb["age"] = 40;
fbb["gender"] = "女";
console.log(fbb["name"]);
2、JS对象
语法：
var 对象名={属性1:值1,属性2:值2,属性3:值3};
ex:
var fbb={name:"范冰冰",age:40,gender:"女"};
console.log(fbb.name); //范冰冰
console.log(fbb.gender);
练习：
1、创建一个对象 lwh
2、lwh对象中要包含的属性及值
1、name ，李文华
2、age ，42
3、gender ，男
4、weight ，100
5、height ，168
3、将以上的属性打印输出
姓名:李文华
年龄：42
性别：男
... ...
3、对象的数组
通过一个数组，保存若干个对象的信息
语法：
var users=[{},{},{}];
ex
var users = [
{name:"漩涡鸣人",age:23},
{name:"佐助",age:24},
{name:"春野樱",age:20}
];
for(var i=0;i<users.length;i++){
var u=users[i];
console.log(u.name);
console.log(u.age);
}
练习：使用对象的数组保存多个对象
1、创建一个数组名称为users，用于保存多个用户的信息
2、users数组中，分别保存以下数据
对象1 ：
name ：李文华
age ：42
gender ：男
对象2 ：
name ：范冰冰
age ：40
gender ：女
对象3 ：
name ：李晨
age ：43
gender ：男
3、打印输出
姓名：李文华
年龄：42
性别：男
姓名：范冰冰
年龄：40
性别：女
2、JSON
1、什么是JSON
JavaScript Object Notation
JS 对象 表现方式
其本质：是以JS对象/数组的格式来表现出来的字符串
2、JSON语法
1、JSON表示对象的字符串
1、用一对{}来表示一个对象
2、对象中的属性名，必须用""引起来(单引号都不行)，值如果是字符串，也必须用""引起来
ex:
var ym='{"name":"杨幂","height":170}';
练习：
创建一个JSON的字符串，表示范冰冰的信息
name:范冰冰
age:40
gender:女
2、JSON表示数组的字符串
1、普通数组
var arr = '["杨幂","柳岩","金星","李文华"]';
2、对象的数组
'[
{
"name":"杨幂",
"age":31
},
{
"name":"范冰冰",
"age":40
}
]'
3、将JSON的字符串转换为JS对象/数组
1、使用 eval()
var user='{"name":"范冰冰","age":40,"gender":"女"}';
var obj=eval("("+user+")");
2、使用 JSON.parse() 将JSON字符串转换为JS对象/数组
var user='{"name":"范冰冰","age":40,"gender":"女"}';
var obj = JSON.parse(user);
练习：
1、将以下JSON字符串转换为JS数组
'[{"name":"杨幂","age":31},{"name":"范冰冰","age":40}]'
eval() / JSON.parse()
2、循环遍历转换后的数组，打印每个对象的name 和 age
4、JSON文件
允许将JSON格式的字符串(对象/数组)保存在独立的 .json 文件中。允许使用AJAX向JSON文件发送请求并获取响应数据
练习：
1、创建一个 Persons.json文件，里面包含一个数组，数组中包含3个对象，每个对象包含uname,upwd,uage属性，分别赋值
2、创建一个07-getPersons.html文件，使用AJAX向Persons.json 发送请求并打印输出内容
用户名称：xxx
用户密码：xxx
用户性别：xxx
用户名称：xxx
用户密码：xxx
用户性别：xxx
用户名称：xxx
用户密码：xxx
用户性别：xxx
5、在php中的JSON
在php中允许将数组(一维，二维，关联)转换成JSON格式的字符串
语法：
通过 json_encode() 将数组转换为JSON字符串，并返回转换后的结果
xxx.php中
$array = ["范冰冰","杨幂","李晨"];
$str=json_encode($array);
mysqli_fetch_all($result,MYSQLI_ASSOC);
