• AJAX-URL-HTTP协议-缓存-DOM操作-HTML元素事件


    1.URL
    1.URL的作用
    用于来表示任意一个资源的位置(互联网上)。

    协议+主机名+文件目录结构+文件名称
    2.详解
    格式:
    <scheme>://<user>:<pwd>@<host>:<port>/<path>:<params>?<query>#<frag>
    scheme:方案,协议,以哪种方式到服务器获取资源,协议不区分大小写,常用协议:http,https,ftp
    user:用户名
    pwd:密码
    host:主机名 localhost
    port:端口
    path:路径,资源在服务器上具体的存放位置
    params:参数
    query:查询字符串,要传递给服务的数据
    http:127.0.0.1/update.php?uid=1&uname=dangdang&upwd=123
    frag:锚点
    http://127.0.0.1/a.html#NO1
    2.HTTP协议
    1.什么是HTTP
    Hyper Text Transfer Protocol:超文本传输协议。
    规范了数据是如何打包以及传递的。
    2.历史
    发展史
    现用版本:http/1.1
    3.详解
    1.请求(Request)消息
    客户端带给服务器端的信息都有哪些,由三部分组成:请求起始行,请求头,请求主体
    1.请求起始行
    1.请求方法
    1.GET
    表示客户端获取服务器资源时使用
    特点:
    1.无请求主体
    2.靠地址栏传递查询字符串
    2.POST
    表示想要传递数据给服务器时使用
    特点:有请求主体
    3.DELETE 表示客户端要删除服务器数据(一般禁用)
    4.PUT 表示客户端想放置文件到服务器
    5.HEAD 表示客户端只想获取指定的响应头
    6.CONNECT 测试连接
    7.TRACE 追踪请求路径
    8.OPTIONS 选项,保留以后使用
    2.请求URL
    3.协议版本 HTTP/1.1
    2.请求头
    1.Host:localhost
    作用:告诉服务器请求哪个主机
    2.Connection:keep-alive
    作用:告诉服务器要进行持久连接。
    3.User-Agent:
    作用:告诉服务器自己(浏览器)的类型。
    4.Accept-Language:zh-cn
    作用:告诉服务器能接收的自然语言。
    5.Accept-Encoding:gzip
    作用:告诉服务器能接收的数据压缩类型是什么。
    6.Referer:HTTP://127.0.0.1/login.html
    作用:告诉服务器请求来自哪个页面。
    3.请求主体
    Form Data

    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:服务器内部错误
    3.原因短句
    对状态的简单解释
    2.响应头
    1.Date
    作用:告诉浏览器,服务器的响应时间(格林尼治)
    2.Connection
    作用:告诉浏览器已经启动持久连接
    3.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.image/jpeg:响应回来的数据是图片

    3.响应主体
    Response
    3.缓存
    1.什么是缓存
    客户端将服务器响应回来的数据进行自动的保存,当再次访问时,直接使用保存的数据。
    2.缓存的优点
    1.减少了冗余数据的传输,节省客户端的流量
    2.可以节省服务器带宽
    3.降低了对服务器资源的消耗和运行要求
    4.降低了由于远距离而造成的延时加载
    3.与缓存相关的消息头
    1.Cache-Control消息头
    作用:从服务器将文档传递到客户端之时起,此文档处于新鲜的秒数
    语法:Cache-Control:max-age=处于新鲜的秒数
    ex:
    Cache-Control:max-age=3600;
    2.Expires消息头
    作用:指定缓存过期确切时间
    语法:Expires:Thu,23,Nov 2017 07:00:00 GMT

    4.在网页中设置消息头
    html:
    <meta http-equiv="消息头" content="值">
    ex:
    <meta http-equiv="Cache-Control" content="max-age=3600">
    4.DOM操作
    1.完整的javascript的组成
    1.JS核心:ECMAScript
    2.DOM:Document Object Model
    文档对象模型
    让js动态的操作页面的元素
    3.BOM:Browser Object Model
    浏览器对象模型
    让js动态的操作浏览器
    2.使用js获取页面上的某个元素
    在js中,允许通过元素的ID来获取页面的指定元素
    var ele=document.getElementById("元素ID");
    练习:
    1.在网页中创建一个div,并定义id值,div中的内容随意
    2.在页面中创建一个按钮,点击时,将div元素获取出来,并打印在控制台,观察结果。
    3.获取/设置元素中的内容
    DOM对象的一个属性:innerHTML
    表示的是标签内的所有内容
    练习:
    1.页面中新建一个段落元素,设置id为p1,内容随意。
    2.在页面中添加一个按钮,点击时,获取p元素中的文本,并打印在控制台。
    3.再添加一个按钮,点击时,将p元素中的文本设置为“这是我的第一个DOM操作”。
    4.获取/设置表单控件的数据
    在DOM中,表单控件们,是通过DOM对象的value属性来获取/设置值的。
    步骤:
    1.通过id获取表单控件
    2.通过value属性获取/设置控件的值
    练习:
    页面中创建一个文本框id为uname,再创建一个div元素,id为d1,再添加一个按钮到页面,点击按钮时,将文本框中的数据,显示在div中。
    封装js函数:
    1.创建一个独立的js文件(以.js为结尾的文件)
    2.在js文件中封装$()函数,函数接收一个id值作为参数,函数返回DOM对象。
    3.点击按钮时,调用$()函数,将文本框中的数据以一级标题显示在div中。
    5.HTML元素事件
    1.什么是事件
    允许通过用户的行为来激发的操作就是事件。
    常用事件:onclick
    2.其它事件
    1.文本框和密码框-onblur
    onblur事件:失去焦点
    2.文本框和密码框-onfocus
    onfocus事件:获取焦点
    3.body的onload事件
    当网页加载时要执行的操作。

  • 相关阅读:
    Python--day34--socket模块的方法
    Python--day32--ftp文件传输报错的原因
    Python--day32--struct模块
    Python--day32--复习:https和http的区别;黏包;黏包问题的解决方式;
    快捷键(随时补充)
    turtle 20秒画完小猪佩奇“社会人”
    Kibana使用教程
    Elasticsearch: 权威指南
    數據可視化大屏
    newtonsoft文檔說明
  • 原文地址:https://www.cnblogs.com/QiliPING9/p/9027819.html
Copyright © 2020-2023  润新知