1.Ajax
1.URL 的作用
用于表示任意一个资源的位置 (互联网上)
2. 详解
格式:
<scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<frag>
scheme: 方案 \ 协议, 以哪种方式到服务获取资源, 协议不区分大小写,
常见的协议: http,https,ftp
SSH: 安全的远程登录
SMTP: 邮件传输
POP3: 邮件接收
DNS: 域名解析
TELNET: 远程登录
host: 主机名, 服务器主机名或 IP 地址或域名 (由 DNS 转换为 IP 地址) 127.0.0.1=localhost
port: 端口号 80 443
user: 用户名, 访问某些特定资源时需要用到的信息
pwd: 密码, 访问某些特定资源时需要用到的密码
path: 路径, 资源在服务器上具体存放位置
params: 参数 (跟服务器有关)
query: 查询字符串, 要传递给服务器的数据
http://127.0.0.1/login.php?uname=dangdang&upwd=12345
frag: 锚点
http://127.0.0.1/a.html#NO1
针对前端的进阶和提升, 特邀资深前端工程师直播讲解热门技术, 代码案例, 面试技巧等. 前端开发学习扣 qun 767273102 , 无论你是大牛还是小白, 是想转行还是想入行都可以来了解一起进步一起学习! 内有开发工具, 很多干货和技术资料分享! 希望新手少走弯路
2.HTTP 协议
1. 什么是 HTTP
Hyper Text Transfer Protocol: 超文本传输协议
规范了数据如何打包以及传递
2. 详解
1. 请求 (request) 消息
客户端带给服务器的数据都有哪些, 由三部分组成
1. 请求的起始行
1. 请求方法
1.GET
表示客户端向服务器获取资源时使用
特点:
1. 无请求主体
2. 靠地址栏传递查询字符串
2.POST
表示想传递数据给服务器时使用
特点:
1. 有请求主体
3.PUT
表示客户端想放置文件到服务器 (禁用)
4.DELETE
表示客户端要删除服务器端的数据 (禁用)
5.HEAD
表示客户端只想获取指定的响应头
6.CONNECT
测试连接
7.TRACE
追踪请求路径
8.OPTIONS
选项, 保留以后使用
2. 请求 URL
3. 协议版本: HTTP/1.1
2.1 请求头
1.Host:localhost/127.0.0.1
作用: 告诉浏览器请求哪一个主机
2.Connection:keep-alive
作用: 告诉服务器要进行持久连接
3.User-Agent:
作用: 告诉服务器自己 (浏览器) 的类型
4.Accept-Language:zh-cn
作用: 告诉服务器自己能接纳的自然语言
5.Accept-Encoding:gzip
作用: 告诉服务器自己能接收的数据压缩类型是什么
6.Referer:http:localhost/Day01/login.HTML
作用: 告诉服务器请求来自哪个页面
3. 请求主体
Form Data
2.2 响应 (response) 消息
1. 响应起始行
1. 协议版本号: HTTP/1.1
2. 响应状态码
作用: 告诉浏览器, 服务器的响应状态是什么问题 (有问题, 没有问题, 有问题 \ 问题大概是什么)
1xx:100-199 提示信息
2xx: 成功响应
200:ok
3xx: 需要进行重定向
301: 永久性重定向
302: 临时重定向
304:Not Modified
4xx: 客户端请求错误
404:Not Found 请求资源不存在
403:Forbidden 权限不够
405:Method Not Allowed 请求方法不被允许
5xx: 服务器运行错误
500: 服务器内部错误
2.3 原因短句
对状态码的简单解释
2. 响应头
1.Date
作用: 告诉浏览器, 服务器的响应时间
格林尼治时间 (+8h)
2.Connection
作用: 告诉浏览器已经启动持久连接
3.Content-Type
作用: 响应主体的类型是什么, 告诉浏览器, 用什么样的方式解析响应主体
1.text/HTML: 响应回来的数据是 HTML 文本
2.text/plain: 响应回来的数据是普通文本
3.text/CSS: 响应回来的数据是 CSS 样式
4.application/xml: 响应回来的数据是 xml 格式
5.application/JavaScript: 响应回来的数据是 JS 脚本代码
6.application/JSON: 响应回来的数据是 JSON 格式的字符串
7.images/jegp: 响应回来的数据是图片
3. 响应主体
Response
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; 每次都从服务器下载新资源
2.Expires 消息头
作用: 指定缓存过期的确切时间 (格林尼治时间)
语法: Expires:Thu,23 Nov 2017 GMT
如果希望客户端不缓存, 可以给一个过期的时间
Expires:Wed,22 Nov 2017 00:00:00 GMT
Expires:0;--- 此方法不标准, 执行性不是特别好
4. 在网页上设置消息头
1. 更改服务器配置
2. 网页上增加消息
- http-equiv="消息头" content="值">
- ex:
- http-equiv="Cache-Control" content="max-age=3600">
或
- http-equiv="Expires" content="0">
- PHP:
- header("Expires:0");
- Response.AddHeader("Expires","0");
- 4.Ajax
1. 名词解释
1. 同步 (Synchronous)
在一个任务进行中时, 不能开启其它的任务
同步访问: 浏览器在向服务器发送请求的时候, 浏览器只能等待服务器的响应, 不能做其它的事情.
出现场合:
1. 地址栏输入网址访问页面 (www.baidu.com)
2.a 标记默认跳转
3.submit 按钮的表单提交
2. 异步 (Asynchronous)
在一个任务进行中时, 可以开启其它的任务
异步访问: 浏览器在向服务器发送请求时, 不耽误用户在网页上做其它的操作
使用场合:
1. 用户名的重复验证
2. 聊天室
3. 股票走势图
4. 搜索框建议 (百度, 京东)
- 2.Ajax
- 1.Asynchronous JavaScript And xml
异步的 JS 和 xml
2. 本质:
使用 JS 提供的异步对象 (XMLHttpRequest), 异步的向服务器发送请求,
并接受响应数据 (数据格式是 xml)
Ajax 请求中, 服务器响应回来的数据部分数据而不是完整的页面,
并且可以以无刷新的效果来更改页面的局部内容.
3. 创建 XMLHttpRequest 对象 - 异步对象 (xhr)
标准创建:
var xhr=new XMLHttpRequest();
IE8 以下:
var xhr=new ActiveXObject("Microsoft.XMLHttp");
允许通过 Windows.XMLHttpRequest 来判断浏览器是否支持标准创建,
如果浏览器不支持标准创建, 那么 Windows.XMLHttpRequest 的值就是 null
- if(Windows.XMLHttpRequest){
- var xhr=new XMLHttpRequest();
- }else{
- var xhr=new ActiveXObject("Microsoft.XMLHttp");
- }
4.XHR 常用方法和属性 (重点)
1.open()
作用: 创建请求
语法: xhr.open(method,url,isAsyn);
1.method
string 类型
请求方式: get/post
2.url
string 类型
请求地址
3.isAsyn
boolean 类型
指定采用同步 (false) 还是异步 (true) 的方式发送请求
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);
- }
- }
- 5.send()
作用: 发送请求
语法: xhr.send(body)
body: 请求主体
如果没有请求主体, body 位置处为 null(get)
如果有请求主体, 则放请求主体数据到 body 位置 (post)
5. 发送异步请求的步骤
1. 创建 xhr 对象
2. 创建请求
3. 设置 xhr 的 onreadystatechange(回调函数)
判断状态, 并接收响应回来的数据
4. 发送请求
5. 使用 Ajax 发送 post 请求
注意两点:
1.post 的请求将数据放在请求主体中
- xhr.send(body);
- ex:
- xhr.send("uname=value1&upwd=value2");
2. 在发送请求之前, 需要手动修改请求消息头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
6.JS 对象数据格式
1.JS 对象的数据格式
- var lindaiyu=[];
- lindaiyu[0]="林黛玉";
- lindaiyu[1]="1990";
- lindaiyu[2]="160cm";
- lindaiyu[3]="50kg";
改版:
- var lindaiyu=[];
- lindaiyu["name"]="林黛玉";
- lindaiyu["birth"]="1990";
- lindaiyu["height"]="160cm";
- lindaiyu["weight"]="50kg";
ex: 取值
lindaiyu["name"]
数组描述的是林黛玉的个人信息, 如果你把林黛玉看成是一个对象,
那么她的个人信息就是她这个对象的属性.
JS 对象的语法:
var 对象名 ={
属性: 值,
属性: 值,
属性: 值,
属性: 值
};
ex: 林黛玉这个对象所对应的属性如下
- var lindaiyu={
- name:"林黛玉",
- birth:"1990",
- height:"160cm",
- weight:"50kg",
- }
如果对象取值的时候, 直接对象. 属性 名称就可以
ex:lindaiyu.name ---> 林黛玉
7.JSON
1. 什么是 JSON
JavaScript Object Notation
JS 对象 表现方式
JS 对象表示法, 即以 JS 对象的格式表现出来的字符串.
2.JSON 语法
1.JSON 对象
1. 用一对 {} 来表示一个对象
2. 对象的属性名称, 必须用 ""引起来 (单引号不可以), 值如果是字符串的话, 必须也用"" 引起来.
- ex:
- var computer='{
- "name":"电脑",
- "price":5600
- }'
2.JSON 数组
1. 普通数组
'[" 小乔 "," 大乔 "," 貂蝉 "]'
2. 对象数组
- '[
- {
- "name":"小乔",
- "height":"160cm",
- "age":18
- },
- {
- "name":"大乔",
- "height":"163cm",
- "age":20
- },
- {
- "name":"貂蝉",
- "height":"165cm",
- "age":21
- }
- ]'
3.JSON 文件创建
以. JSON 为后缀的文件, 里面包含的是符合 JSON 格式的数据
4. 将 JSON 字符串, 转换成 JS 对象 / 数组
- var mperson='{"name":"TOM","age":18}';
- //JSON 对象
- var arr='[" 小乔 "," 大乔 "," 貂蝉 "]';
- //JSON 数组
- var arr1='[
- {"name":"Lucy","age":19},
- {"name":"Lily","age":19}
- ]'; //JSON 数组
如何把上面的数据转换成 JS 对象 / 数组格式
1. 使用 eval() 将数据转换成 JS 对象数组 (不推荐)
2. 使用 JSON.parse() 来将 JSON 字符串解析为 JS 对象
- var obj=JSON.parse(mperson); //JS 对象
- var obj=JSON.parse(arr);//JS 数组
- var obj=JSON.parse(arr1);//JS 数组
2.JS 对象数据格式
var 对象名 ={
属性: 值,
属性: 值,
属性: 值
}
取值: 对象名称. 属性
3.JSON 数据格式
- var person='{
- "name":"TOM",
- "age":12
- }'
4. 将 JSON 格式的数据转换 JS 对象 / 数组
- eval()
- JSON.parse
4.1 在 PHP 中, 可以直接将数组转换成 JSON 格式的字符串
语法:
通过 json_encode() 将数组转换为 JSON 字符串, 并返回转换后的结果
ex:
在 PHP 中
- $array=["钉钉","当当","冰冰"];
- $str=json_encode($array);
8.xml
Ajax:Asynchronous JavaScript And xml
1. 什么是 xml
eXtensible Markup Language
可扩展的 标记 语言
xml 的标记没有被预定义过, 需要自定义
xml 的宗旨是做数据传递的, 而非显示数据
2.xml 的语法结构
xml 可以独立保存为 ***.xml 的文件, 也可以以字符串的形式出现
1.xml 的最顶端是 xml 的声明
<?xml version="1.0" encoding="utf-8"?>
2.xml 标记的语法
1.xml 标记必须成对出现
<person> 错误
2.xml 严格区分大小写, 开始和结束必须一致
正确
错误
3.xml 的标记允许被嵌套, 注意嵌套顺序
4. 每个标记都允许自定义属性, 格式与 HTML 一致, 但属性值, 必须用 "" 括起来
<person no="1001"></person>
5. 每个 xml 文档, 必须有一个根元素
3. 解析 xml 文档对象的内容
1. 核心方法
elem.getElementsByTagName("标签名称");
返回值: 返回一个包含指定元素们的 "类数组" (用 for 循环遍历)
- ex:var xmlDoc=xhr.responseXML;
- xmlDoc.getElementsByTagName("Student");
4. 在 PHP 中返回 xml 格式的字符串
1. 必须增加响应消息头
header("Content-Type:application/xml");
2. 按照 xml 的语法结构, 拼 xml 字符串, 再响应给前端
- $xml="";
- $xml.="";
- ...
- $xml.="";
- echo $xml;
来源: http://www.bubuko.com/infodetail-3100846.html