AJAX - 阿贾克斯
1、URL
1、作用
用于表示互联网上任意一个资源的位置
2、详解
格式:
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
禁用缓存配置
ex:
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获取页面上的某个元素
1、为元素增加一个id属性
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、获取 / 设置 表单控件的值
取值: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的数据,显示在一个选项框中
结构如下:
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、将响应回来的数据以
标题的方式显示在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、将数组解析,拼成
2、03-province.html
网页加载时,向03-province.php 发送请求,再获取响应数据,并填充到
3、03-city.php
1、
[
["哈尔滨","齐齐哈尔","牡丹江"],
["长春","吉林","四平"],
["沈阳","大连","铁岭"]
]
2、03-province.html中,当
3、03-city.php 中,根据传递过来的省份的值,将城市的信息拼成
一个
=====================================
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 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);