1xx：一般代表协议，刚开始 2xx：一般都是ok，成功 3xx：重定向 4xx：客户端问题 5xx：服务器问题 1.无刷新更新数据 2.异步与服务器通信 3.前端与后端负载均衡 4.基于规范被广泛支持 5.界面与应用分离 readyState 响应 jQuery中的Ajax总共是三层 最底层： 中间层： 最上层： 从上到下，需要的参数越多 第一种写法—回调函数 第二种写法—Promise写法 第三种写法—传统写法 Promise的写法 Promise写法 jsonp 方法都是GET方法 多使用正确的选择器 使用min.js 使用事件代理
Ajax—详解
HTTP
80443http请求方式中的8中请求方式
GET 获取信息页面—-常用POST 上传，修改，添加—-常用PUT 修改—-常用DELETE 删除HEAD 返回头信息CONNECT http/1.1协议中预留能够将链接改为管道方式的代理服务器OPTIONS 客户端查看服务器性能TRACE 回显服务器收到的请求，主要用于测试或诊断请求报文
响应
http请求/响应的步骤
客户端链接到web服务器
发送http请求
服务器接收请求返回HTTP响应
释放链接TCP链接
客户端浏览器解析HTML内容
http响应状态码
100：服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。101：服务器转换协议：服务器将遵从客户的请求转换到另外一种协议103：用于 PUT 或者 POST 请求恢复失败时的恢复请求建议。
200：OK201：请求被创建完成，同时新的资源被创建。202：供处理的请求已被接受，但是处理未完成。
302：临时重定向：www.mi.com—>www.m.mi.com304：未修改，文件已经存在不需要再发送307：与302状态码有相同的语义，且前后两次访问方式必须相同（GET，POST）
400：因为语法错误，服务器未能理解请求。401：未授权，权限问题403：禁止访问404：找不到请求的页面
500：服务器内部错误501：服务器不支持所请求的功能，或者服务器无法完成请求。503：服务器不可用504：超时GET与POST请求区别
GET
POST
HTTP主要特点
无连接
无状态
简单快速
灵活
支持B/S 与C/S
原生的—Ajax
什么是Ajax
Ajax的优势
Ajax最大的优点就是能在不刷新整个页面的情况下维持与服务器通信
使用异步的方式与服务器通信，不打断用户的操作
将一些后端的工作移到前端，减少服务器与带宽的负担
不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。
Ajax使得界面与应用分离，也就是数据与呈现分离Ajax的缺点
同步
console.log("abc"); alert("你好"); // 这个没有执行完毕，就是不按确定，就不会执行下一个代码 console.log("def"); 异步
// setTimeout可以实现异步 console.log("abc"); setTimeout(function() { // 因为使用异步 ，所以alert不会阻塞代码 alert("你好"); },2000); console.log("def"); Ajax的实现步骤
// 建立一个xhr对象 var xhr = new XMLHttpRequest();
xhr.open("方法",url地址,是否异步true/false)// 打开http链接的方法，地址，是否异步 xhr.open("POST","https://www.520mg.com/ajax/echo.php",true);
xhr.setRequestHeader("content-type" : "xxxxx")xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(模式);xhr.send("name=momo&age=30");
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() { // 建立一个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","https://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的方法中的名词解释
文件上传
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
$.ajax()$.get() , $.post()$.getScript() , $.getJSON() , .load()所有jQuery-Ajax方法，都支持三种写法
$.getJSON(url,function( response,status,xhr) { // url : 请求的地址 // function : 请求成功的回调函数 // response : 请求响应的数据 // status : 'success' // xhr : jquery的promise对象 })
$.getJSON(url) .then(res => {}) .catch(xhr => {})
$.getJSON(url) .done(res => {}) .fail(err => {}) .always(res => {}) 最上层
最上层—load()方法
elem.load("数据地址");<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()方法
$("button").click(function() { // .getScript("加载的js数据地址")； // 能够加载js文件 $.getScript("./test.js"); }) // test.js的内容 alert("nihao"); 最上层—$.getJSON()方法
// 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 写法 $.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( // 访问数据的地址 "https://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() {成功的回调}$.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() {失败的回调}});$.ajax({url : "地址",type : "POST",data : {数据}}).then( res => {成功的回调}).catch( err => {失败的回调});// post $.ajax({ url : "https://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方法
$.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 提供新的apiXMLHttpRequestfetch—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优化
var $a = $("a"); $a.text("xxxx");
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
