网络的基本知识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 物理层:源设备到目的设备 主要作用是传输比特流(就是由1、0转化为电流强弱来进行传输)-->
<!-- 数据链路层 进行电信号的处理 进行数据的分组 一篇文章有多个标题 方便阅读 -->
<!-- 网路层 进行数据包的传递 进行不同网络的选择 地图导航 负责规划路线找到最佳路线-->
<!-- 传输层:数据包的传输 建立连接 保证数据不丢失 靠谱的快递员 不丢件 -->
<!-- 会话层:建立连接 保持连接 关闭连接 谍战片中的接线员 -->
<!-- 表示层:主要是进行对接收的数据进行解释、加密与解密、压缩与解压缩等 -->
<!-- 应用层:qq 微信应用层 直接服务用户 比如餐厅的服务员 直接为用户提供网络服务 -->
<!-- json 数据交换格式 -->
</body>
</html>
form表单的提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- action 要提交的地址 就是你请求的url -->
<form action="提交的地址.html">
<input type="text" name="username">
<input type="text" name="password">
<input type="submit">
</form>
</body>
</html>
JOSN的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 对象是key:value
// 对象是无序的键值对
// JSON是一种数据交换格式
var obj = {
"name":"小明",
"age":18
}
console.log(obj)
// '{"name":"小明","age":18}'
console.log('JSON.stringify(obj))
console.log(JSON.parse('{"name":"小明","age":18}'))
</script>
</body>
</html>
ajax的基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<!-- ajax能在不刷新整个页面的情况下,实现局部更新 -->
<!-- 前端要和后端进行通信 通过ajax 前后端的桥梁就是ajax -->
<!-- 最终前端页面的数据要来源数据库 -->
<!-- 我们就是通过ajax来与后台进行数据交互的 -->
<script>
document.querySelector('#app')
// 定义一个实例化对象
var xhr = new XMLHttpRequest();
console.log(xhr);
// 2.调用open方法填写你的请求方式和请求地址
xhr.open('请求方式','请求地址')
// 3.调用send方法发送请求
xhr.send();
// 4.监听请求状态
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
console.log('请求成功');
}
}
</script>
</body>
</html>
get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// get请求可以直接在浏览器地址栏进行访问请求
var xhr = new XMLHttpRequest();
// http://localhost:3008/api/student/getStudent request URL
xhr.open('get','http://localhost:3008/api/student/getStudent')
xhr.send();
xhr.onreadystatechange = function () {
if(xhr.readyState==4){//请求完成
if(xhr.status==200){//请求成功
console.log(JSON.parse(xhr.response))
}
}
}
</script>
</body>
</html>
post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// get请求一般用于查询 post一般用于提交数据
var xhr = new XMLHttpRequest();
// clazz班级 name 姓名 gender 性别 age 年龄 tel 电话 address 地址信息 remark 备注信息**
xhr.open('post','http://localhost:3008/api/student/addStudent')
// 设置传参的方式 设置请求头
xhr.setRequestHeader('Content-Type','application/json')
var obj={
clazz:"123",
name:'小明',
gender:"男",
age:18,
tel:12345678900,
address:"河南省郑州市",
remark:"我是备注信息"
}
// 窗体格式
// 设置请求头
// xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(JSON.stringify(obj))
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){//请求成功
}
}
</script>
</body>
</html>
ajax是异步的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// ajax默认是异步的
// js是单线程的
// js代码是从上往下执行的
setTimeout(function(){
console.log('setTimeout')
},2000)
// var xhr = new XMLHttpRequest();
// xhr.open('method','url',async)
// xhr.open('get','http://localhost:3008/api/student/getStudent',false);
// xhr.send();
// console.log('xhr',xhr.response)
// xhr.onreadystatechange = function(){
// if(xhr.readyState==4&&xhr.status==200){
// console.log('xhr',xhr.response)
// }
// }
console.log('小明')
</script>
</body>
</html>
ajax的局部更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<input type="text" name="id" id="idValue">
<button id="btn">搜索</button>
<div class="content"></div>
</div>
<script>
// 获取dom对象
var btn = document.getElementById('btn')
var idValue = document.getElementById('idValue')
var content = document.querySelector('.content')
// 绑定事件
btn.onclick = function(){
// 获取输入框的值
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://localhost:3008/api/student/getStudent?id='+idValue.value);
xhr.send()
xhr.onreadystatechange = function () {
if(xhr.readyState==4 && xhr.status==200){
console.log(xhr.response)
var data = JSON.parse(xhr.response)[0]
console.log(data)
content.innerHTML = `<span>${data.name}</span><span>${data.address}</span>`
}
}
}
</script>
</body>
</html>
跨域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.min.js"></script>
</head>
<body>
<script>
// 跨域是违背了浏览器的同源策略
// 同源策略是浏览器的一种安全策略
// 同源策略呢?协议 域名 端口号完全一样就是同源如果其中有任何一个
// 不一样就违背同源策略就产生跨域了
// 怎么去解决跨域
// 生产环境一般跨域都是后台解决
// 前端代码要放到服务器上
// jsonp
// jsonp解决跨域的原理就是利用script标签的src属性可以跨域+回调函数
//
function fun(res){
console.log(res)
}
</script>
<script src="http://localhost:3008/api/student/jsonpdemo?callback=fun"></script>
</body>
</html>
获取响应头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest();
xhr.open('get','http://localhost:3008/api/student/getStudent')
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState ==4 && xhr.status == 200){
console.log(xhr.getAllResponseHeaders()); // 获取所有的响应头
console.log(xhr.getResponseHeader('Content-Type'));
}
}
</script>
</body>
</html>
封装ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/ajaxFun.js"></script>
</head>
<body>
<script>
var obj={
clazz:"123",
name:'小明',
gender:"男",
age:20,
tel:12345678900,
address:"河南省郑州市",
remark:"我是备注信息"
}
postData('/api/student/addStudent',obj,function(res){
console.log(res)
})
getData('/api/student/getStudent',{name:"小明",id:1715137103824},function(res){
console.log(res)
})
</script>
</body>
</html>