HTTP学习
1.概念
1.客户端与服务器超本文无状态传输协议
2.http默认端口80
3.https 默认端口 443
2.请求方法
1.options：测试有哪些方法可以用
2.get：获取服务信息
3.Post： 修改与更新，新增服务器信息
4.put：新增
5.delete：删除
6.head 只返回头信息
7.trace：回显头信息，用来测试
8.connect： 管道形式连接
3.请求过程
建立tcp连接 客户端发送请求头+请求体 服务器响应请求头+请求体 ，关闭tcp连接 客户端渲染内容
1.客户端发起 http请求 建立tcp连接
2. 客服端（浏览器）发送请求信息（状态行 请求头 空行 请求体）
3. 服务的响应请求信息（状态行 响应头 空行 响应体）
4. 客服关闭tcp网络连接
5. 客户端（浏览器）渲染内容
4常见的http响应码
1.
100：这个状态码是告诉客户端应该继续发送请求，这个临时响应是用来通知客户端的，部分的请求服务器已经接受，但是客户端应继续发送求请求的剩余部分，如果请求已经完成，就忽略这个响应，而且服务器会在请求完成后向客户发送一个最终的结果
2.
200：这个是最常见的http状态码，表示服务器已经成功接受请求，并将返回客户端所请求的最终结果
-
202：表示服务器已经接受了请求，但是还没有处理，而且这个请求最终会不会处理还不确定
-
204：服务器成功处理了请求，但没有返回任何实体内容 ，可能会返回新的头部元信息
-
301：客户端请求的网页已经永久移动到新的位置，当链接发生变化时，返回301代码告诉客户端链接的变化，客户端保存新的链接，并向新的链接发出请求，已返回请求结果
-
404：请求失败，客户端请求的资源没有找到或者是不存在
-
500：服务器遇到未知的错误，导致无法完成客户端当前的请求。
-
503：服务器由于临时的服务器过载或者是维护，无法解决当前的请求，以上http状态码是服务器经常返回的状态代码，用户只能通过浏览器的状态了解服务器是否正常运行，一般除了错误的状态码，都不会看到服务器的状态码的，新SEOer你们了解到了吗？内容编辑来自51特色购SEO优化人员，想了解更过状态码的知识可以加我好友，一起相互交流学习
5.同步异步
概念理解:
**“同步”**就好比：你去外地上学(人生地不熟)，突然生活费不够了；此时你决定打电话回家，通知家里转生活费过来，可是当你拨出电话时，对方一直处于待接听状态(即：打不通，联系不上)，为了拿到生活费，你就不停的oncall、等待，最终可能不能及时要到生活费，导致你今天要做的事都没有完成，而白白花掉了时间。打不通电话，阻塞了。
异步就是：在你打完电话发现没人接听时，猜想：对方可能在忙，暂时无法接听电话，所以你发了一条短信(或者语音留言，亦或是其他的方式)通知对方后便忙其他要紧的事了；这时你就不需要持续不断的拨打电话，还可以做其他事情；待一定时间后，对方看到你的留言便回复响应你，当然对方可能转钱也可能不转钱。但是整个一天下来，你还做了很多事情（非阻塞）。 或者说你找室友临时借了一笔钱，又开始happy的上学时光了。
阻塞和非阻塞强调的是程序在等待调用结果（消息，返回值）时的状态
同步和异步强调的是消息通信机制
6.原生get 原生post
Get方式:
用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的header传送），也就是说，浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是，它会被客户端的浏览器缓存起来，那么，别人就可以从浏览器的历史记录中，读取到此客户的数据，比如帐号和密码等。因此，在某些情况下，get方法会带来严重的安全性问题。
Post方式:
当使用POST方式时，浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器，而不是作为URL地址的参数进行传递，使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。
总之，GET方式传送数据量小，处理效率高，安全性低，会被缓存，而POST方式传送数据量大，处理效率没有get方式高，数据不会被缓存，对于账号和密码等，比较安全。
7.地址url的组成
// 地址分享
// https://www.520mg.com/ajax/echo.php?name=mumu&age=18#top
// protocol: “http:” 协议
// host: “www.520mg.com” 域名
// pathname: “/ajax/echo.php” 地址
// port: 80 /443端口号
// search: “?name=mumu&age=18” 查询条件
// hash: “#top” 哈希值
8.浏览器的同源策略
// 当从本地网页 获取服务器资源(ajax) 要求被请求的地址 与当前地址要保持同源
// 协议一致 file http https
// 域名一致 520mg.com baidu.com
// 子域名一致 music.qq.com game.qq.com不同的子域名
// 端口号一致 127.0.0.1:8080 127.0.0.1:8888 不同端口号,
// http://127.0.0.1:8088/ajax/demo3-ajax-post.html
// "http://localhost/echo.php
域名不一致端口号不一致
9.理解跨域，跨域的方法
// 跨过浏览器的同源策略（跨域名）请求数据：在实际的工作的经常需要的功能
// 01 后端响应头cos跨域
Access-Control-Allow-Origin *
// php：header(“Access-Control-Allow-Origin: *”);
// 02 jsonp跨域
// 03 （开发阶段）代理跨域
ajax
1.名称：异步的javascript and xml
2.原理
1.通过 XMLHttpRequest 与服务器交换数据
2.服务数据通过json 或者 xml格式返回
3.浏览器端通过js+ccs渲染展示数据
3.Post
1.新建ajax对象
var xhr = new XMLHttpRequst()
2. 打开连接
xhr.open(“POST”,url,fasle)
3. 设置头信息(get省略)
xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);
4. 监听事件
xhr.onreadystatechange = function(){
if(xhr.readyState4&&xhr.status200){}
}
返回的数据 xhr.responseText
5.发送
xhr.send(“name=mumu&age=18”)
3.script 标签的src属性没有同源策略限制
// 浏览器的同源策略
// 当浏览器向服务器请求数据（ajax）需要被请求的地址与当前的网址同源
// 同源：协议一致http 子域名一致 pan.baidu new.baidu 域名一致 qq.com 端口号一致:8081
// https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E6%B2%B3%E5%8D%97&city=%E9%83%91%E5%B7%9E%E5%B8%82&callback=__jp1
// script 标签的src属性没有同源策略限制
// 已经后后端约定好 返回的数据格式是 方法名(数据) jp({data…}) 执行函数并传参
jquery中ajax
1.第一层 $.ajax()
2.第二层
$.get
1.回调函数
$.get(url,function(data,status,xhr){})
2. .done()
.fail()
.always()
3. .then()
.catch()
$.post(url,data,function(data,status,xhr))
3.第三层
$.getJSON()
$.getScript()
load()
url组成
1.https:www.520mg.com:443/ajax/echo.php?name=mumu&age=18#cate
2.https 协议
3.www子域名
4.520mg.com 域名
5.:443 端口号
6./ajax/echo.php 路径
7.?name=mumu&age=18 查询条件
8.#cate 哈希值
浏览器同源策略
1.当浏览器去访问服务器资源（ajax） 要求服务器的地址与浏览器同源
2.协议，域名，子域名，端口号要一致
跨域
1.绕过浏览器的同源策略，请求到数据
2.跨域方式
1. 服务器响应头信息跨域
Access-Control-Allow-Origin: *
2. jsonp跨域
3. 服务器代理（开发）
异步，同步
同步胡阻塞代码执行
http响应码
1xxx
开始
2xx
成功
3xx
重定向
4xxx
客户端请求地址错误
5xx
服务器错误
案例解析 要多读背敲，
案例一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>同步</title>
</head>
<body>
<script>
// console.log(100);
// alert(200);
// console.log(300);
console.log(100);
setTimeout(()=>{
console.log(200);
},2000)
console.log(300);
</script>
</body>
</html>
案例二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax get</title>
</head>
<body>
<button id="btn">发送</button>
<p id="content"></p>
<script>
btn.onclick = function(){ //按钮单击事件
// 01 创建xhr
var xhr = new XMLHttpRequest();
// 02 open打开连接
xhr.open("GET",'./be.txt',false);
// 03 监听readystate readyState 4准备状态完毕
// status 状态码200 响应成功
xhr.onreadystatechange=function(){
if(xhr.status==200&&xhr.readyState==4){
content.innerHTML= xhr.responseText;
// responseText 返回的文本
}
}
// 04 send 发送
xhr.send();
// 05 实现渲染
}
</script>
</body>
</html>
案例三
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax get</title>
</head>
<body>
<input type="text" id="name" placeholder="请输入用户名">
<input type="text" id="age" placeholder="请输入年龄">
<button id="btn">发送</button>
<p id="content"></p>
<script>
btn.onclick = function(){
// 01 创建xhr对象
var xhr = new XMLHttpRequest();
// 02 获取数据
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
// 03 建立连接
xhr.open("POST","http://localhost/echo.php",false);
// 04 监听
xhr.onreadystatechange = function(){
if(xhr.status==200&&xhr.readyState==4){
content.innerHTML = xhr.responseText;
}
}
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//设置编码形式
xhr.send(`name=${name}&age=${age}`);
}
// 浏览器同源策略
// 当从本地网页 获取服务器资源(ajax) 要求被请求的地址 与当前地址要保持同源
// 协议一致 file http https
// 域名一致 520mg.com baidu.com
// 子域名一致 music.qq.com game.qq.com 不同的子域名
// 端口号一致 127.0.0.1:8080 127.0.0.1:8888 不同端口号,
// http://127.0.0.1:8088/ajax/demo3-ajax-post.html
// "http://localhost/echo.php 域名不一致端口号不一致
// 跨域：
// 跨过浏览器的同源策略（跨域名）请求数据：在实际的工作的经常需要的功能
// 01 后端响应头cos跨域 Access-Control-Allow-Origin *
// php：header("Access-Control-Allow-Origin: *");
// 02 jsonp跨域
// 03 （开发阶段）代理跨域
// 地址分享
// https://www.520mg.com/ajax/echo.php?name=mumu&age=18#top
// protocol: "http:" 协议
// host: "www.520mg.com" 域名
// pathname: "/ajax/echo.php" 地址
// port: 80 /443端口号
// search: "?name=mumu&age=18" 查询条件
// hash: "#top" 哈希值
// onclick 单击事件
// Http Http
// Request 请求
// Element 元素 by通过 id
// ready准备 state状态 change 更改
// status 状态码 readyState响应状态
// innerHTML 内部HTML
// response 响应 Text 文本
// set 设置 Request 请求 Header头
// content-type 内容类型 application程序 form表单 url统一资源地址 encoded 编码
// send 发送
</script>
</body>
</html>
案例四
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>加载</button>
<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
// 目标，单击加载 去下载be.html内容放入在con 里面
$(function(){
$("button").click(function(){
$(".con").load("./be.html .content");
})
})
// jquery中的ajax 有三层
// 底层 $.ajax()
// 中 $.get() $.post()
// 上 $.getJSON() $.getScript load()
</script>
</body>
</html>
案例五
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>getScript</button>
<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
// 单击按钮 加载js 执行js
$(function(){
$("button").click(function(){
$.getScript("./script.js");
})
})
</script>
</body>
</html>
案例六
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>getJSON</button>
<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
// 单击按钮 加载be.json 放入到con
$(function(){
$("button").click(function(){
$.getJSON("./be.json",function(data,status,xhr){
console.log(data,status,xhr);
// data be.json 里面的数据
// status 状态 success 成功
// xhr 封装好的jquery xhr对象
// JSON.stringif 把js对象转换字符串
$(".con").text(JSON.stringify(data));
})
})
})
</script>
</body>
</html>
案例七
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>get</button>
<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
// 单击按钮 加载文本 be.txt
$(function(){
$("button").click(function(){
$.get("./be.txt")
.done(res=>{//成功
$(".con").text(res);
})
.fail(err=>{
console.log(err)
})
.always(xhr=>{
console.log("成功失败都执行",xhr);
})
})
})
// done 完成
// fail 失败
// always 总是
</script>
</body>
</html>
案例八
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>get</button>
<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
// 单击按钮 加载文本 be.txt
$(function(){
$("button").click(function(){
$.get("./b.txt")
.then(res=>{
$(".con").text(res)
})
.catch(err=>{
console.log(err)
})
})
})
// 任意jq的ajax 都可以有这几种表现形式
// 1. 回调函形式 $.get(url,function(data,stata,xhr){})
// 2. promise .done() .fail() .always()
// 3. promise .then().catch()
// done 完成
// fail 失败
// always 总是
</script>
</body>
</html>
案例九
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>get</button>
<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
// 单击按钮 加载文本 be.txt
$(function(){
$("button").click(function(){
$.get("./be.txt")
})
})
// done 完成
// fail 失败
// always 总是
</script>
</body>
</html>
案例十
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>get</button>
<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
// 单击按钮 加载文本 be.txt
$(function(){
$("button").click(function(){
$.get("./be.txt",function(data,status,xhr){
if(status=="success"){
$(".con").text(data);
}
})
})
})
</script>
</body>
</html>
案例十一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="name" placeholder="用户名"/>
<input type="text" id="age" placeholder="年纪"/>
<button>发送</button>
<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
//
$(function(){
$("button").click(function(){
// 目标：发送 age 和name到后端
var name = $("#name").val();
var age = $("#age").val();
// var data = {name,age};
$.post("https://www.520mg.com/ajax/echo.php",`name=${name}&age=${age}`)
.then(res=>{
$(".con").text(res);
})
.catch(err=>{
console.log(err);
})
})
})
</script>
</body>
</html>
案例十二jsonp原理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsonp原理</title>
</head>
<body>
<script>
// 浏览器的同源策略
// 当浏览器向服务器请求数据（ajax）需要被请求的地址与当前的网址同源
// 同源：协议一致http 子域名一致 pan.baidu new.baidu 域名一致 qq.com 端口号一致:8081
// https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E6%B2%B3%E5%8D%97&city=%E9%83%91%E5%B7%9E%E5%B8%82&callback=__jp1
// script 标签的src属性没有同源策略限制
// 已经后后端约定好 返回的数据格式是 方法名(数据) jp({data...}) 执行函数并传参
function jp(data){
console.log(data);
}
// jp({name:"mumu",age:18})
</script>
<script src="https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E6%B2%B3%E5%8D%97&city=%E9%83%91%E5%B7%9E%E5%B8%82&callback=jp"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsonp原理</title>
</head>
<body>
<script>
function abc (data){
alert(data);
}
// 127.0.0.1/weather.txt
// ajax 获取会有浏览器的同源策略的限制
// script 标签 src没有同源策略限制
</script>
<script src="http://127.0.0.1/weather.php?callback=abc"></script>
</body>
</html>
案例十四jsonp封装方法 一直写到会为止
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsonp方法丰富</title>
</head>
<body>
<script>
function jsonp(url,option={callback:"callback",jp:"jp"}){
return new Promise((resolve,reject)=>{
var callback = option.callback||'callback'; //传个后端get参数
var jp = option.jp||"jp"; //传给后端callback的值
url = url+`&${callback}=${jp}`;//url 添加 &callback=jp;
// 创建一个函数 函数名和jp 保持一致
window[jp]=data=>{ //------------定义一函数叫jp
resolve(data); //函数执行 返回值
}
// 动态的创建一个script标签
var script = document.createElement("script");
// 指定script的src值
script.src = url; // ----------执行jp方法 执行jp(data)
// 插入script标签到head里面
var head = document.querySelector("head");//获取head标签
head.append(script);//head 插入script标签
script.onload=function(){
head.removeChild(script);//当加载成功移除script标签
}
script.onerror = function(e){
head.removeChild(script);
reject(e);//返回错误
}
})
}
var urlB = "https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E6%B2%B3%E5%8D%97&city=%E9%83%91%E5%B7%9E%E5%B8%82";
var urlA = "https://apis.map.qq.com/ws/location/v1/ip?key=CAABZ-AVSAQ-RDR5L-GTBDJ-HLA4O-A5FDB&output=jsonp&_=1598407894753"
jsonp(urlA)
.then(res=>{
console.log(res)
return jsonp(urlB)
})
.then(res=>{
console.log(res);
})
.catch(err=>console.log(err));
// var urlC = "http://127.0.0.1/weather.php?";
// jsonp(urlC)
// .then(res=>{
// console.log(res);
// })
// 目标
/* jsonp(url)
.then(res=>{//res就是数据}) */
// 传入参数：url 地址 函数名称jp callback传入后端参数
// 返回：promise对象
// 复习 promise
/* var p = new Promise((resolve,reject)=>{
if(xxx){resolve(yyy)}
else{reject(zzz)}
})
p.then(res=>{})
.catch(err=>{}) */
</script>
</body>
</html>
1461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
