1重点:当用户在浏览器中输入一个网址(URL)到显示一个网页中间经历了什么
1.在浏览器中输入网址(URL)
2.DNS解析,找到服务器(DNS域名解析服务器,通过域名找到了IP地址,最后通过IP地址找到服务器 localhost -> 127.0.0.1)
3.浏览器和WEB服务器建立连接:三次连接
4.建立连接后,客户端向服务器发起请求
5.服务器端收到请求后,处理请求,将响应消息发送给客户端
6.客户端和服务器端断开连接:四次挥手
7.客户端解析响应的消息,最后渲染成一张网页
AJAX
Asynchronous Javascript And XML(异步JavaScript和XML)
不用整个刷新页面,而是局部刷新
在页面加载后,向服务器端请求并结束数据,在后台向服务器发请求
好处:用于体验好
XML :是一种数据格式,采用了自定义的标签
[
{
title: '标题1',
ctime: '2023-3-10'
},
{
title: '标题2',
ctime: '2023-4-10'
}
]
<list>
<news>
<title>标题1</title>
<ctime>2023-3-10</ctime>
</news>
<news>
<title>标题2</title>
<ctime>2023-4-10</ctime>
</news>
</list>
练习:
编写02_data.html,假设从后端获取到了一组新闻类别,格式为数组,遍历数组,获取每个元素,最后渲染成以下格式
['公司动态', '产品资讯', '业界资讯']
//答案
// 从后端获取的数据
var arr = ['公司动态', '产品资讯', '业界资讯']
// 遍历数组,获取每个元素
// 声明变量,用于拼接每一组,初始值为空字符串
for(var i = 0, str = ''; i < arr.length; i++) {
// console.log(arr[i])
console.log(`<li>${arr[i]}</li>`)
// 把每一组拼接
str += `<li>${arr[i]}</li>`
}
// 渲染
cat.innerHTML = str
练习:
假设从后端获取一组新闻列表,格式为数组; 最后渲染成以下格式
var arr = [{
title: '1939年,日军狼狗部队无人可挡,董翰良苦思良久跳起',
ctime: 1611198000333
},
{
title: '大将军:库里排历史第10 单看数据已超魔术师',
ctime: 1591198000333
},
{
title: '这些进攻性武器,美国真会供应乌军吗?',
ctime: 1554198000333
}
]
// 遍历数组,获取每条新闻
// 声明变量,用于拼接,初始化为空字符串
for (var i = 0, str = ''; i < arr.length; i++) {
// arr[i].ctime 每条数据的时间戳
// 把时间戳放入到Date对象
var d = new Date(arr[i].ctime)
// 获取年月日
var year = d.getFullYear()
var month = d.getMonth() + 1
var date = d.getDate()
// 把年月日拼接
var time = `${year}-${month<10 ? '0'+month : month}-${date<10 ? '0'+date : date}`
str += `
<li>
<a href="#">· ${arr[i].title}</a>
<span>${time}</span>
</li>
`
}
// 渲染
news.innerHTML = str
练习:
当用户失去焦点,验证用户输入的值是否为'xin666',如果是显示'该用户已被占用',否则 '用户名可以使用' onblur
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>验证用户名是否存在</title>
</head>
<body>
<input type="text" id="user" placeholder="请输入用户名">
<span id="msg"></span>
<script>
// 给文本框绑定失去焦点事件
user.onblur = function () {
// 获取用户输入的值
console.log(user.value)
// 判断用户名是否为xin666
if(user.value === 'xin666') {
msg.innerHTML = '该用户已被占用'
// 操作CSS
msg.style.color = 'red'
} else {
msg.innerHTML = '用户名可以使用'
msg.style.color = 'green'
}
}
</script>
</body>
</html>
练习:
编写登录页面04_login.html,点击登录,获取用户名和密码,如果用户名是admin并且密码是123456,警示框弹出‘登录成功’,否则弹出'登录失败'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户登录</title>
</head>
<body>
用户<input type="text" id="user"><br>
密码<input type="text" id="pwd"><br>
<button id="btn">登录</button>
<script>
btn.onclick = function() {
// 获取用户名和密码
var a = user.value
var b = pwd.value
console.log(a,b)
// 判断是否正确
if(a === 'admin' && b === '123456'){
alert('登录成功')
} else {
alert('登录失败')
}
}
</script>
</body>
</html>
练习:假设从后端获取到一组医院的数据,每个医院包含的属性有编号、名称、等级、省份、详细地址、联系电话; 遍历数组获取每条数据,最后渲染成以下格式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据渲染</title>
<style>
table {
width: 1000px;
margin: 100px auto;
border: 1px solid #ccc;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>医院名称</th>
<th>等级</th>
<th>省份</th>
<th>详细地址</th>
<th>联系电话</th>
</tr>
</thead>
<tbody id="cont">
<tr>
<td>1</td>
<td>解放军总医院</td>
<td>三级甲等</td>
<td>北京</td>
<td>海淀区复兴路77号</td>
<td>010-12345678</td>
</tr>
</tbody>
</table>
<script>
var arr = [
{
id: 1,
title: '北京大学第三医院',
level: '三级甲等',
province: '北京',
addr: '北京市海淀区北三环西路105号',
tel: '010-88481234'
},
{
id: 2,
title: '北京协和医院',
level: '三级甲等',
province: '北京',
addr: '北京市海淀区北三环西路105号',
tel: '010-88481234'
},
{
id: 3,
title: '解放军总医院',
level: '三级甲等',
province: '北京',
addr: '北京市海淀区北三环西路105号',
tel: '010-88481234'
}
]
// 遍历数组,获取每条数据
// 声明变量,用于拼接多组数据,初始化为空字符串
for(var i = 0, str = ''; i < arr.length; i++) {
// console.log(arr[i])
// 把每条数据中的值拼接到模板中
console.log(`
<tr>
<td>${arr[i].id}</td>
<td>${arr[i].title}</td>
<td>${arr[i].level}</td>
<td>${arr[i].province}</td>
<td>${arr[i].addr}</td>
<td>${arr[i].tel}</td>
</tr>
`)
// 多组数据拼接
str += `
<tr>
<td>${arr[i].id}</td>
<td>${arr[i].title}</td>
<td>${arr[i].level}</td>
<td>${arr[i].province}</td>
<td>${arr[i].addr}</td>
<td>${arr[i].tel}</td>
</tr>
`
}
// 渲染
cont.innerHTML = str
</script>
</body>
</html>