zoukankan      html  css  js  c++  java
  • 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事件
    当网页加载时要执行的操作。

  • 相关阅读:
    PAIRING WORKFLOW MANAGER 1.0 WITH SHAREPOINT 2013
    Education resources from Microsoft
    upgrade to sql server 2012
    ULSViewer sharepoint 2013 log viewer
    Top 10 Most Valuable Microsoft SharePoint 2010 Books
    讨论 Setsockopt选项
    使用 Alchemy 技术编译 C 语言程序为 Flex 可调用的 SWC
    Nagle's algorithm
    Nagle算法 TCP_NODELAY和TCP_CORK
    Design issues Sending small data segments over TCP with Winsock
  • 原文地址:https://www.cnblogs.com/QiliPING9/p/9027819.html
Copyright © 2011-2022 走看看