web开发概要（2）

第三周总结

DOM对象

文档对象模型

操作HTML的API

查找元素

• 通过 id 找到 HTML 元素
• 通过标签名找到 HTML 元素
• 通过类名找到 HTML 元素

let id = document.getElementById("div1");
// 根据class属性获取元素集合
let className = document.getElementsByClassName("div2");
// 根据标签名获取元素集合
let tagName = document.getElementsByTagName("div");
// 根据name属性获取元素集合
let name = document.getElementsByName("div3")

修改元素内容

<div>美好的一天</div>
    <div id="div1"></div>
    <script type="text/javascript">
        let div = document.getElementById("div1");
        div.innerHTML ="在于学习";

创建元素

let dom对象=document.createElement("标签名")

给标签设置文本信息

dom对象.innerText="文本内容"

给标签设置属性

dom对象.setAttribute(“属性名”，"值")

往标签中添加子元素

dom对象.appendChild("子元素-dom对象")

HTTP协议

请求方式

1.get 查询数据

2.post提交数据

3.put修改数据

4.delete删除数据

//请求行
get  /hello?username=admin&password=123413112   

//请求头
key：value
key:value
token:12345

get post区别

get请求没有请求体，post有请求体

servlet

1继承httpServlet

2重写doget 或dopost方法

3在web xml文件注册

4.HttpServletRequest

req.getParameter("key")

5.HttpServletResponse

resp.getWriter().println("xxx")

cookie 的使用

• cookie 的创建是通过 document 对象调用 cookie 属性

    var date = new Date();
    date.setTime(date.getTime()+60*60*1000);
    document.cookie = "username=zs;expires="+date.toGMTString();

• expries 为 cookie 的有效时间，我们可以通过设置 date 对象的时间来给 cookie 设置有效时间

• cookie 的销毁，把所需要的 cookie 有效时间设置为当前时间

开发流程

浏览器 ---请求-- >> html 文件 -- >浏览器接受到html字符串数据解析--->发送ajax请求

--> 请求服务器接口(Servlet)----> Controller--- Service----->DAO----数据库

​ Controller<--- Service<----DAO<----数据库

​ 控制转化json数据 -- > 响应浏览器

--->ajax回调接口---> 解析json-->DOM操作-->显示在前端界面