本文深入解析了网络请求的基础知识，涵盖HTTP、HTTPS协议的工作原理，GET、POST等请求方法的区别，响应状态码的意义，以及如何使用原生JS、Fetch、jQuery、Axios发起请求。同时，介绍了同步与异步请求的区别，非模板引擎与artTemplate模板引擎的使用方法，适合初学者全面掌握网络请求技术。
1.网址的组成部分
http 超文本传输协议 (HTML+TCP)
https 超文本传输安全协议(HTML+SSL)
ftp 文本传输 协议
主机:可以是网址,也可以使本地ip地址,也可以使localhost.127.0.0.1本地地址
路径:就是要访问哪个文件
2.http协议内容
网络访问分为: 请求和响应
发送请求包括: 请求行 请求头部 请求数据
请求行有三个部分：请求方法、请求地址和协议版本
HTTP/1.1 定义的请求方法有8种：get、post、put、delete、patch、head、options、trace。
最常的两种GET和POST，如果是RESTful接口的话一般会用到get、post、delete、put。
请求头:
请求数据: get请求数据再url参数中,post请求数据在网页调试器的network的heaher中
3.
响应数据包括: 状态行 响应头部 响应正文
状态行:由3部分组成，分别为：协议版本，状态码，状态码描述。
状态代码为3位数字。
1xx：指示信息--表示请求已接收，继续处理。
2xx：成功--表示请求已被成功接收、理解、接受。
3xx：重定向--要完成请求必须进行更进一步的操作。
4xx：客户端错误--请求有语法错误或请求无法实现。
5xx：服务器端错误--服务器未能实现合法的请求。
响应头部: 看上面的图
响应正文: 看调试器中的header中的数据
网络请求分为: 请求和响应
请求分为3部分: 请求行(基本信息) 请求头(浏览器信息) 请求的数据
响应分为3部分: 响应行(基本信息) 响应头(服务器信息) 响应数据
[前端:后台提供数据,前台使用ajax获取并解析,数据的传输格式,就是json:基本数据 数组 对象]
{name:'张三'}
4.api文档阅读 postman接口测试工具 跨域问题
5.原生js请求数据 创建xhr对象 ;开始连接;发送请求;等待返回结果
一.原生js实现get请求
//1.创建xhr对象
var xhr = new XMLHttpRequest();
var url = 'http://127.0.0.1:4000/movie';
//2.开始连接.get请求方式, url表示请求地址, true表示异步,false表示同步
xhr.open('get', url, true);
//3.发送请求
xhr.send();+
//4.等待返回结果
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
//有时候为了考虑兼容性,需要判断游览器是否支持XMLHttpRequest,然后xhr写两遍
var xhr;
if (window.XMLHttpRequest) {
//大多数浏览器
xhr = new XMLHttpRequest();
} else {
//古董级浏览器
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
二.原生js请求post数据
//post请求数据 :多了两个步骤 :设置请求头类型,发送时带上post请求
//post请求数据: 多了两个步骤; 设置请求头类型, 发送时带上post数据
//1.创建xhr对象
var xhr = new XMLHttpRequest();
var url = 'ht,00/login';
//2.开始连接.将请求类型修改为post
xhr.open('post', url, true);
//设置请求类型
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//3.发送请求,添加请求数据
xhr.send("username=张三丰&password=123456");
//4.等待返回结果
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
6.fetch介绍
fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
fetch(url,options);
fetch(参数).then(处理响应)
.then(获得数据)
.catch(处理错误)
一.fetch实现get请求
var url = 'http://127.0.0.1:4000/movie';
fetch(url).then((res)=>{
//得到相应流,并且转换为json
return res.json();
}).then((data)=>{
//得到数据
console.log(data);
})
二.fetch实现post请求
var url = 'http://127.0.0.1:4000/login';
var options = {
method:'POST',
headers:{
'Content-Type': 'application/x-www-form-urlencoded'
},
body:"name=刘德华&age=18"
}
fetch(url,options).then((res)=>{
//得到相应流,并且转换为json
return res.json();
}).then((data)=>{
//得到数据
console.log(data);
})
7.jquery的ajax请求
//注意: 使用jquery的ajax需要先引入jquery文件
//JQuery简化了数据请求的代码,使用post请求时,不用设置数据类型为'application/x-www-form-urlencoded'
$.ajax({
type: 'POST', //请求类型
url: url, //请求地址
data: data, //请求数据,get没有,post需要写
dataType: dataType, //请求类型:json和text比较常用
success: function () {}, //成功的回调
error: function () {} //失败的回调
});
//常见的3个方法:$.ajax() $.get() $.post()
//参考文档: http://jquery.cuishifeng.cn/
一.jquery实现get请求
let url = "http://127.0.0.1:4000/movie";
$.ajax({
url:url,
success:function(data){
console.log(data);
}
});
//get请求简写
$.get(url,function(data){
console.log(data);
})
二.jquery实现post请求
let url = "http://127.0.0.1:4000/login";
$.ajax({
url:url,
method:'POST',
data:{
name:'张三',
age:18
},
success:function(data){
console.log(data);
},
});
//post请求简写方式
$.post(url,{name:'张三',age:28},function(data){
console.log(data);
})
缺点:JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理
8.axios请求数据
一.axios实现get请求
//get请求:
//注意: axios默认会返回一个响应对象,该对象中的data属性才是想要的数据.
//axios发送get请求
let url = "http://127.0.0.1:4000/movie";
axios.get(url).then(res => {
// console.log(res);
// console.log(res.data);
});
二.axios实现post请求
//使用post请求注意:
//1.需要设置请求类型为表单格式数据,后台的post处理都是这样的.,axios默认提交数据格式为json无法被后台解析
//2.需要将数据传输格式转换为类似于表单的格式: name=刘德华&age=18这种,以后用一个叫qs库
let url = "http://127.0.0.1:4000/login";
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.post(url, 'name=刘德华&age=18').then(res => {
console.log(res.data);
})
//重中之重: 经常导致后台无法接收到数据.
//后台如果没有配置跨域: 前端经常是无法获取数据的.
参考文档: https://www.cnblogs.com/yiyi17/p/9409249.html
//注意: 使用post请求要做两件事: 1.将请求是数据格式设置为form格式 2. 将请求的数据转换成&(URLSearchParams,qs)
9.同步和异步
ajax请求同步，异步之间的区别
ajax默认为异步, 表示请求数据时,后面代码继续执行
ajax同步表示请求数据时,页面出现假死状态,后面代码等待.
async:false,
10.非模板引擎渲染
1).解析一个数据
结构:
<button>显示数据</button>
<div class="box">
<!-- <div class="one">
<div class="title">粤港澳大桥</div>
<div class="year">拍摄年份:2019 <span> 导演:张三</span></div>
<div class="daoyan">
<img src="abc.jpg" alt="">
</div>
<h3>影片介绍图</h3>
<img src="abc.jpg" alt="">
</div> -->
</div>
$('button').click(function() {
let movie = getMovie();
console.log("信息的标题" + movie.title);
let showData = ` <div class="one"> //注意非模板字符串解析一个数据
<div class="title">${movie.subjects[0].title}</div>
<div class="year">
<span>拍摄年份:${movie.subjects[0].year}</span>
<span>导演:${movie.subjects[0].directors[0].name}</span>
</div>
<h3>影片介绍图</h3>
<img src="${movie.subjects[0].images.small}" alt="">
</div>`;
$('.box').append(showData);//被选元素结尾(仍在内部) 插上指定内容
})
function getMovie(){
let url = "http:127.0.0.1:4000/movie";
let movie = null;
$.ajax({
url: url,
method: 'get',
dataType: 'json',
async:false,
success: function(data) {
console.log(data)
movie = data;
},
error: function(err) {
console.log(err);
}
});
return movie;
}
2)解析多个数据
$('button').click(function() {
let showData = '';
let movies = getMovies();
console.log("信息的标题" + movies.title);
for (var i = 0; i < movies.total; i++) { //循环+数据累加 (一次性可以解析多个数据)
//数据累加
showData += `<div class="one">
<div class="title">${movies.subjects[i].title}</div>
<div class="year">
<span>拍摄年份:${movies.subjects[i].year}</span>
<span>导演:${movies.subjects[i].directors[0].name}</span>
</div>
<h3>影片介绍图</h3>
<img src="${movies.subjects[i].images.small}" alt="">
</div>`;
}
$('.box').append(showData);
})
function getMovies(){
//多个 电影数据
let url = "http:127.0.0.1:4000/movies";
let movies = null;
$.ajax({
url: url,
method: 'get',
dataType: 'json',
async:false,
success: function(data) {
console.log(data)
movies = data;
},
error: function(err) {
console.log(err);
}
});
return movies;
}
11.模板引擎渲染(现在项目中用的比较多)
artTemplate模板引擎就是提供了html中的,文件分片, 变量,条件判断,for循环,等功能,方便数据渲染
前端的模板引擎: artTemplate ejs pug(jade)
例子:
1.artTemplate使用步骤
一.引入art-template.js文件
<script src='./template-web.js></script?
二.创建script,并给script取一个id名,类型为text/html,使用双大括号解析
<!--创建模板,,中间是模板数据,可以使用语法>
<script id="one" type="text/html"></script>
三.在js中定义数据,并且解析模板数据
data是个对象
let html=template('one',data)
四.将解析完的模板内容,添加到页面中
document.getElementId('.box').innerHTML=html;
简单运用:
<body>
<div class="box"></div>
</body>
<script src="./template-web.js"></script>
<script src="./jquery-3.4.0.js"></script>
<!-- 创建模板 -->
<script id="one" type="text/html">
<!-- 中间是模板数据,可以使用at的语法 -->
<h1>{{title}}</h1>
</script>
<script>
$(function(){
//解析模板,并添加到页面的盒子中
let html = template('one',{title:'文章标题'})
$('.box').html(html);
})
</script>
语法:
1)变量语法
{{value}} 可以理解为双大括号就是js的区域,可以直接使用变量,数组,对象或者运算符
2)if条件语法
<!--条件判断:分别是单向,双向,多向>
{{if value}}...{{/if}}
{{if v1}}.........{{else}}.......{{/if}}
{{if val}}.........{{else if v2}}.....{{/if}}
{{if username}}
<h1>欢迎{{username}}</h1>
{{else}}
<h1>请登录</h1>
{{/if}}
// let html = template('one',{username:'张三'})
let html = template('one')
$('.box').html(html);
3).for循环语法
{{each target}}
{{$index}} {{$value}}
{{/each}}
//解析对象和数组
<script id="one" type="text/html">
<!-- 中间是模板数据,可以使用at的语法 -->
{{each users}}
{{$index}} {{$value}} //这个是固定的
{{/each}}
</script>
<script>
$(function(){
//注意：一定要将数据包裹在对象中,才能直接使用
// var user={
// name:'张三',
// age:18,
// sex:'男'
// }
var user=['张三',18,'男']
let html = template('one',{users:user})
$('.box').html(html);
})
</script>
4).模板引入语法
<!-- 通过include可以引入子模板 -->
<!-- 创建模板 -->
<script id="one" type="text/html">
<!-- 中间是模板数据,可以使用at的语法 -->
{{include 'two' 可以继续传入一个对象}}
</script>
<script id="two" type="text/html">
<!-- 中间是模板数据,可以使用at的语法 -->
<h1>我是模板2</h1>
</script>
<script>
$(function(){
let html = template('one')
$('.box').html(html);
})
</script>
5).读取外部模板文件
$(function(){
var obj={
title:'读取文件的模板111'
}
//该方式得用服务器的方式打开,不然,无法读取到文件
var html=$.get('one.html',function (data) {
//读取文件
var render = template.compile(data);
//渲染数据
var str = render(obj);
$('.box').html(str);
})
})
6).模板引擎解析数据(解析一个和解析多个数据)
使用ajax+art解析一个电影
使用ajax+art解析多个电影
使用axios+art解析一个电影
使用axios+art解析多个电电影
<body>
<button>获得数据</button>
<div class="box">
</div>
</body>
</html>
<script src="./jquery-3.4.0.js"></script>
<script src="./template-web.js"></script>
<script id="one" type="text/html">
<div class="one">
<div class="title">{{movie.subjects[0].title}}</div>
<div class="year">
<span>拍摄年份: {{movie.subjects[0].year}} </span>
<span>导演:{{movie.subjects[0].directors[0].name}}</span>
</div>
<h3>影片介绍图</h3>
<img src="{{movie.subjects[0].images.small}}" alt="">
</div>
</script>
<script>
$(function(){
$('button').click(function(){
let url = "http://127.0.0.1:4000/movie";
let result = null;
//获得数据
$.ajax({
url:url,
dataType:'json',
method:'GET',
async:false,
success:function(data){
console.log(data);
result = data;
}
});
let html = template('one',{movie:result});
$('.box').html(html);
})
})
</script>
解析多个数据
{{each movies as movie i}}
<div class="one">
<div class="title">{{movie.title}}</div>
<div class="year">
<span>拍摄年份: {{movie.year}} </span>
<span>导演:{{movie.directors[0].name}}</span>
</div>
<h3>影片介绍图</h3>
<img src="{{movie.images.small}}" alt="">
</div>
{{/each}}
//{movies:result.subjects}
扫一扫
2705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
