http协议修改js或html,AJAX-URL-HTTP协议-缓存-DOM操作-HTML元素事件(示例代码)

1.URL

1.URL的作用

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

协议+主机名+文件目录结构+文件名称

2.详解

格式：

://:@:/:?#

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:

ex:

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事件

当网页加载时要执行的操作。