Ajax---详解
HTTPhttp请求方式中的8中请求方式请求报文响应http请求/响应的步骤客户端链接到web服务器发送http请求服务器接收请求返回HTTP响应释放链接TCP链接客户端浏览器解析HTML内容
http响应状态码GET与POST请求区别HTTP主要特点无连接无状态简单快速灵活支持B/S 与C/S
原生的---Ajax什么是AjaxAjax的优势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事件---通常用于加载提示
fetchfetch---GET方法fetch---POST方法
jQuery优化
HTTP
是客户端与服务端传输文本的一种协议http协议是无状态的http协议默认端口是：80https协议（加密传输）端口为：443
http请求方式中的8中请求方式
GET 获取信息页面----常用POST 上传，修改，添加----常用PUT 修改----常用DELETE 删除HEAD 返回头信息CONNECT http/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是单线程的，异步也是假异步，是靠回调完成的异步操作
console
.log("abc");
setTimeout(function() {
alert("你好");
},2000);
console
.log("def");
Ajax的实现步骤
建立一个xhr对象
var xhr
= new XMLHttpRequest();
打开http链接的方法，地址，是否异步
xhr.open("方法",url地址,是否异步true/false)
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">创建Ajax
</button>
</body>
<script type="text/javascript">
btn.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.open("GET","./be.txt",true);
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
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");
var xhr = new XMLHttpRequest();
xhr.open("POST","http://www.520mg.com/ajax/echo.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("name=momo&age=30");
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
pp.innerHTML = xhr.responseText;
console.log("B");
}
}
console.log("C");
}
</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() {
var xhr = new XMLHttpRequest();
xhr.open("POST","https://www.520mg.com/ajax/file.php",true);
var data = file.files[0];
var fdata = new FormData();
fdata.append("file",data);
xhr.upload.onprogress = function(e) {
console.log(e.loaded,e.total,Math.round(e.loaded / e.total * 100) + "%");
}
xhr.onload = function() {
console.log(xhr);
var res = JSON.parse(xhr.responseText);
if(res.error == 0) {
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
) {
})
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() {
$("#app").load("./beload.html");
$("#app").load("./beload.html .box");
})
})
最上层—$.getScript()方法
用来获取js的数据$.getScript()的使用方法
$("button").click(function() {
$
.getScript("./test.js");
})
alert("nihao");
最上层—$.getJSON()方法
用来获取json数据的有三种写法
{"name" : "momo","age" : 18}
第一种写法—回调函数
$("button").click(function() {
$
.getJSON("./be.json" function(res
,status
,xhr
) {
console
.log(res
,status
,xhr
);
});
}
第二种写法—Promise写法
$
.getJSON("./be.json")
.then( res
=> {console
.log("请求完成",res
)})
.catch( err
=> {console
.log(err
)});
第三种写法—传统写法
$
.getJSON("./be.json")
.done( res
=> {
console
.log("请求完成",res
);
})
.fail( xhr
=> {
console
.log(xhr
,"失败");
})
.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() {
$.get("be.txt")
.then( res => {
console.log(res);
$("#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);
}).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
);
},
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 => {失败的回调});
$
.ajax({
url
: "http://www.520mg.com/ajax/echo.php",
type
: "POST",
data
: {name
: "momo",age
: 20},
beforSend
: function(org
) {
console
.log("Ajax开始",org
);
},
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=河南省&city=郑州市",
dataType : "jsonp",
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
);
},
beforSend
: function(org
) {
console
.log("Ajax开始",org
);
},
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")
.then(res
=> res
.text())
.then( res
=> {
console
.log(res
);
})
fetch("./be.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("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事件冒泡
