Ajax---详解
Ajax---详解
- HTTP
- http请求方式中的8中请求方式
- 请求报文
- 响应
- http请求/响应的步骤
- 客户端链接到web服务器
- 发送http请求
- 服务器接收请求返回HTTP响应
- 释放链接TCP链接
- 客户端浏览器解析HTML内容
- http响应状态码
- GET与POST请求区别
- HTTP主要特点
- 无连接
- 无状态
- 简单快速
- 灵活
- 支持B/S 与C/S
- 原生的---Ajax
- 什么是Ajax
- Ajax的优势
- Ajax的缺点
- 同步
- 异步
- Ajax的实现步骤
- Ajax---GET方法案例
- Ajax---POST方法案例
- Ajax的方法中的名词解释
- 文件上传
- jQuery中的---Ajax
- 所有jQuery-Ajax方法，都支持三种写法
- 最上层
- 最上层---load()方法
- 最上层---$.getScript()方法
- 最上层---$.getJSON()方法
- 中间层
- 中间层---`$.get()`
- 中间层---`$.post()`
- 最底层
- 最底层---$.ajax()---GET方法
- 最底层---$.ajax()---POST方法
- 最底层---$.ajax()---jsonp方法
- jQuery中Ajax中的响应提示
- 局部Ajax事件---通常用于加载提示
- 全局Ajax事件---通常用于加载提示
- fetch
- fetch---GET方法
- fetch---POST方法
- jQuery优化
HTTP
- 是客户端与服务端传输文本的一种协议
- http协议是无状态的
- http协议默认端口是：
80 - https协议（加密传输）端口为：
443
http请求方式中的8中请求方式
GET获取信息页面----常用POST上传，修改，添加----常用PUT修改----常用DELETE删除HEAD返回头信息CONNECThttp/1.1协议中预留能够将链接改为管道方式的代理服务器OPTIONS客户端查看服务器性能TRACE回显服务器收到的请求，主要用于测试或诊断
请求报文
- 方法
- URL
- 协议版本
- 请求头部
- 请求数据
响应
- 协议版本
- 成功或者失败代码
- 服务器信息
- 响应头部
- 响应数据
http请求/响应的步骤
- 客户端链接到web服务器–>
- 发送http请求—>
- 服务器接收请求并返回http响应—>
- 释放链接TCP链接—>
- 客户端浏览器解析HTML内容
客户端链接到web服务器
- 一个HTTP客户端，通常是浏览器，与Web服务器的HTTP端口(默认为80)建立-个TCP套接字连接。 例伽，htp:/ww baidu.com
发送http请求
- 通过TCP套接字，客户端向Web服务器发送一个文本的请求报文， 一个情求报文由请求行、请求头部、空行和清求数据4部分组成。
服务器接收请求返回HTTP响应
- Web服务器解析请求，定位请求资源，服务器将资源复本写到TCP套接字，由客户端读取。-个响应由状态行、响应头部，空行和响应数据4部分组成，
释放链接TCP链接
- 若connection模式为dlose,则服务器主动关闭TCP连接，客户端被动关闭连接，释放TCP连接;若connection 模式为kepalive,则该连接会保持一段时间，在该时间内可以继续接收请求
客户端浏览器解析HTML内容
- 客户端对览器首先解析状态行，查看表明请求是否成功的状态代码。然后解析每一个响应头，响应头告知以下为若干字节的HTML文档和文档的字符集。
- 客户端浏览器读取响应数据HTML，根据HTML的语法对其进行格式化,并在浏览器安口中显示。
http响应状态码
-
1xx：一般代表协议，刚开始
100：服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。101：服务器转换协议：服务器将遵从客户的请求转换到另外一种协议103：用于 PUT 或者 POST 请求恢复失败时的恢复请求建议。
-
2xx：一般都是ok，成功
200：OK201：请求被创建完成，同时新的资源被创建。202：供处理的请求已被接受，但是处理未完成。
-
3xx：重定向
302：临时重定向：www.mi.com—>www.m.mi.com304：未修改，文件已经存在不需要再发送307：与302状态码有相同的语义，且前后两次访问方式必须相同（GET，POST）
-
4xx：客户端问题
400：因为语法错误，服务器未能理解请求。401：未授权，权限问题403：禁止访问404：找不到请求的页面
-
5xx：服务器问题
500：服务器内部错误501：服务器不支持所请求的功能，或者服务器无法完成请求。503：服务器不可用504：超时
GET与POST请求区别
-
GET- 可以收藏地址
- 可以缓存
- 大小只有2048
- 参数再浏览器地址显示，留历史记录
-
POST- 不可以收藏
- 不缓存
- 大小无限制
- 参数不会再地址栏不显示，不留历史记录
HTTP主要特点
无连接
无状态
- 没有历史记录功能，处理完就断开，客户端与服务端链接
简单快速
- GET POST header请求
灵活
- 不同content-type返回上传不同数据类型
支持B/S 与C/S
- B/S （Browser/Server）（浏览器/服务器）
- C/S （Client/Server） （用户/服务器
原生的—Ajax
什么是Ajax
- Asynchronous Javascript And XML (以前交互是使用xml,现在都是json)
- ajax 异步的xml 和 JavaScript
- 是一种综合技术，利用XMLHTTPRequest 和后端进行数据交换
- 通过js 动态的渲染页面,实现页面的而局部渲染加载数据(异步更新)
Ajax的优势
-
1.无刷新更新数据
Ajax最大的优点就是能在不刷新整个页面的情况下维持与服务器通信 -
2.异步与服务器通信
使用异步的方式与服务器通信，不打断用户的操作 -
3.前端与后端负载均衡
将一些后端的工作移到前端，减少服务器与带宽的负担 -
4.基于规范被广泛支持
不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。 -
5.界面与应用分离
Ajax使得界面与应用分离，也就是数据与呈现分离
Ajax的缺点
- 破坏了前进后退
- 对搜索引擎不好
同步
- 同步，代码按顺序执行，从上至下执行
- 上一行代码没有执行完毕，下面的不会执行
- 会阻塞代码
console.log("abc");
alert("你好"); // 这个没有执行完毕，就是不按确定，就不会执行下一个代码
console.log("def");
异步
- 异步 ,可以跳过代码的执行顺序
- JavaScript是单线程的，异步也是假异步，是靠回调完成的异步操作
// setTimeout可以实现异步
console.log("abc");
setTimeout(function() {
// 因为使用异步 ，所以alert不会阻塞代码
alert("你好");
},2000);
console.log("def");
Ajax的实现步骤
- 建立一个xhr对象
// 建立一个xhr对象
var xhr = new XMLHttpRequest();
- 打开http链接的方法，地址，是否异步
xhr.open("方法",url地址,是否异步true/false)
// 打开http链接的方法，地址，是否异步
xhr.open("POST","http://www.520mg.com/ajax/echo.php",true);
- 如果是POST方式需要设置请求头信息
xhr.setRequestHeader("content-type" : "xxxxx")
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
- 发送http请求数据
xhr.send(模式);
xhr.send("name=momo&age=30");
- 监听xhr的变化
xhr.onreadystatechange = function() {}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
// 服务响应请求信息
console.log(xhr.responseText);
}
}
Ajax—GET方法案例
<body>
<button id="btn">创建Ajaxbutton>
body>
<script type="text/javascript">
btn.onclick = function() {
// 建立一个xhr对象
var xhr = new XMLHttpRequest();
// 打开http链接的方法，地址，是否异步
xhr.open("GET","./be.txt",true);
// 发送出去
xhr.send();
// 监听xhr的变化
xhr.onreadystatechange = function() {
// 如果xhr的状态是第四个状态，响应码是200
if(xhr.readyState == 4 && xhr.status == 200) {
// 输出Ajax响应的文档内容
console.log(xhr.responseText,xhr);
}
}
}
script>
Ajax—POST方法案例
<body>
<button id="btn">加载button>
<p id="pp">p>
body>
<script type="text/javascript">
btn.onclick = function() {
// 实验异步
console.log("A");
// 创建 xhr 实例对象
var xhr = new XMLHttpRequest();
// 打开http链接的方法，地址，是否异步
xhr.open("POST","http://www.520mg.com/ajax/echo.php",true);
// 设置请求头信息
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 发送http请求数据
xhr.send("name=momo&age=30");
// 监听xhr的变化
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
// 服务响应请求信息
console.log(xhr.responseText);
// 插入pp中
pp.innerHTML = xhr.responseText;
// cons
console.log("B");
}
}
// 异步
console.log("C");
}
// 结果
// A，C，B
script>
Ajax的方法中的名词解释
-
readyState
- 0,‘未初始化…’
- 1,‘请求参数已准备，尚未发送请求…’
- 2,‘已经发送请求,尚未接收响应’
- 3,‘正在接受部分响应…’
- 4,‘响应全部接受完毕’
-
响应
- status 响应码 200 成功
- statusText 响应状态 ok 成功
- responseText 响应文本形式
文件上传
FormData()创建表单数据实例- 监听上传进度
xhr.upload.onprogress = function() {} - 监听加载事件
xhr.onload = function() {}
<body>
<input type="file" id="file" >
<button id="btn">文件上传button>
body>
<script type="text/javascript">
btn.onclick = function() {
// 建立xhr对象
var xhr = new XMLHttpRequest();
// 打开http链接，方式，地址，是否异步
xhr.open("POST","https://www.520mg.com/ajax/file.php",true);
// 获取文件
var data = file.files[0];
// 创建formdata实例
var fdata = new FormData();
// 将文件添加到fdata
fdata.append("file",data);
// 监听xhr的上传事件
xhr.upload.onprogress = function(e) {
// 监听上传文件的进度
console.log(e.loaded,e.total,Math.round(e.loaded / e.total * 100) + "%");
}
// 监听加载事件
xhr.onload = function() {
console.log(xhr);
// 把json字符串转换为JavaScript对象
var res = JSON.parse(xhr.responseText);
if(res.error == 0) {
// 创建一个图片，设置src 与宽
var img = document.createElement("img");
img.src = "https://www.520mg.com" + res.pic;
img.width = 100;
// 插入页面
document.body.append(img);
}
}
// 发送
xhr.send(fdata);
}
script>
jQuery中的—Ajax
-
jQuery中的Ajax总共是三层
-
最底层：
$.ajax() -
中间层：
$.get(),$.post() -
最上层：
$.getScript(),$.getJSON(),.load() -
从上到下，需要的参数越多
所有jQuery-Ajax方法，都支持三种写法
-
- 回调函数写法
$.getJSON(url,function( response,status,xhr) {
// url : 请求的地址
// function : 请求成功的回调函数
// response : 请求响应的数据
// status : 'success'
// xhr : jquery的promise对象
})
-
- Promise写法
$.getJSON(url)
.then(res => {})
.catch(xhr => {})
-
- 传统
$.getJSON(url)
.done(res => {})
.fail(err => {})
.always(res => {})
最上层
最上层—load()方法
elem.load("数据地址");- 加载数据内容到elem元素
<body>
<div class="box">
<h1 >来自HTML的问候h1>
<div>你好尖括号div>
div>
<span style="color: red;">我是红色span>
body>
$(function() {
$("button").click(function() {
// .load("加载的数据地址")；
$("#app").load("./beload.html");
// .load("加载的数据地址 限制显示的部分内容，类名")；
$("#app").load("./beload.html .box");
// 只让 beload.html文件中的 box中的内容显示
})
})
最上层—$.getScript()方法
- 用来获取js的数据
- $.getScript()的使用方法
$("button").click(function() {
// .getScript("加载的js数据地址")；
// 能够加载js文件
$.getScript("./test.js");
})
// test.js的内容
alert("nihao");
最上层—$.getJSON()方法
- 用来获取json数据的
- 有三种写法
// be.json
{"name" : "momo","age" : 18}
第一种写法—回调函数
$("button").click(function() {
// .getJSON("加载的json数据地址")；
// 能够加载js文件
$.getJSON("./be.json" function(res,status,xhr) {
console.log(res,status,xhr);
});
}
第二种写法—Promise写法
// promise 写法
$.getJSON("./be.json")
.then( res => {console.log("请求完成",res)})
.catch( err => {console.log(err)});
第三种写法—传统写法
// done写法
$.getJSON("./be.json")
.done( res => {
console.log("请求完成",res);
})
// fail写法
.fail( xhr => {
console.log(xhr,"失败");
})
// always写法
.always( res => {
console.log(res,"一直");
})
中间层
中间层—$.get()
$.get("访问数据的地址").then( res => {成功的回调}).catch( err => {失败的回调})
<body>
<button id="btn">加载button>
<p id="pp">p>
body>
<script type="text/javascript">
$(function() {
// 点击按钮事件
$("button").click(function() {
// 执行 jquery中的Ajax方法中的$.get()方法
$.get("be.txt")
// 成功的回调
.then( res => {
console.log(res);
// 将获取的内容加载到p标签中
$("#pp").text(res);
// 失败的回调
}).catch( err => {
console.log(err);
})
})
})
script>
中间层—$.post()
$.post("访问数据的地址",传递的数据参数,).then( res => {成功的回调}).catch( err => {失败的回调})
<body>
<button id="btn">加载button>
<p id="pp">p>
body>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$.post(
// 访问数据的地址
"http://www.520mg.com/ajax/echo.php",
// 传递的数据，
{name : "momo",age : 20}
// 成功的回调
).then( res => {
console.log(res);
// 失败的回调
}).catch( err => {
console.log(err);
// jQuery中的一直都会执行的回调
}).always( () => {
console.log("总是执行");
})
})
})
script>
最底层
最底层—$.ajax()—GET方法
-
$.ajax({url : "地址",type : "GET",success() {成功的回调},fail() {失败的回调}}); -
success : function() {成功的回调} -
Promise的写法
-
$.ajax({url : "地址",type : "GET"}).then( res => {成功的回调}).catch( err => {失败的回调});
$.ajax({
// 获取数据的地址
url : './be.json',
// 请求的方式
type : "GET",
// 成功的回调
success : function(res) {
console.log(res);
},
// 失败的回调
fail : function(res) {
console.log(res);
},
// 请求前的提示
beforSend : function(org) {
console.log("Ajax开始",org);
},
// Ajax请求成功后的提示
complete : function(org) {
console.log("ajax结束",org);
}
})
最底层—$.ajax()—POST方法
-
$.ajax({url : "地址",type : "POST",success() {成功的回调},fail() {失败的回调}}); -
Promise写法
-
$.ajax({url : "地址",type : "POST",data : {数据}}).then( res => {成功的回调}).catch( err => {失败的回调});
// post
$.ajax({
url : "http://www.520mg.com/ajax/echo.php",
type : "POST",
data : {name : "momo",age : 20},
// success : function(res) {
// console.log(res);
// }
//// 请求前的提示
beforSend : function(org) {
console.log("Ajax开始",org);
},
// Ajax请求成功后的提示
complete : function(org) {
console.log("ajax结束",org);
}
}).then( res => {
console.log(res);
}).catch( err => {
console.log(err);
})
最底层—$.ajax()—jsonp方法
-
jsonp 方法都是GET方法
-
$.ajax({url : "地址",dataType : "jsonp",jsonp : "后端约定的返回数据的回调方法名")
<body>
<button id="btn">加载button>
<p id="pp">p>
body>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$.ajax({
// 地址
url : "https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E6%B2%B3%E5%8D%97%E7%9C%81&city=%E9%83%91%E5%B7%9E%E5%B8%82",
// 数据类型
dataType : "jsonp",
// 后端约定的返回的数据jsonp的
// 默认为：callback,可以不用写
jsonp : "callback"
}).then( res => {
console.log(res);
}).catch( err => {
console.log(err);
})
})
})
script>
jQuery中Ajax中的响应提示
局部Ajax事件—通常用于加载提示
beforeSend : function(org) {提示信息} ===> beforeSend(org) {提示信息}Ajax响应之前的事件complete : function(org) {提示信息} ===> complete(org) {提示信息}Ajax响应完成之后的事件
$.ajax({
url : './be.json',
type : "GET",
// 成功的回调
success : function(res) {
console.log(res);
},
// 失败的回调
fail : function(res) {
console.log(res);
},
// Ajax请求前的事件
beforSend : function(org) {
console.log("Ajax开始",org);
},
// Ajax请求后的事件
complete : function(org) {
console.log("ajax结束",org);
}
})
全局Ajax事件—通常用于加载提示
$(document).ajaxStart(function(e) {事件逻辑})Ajax响应之前的事件$(document).ajaxStop(function(e) {事件逻辑})Ajax响应完成之后的事件
$(document).ajaxStart(function(e) {
console.log("全局Ajax开始");
})
$(document).ajaxStop(function(e) {
console.log("全局Ajax结束");
})
fetch
fetch是javascript提供新的api- 通过http管道方式，访问服务器数据，代替
XMLHttpRequest
fetch—GET方法
fetch("地址").then( res => res.转换的数据类型()).then( res => {成功回调}).catch( err => {失败回调})
fetch("./be.txt")
// 设置 返回数据的返回数据是 text类型
// 如果只写一个.then的话，显示的是数据流，二进制的
// 返回 文本数据
.then(res => res.text())
.then( res => {
console.log(res);
})
// 返回json数据
fetch("./be.json")
// 设置 返回数据的返回数据是 json类型
.then( res => res.json())
.then( res => {
console.log(res);
})
fetch—POST方法
fetch(url,{method : "POST",body : "数据",headers : {"content-type" : "xxx"}}).then( res => res.接收的转换数据类型()).then( res => {成功回调}).catch( err => {})
// fetch POST 请求
fetch("https://www.520mg.com/ajax/echo.php", {
method : "POST",
body : "name=momo&age=18",
headers : {
"content-type" : "application/x-www-form-urlencoded"
}
})
.then( res => res.text())
.then( res => {
console.log(res);
})
.catch( err => {
console.log(err);
})
jQuery优化
- 缓存dom，就是使用变量存储dom对象，
var $a = $("a");
$a.text("xxxx");
-
多使用正确的选择器
-
- 原生 # id tag class
-
- 子选择 find,children
-
-
使用min.js
-
使用事件代理
- $(“ul”).on(“click”,“li”,function(){})
- 事件target
- 事件冒泡