矿山建设工程公司网站,wordpress能采集,wordpress如何做云盘搜索,wordpress 双 切换学什么Ajax基础JSON跨域XHR对象Ajax进阶Ajax应用Ajax扩展Ajax基础初识 AjaxAjax的基本用法GET请求POST请求JSON初识JSONJSON的3种形式JSON的常用方法跨域初识跨域CORS跨域资源共享JSONPXHR 对象XHR的属性XHR的方法XHR的事件Ajax进阶FormData封装Ajax使用Promise改造封装好的Aja…学什么Ajax基础JSON跨域XHR对象Ajax进阶Ajax应用Ajax扩展Ajax基础初识 AjaxAjax的基本用法GET请求POST请求JSON初识JSONJSON的3种形式JSON的常用方法跨域初识跨域CORS跨域资源共享JSONPXHR 对象XHR的属性XHR的方法XHR的事件Ajax进阶FormData封装Ajax使用Promise改造封装好的AjaxAjax应用搜索提示二级菜单多个Ajax请求的并发执行Ajax扩展axiosFetch1.初识ajaxAjax是什么搭建Ajax开发环境1.Ajax 是什么Ajax 是 Asynchronous JavaScript and XML异步 JavaScript 和 XML的简写Ajax 中的异步可以异步地向服务器发送请求在等待响应的过程中不会阻塞当前页面浏览器可以做自己的事情。直到成功获取响应后浏览器才开始处理响应数据XML可扩展标记语言是前后端数据通信时传输数据的一种格式xml标记语言
personname张三/nameage18/agesex男/sex
/person
personname李四/nameage28/agesex女/sex
/personXML 现在已经不怎么用了现在比较常用的是 JSONAjax 其实就是浏览器与服务器之间的一种异步通信方式使用 Ajax 可以在不重新加载整个页面的情况下对页面的某部分进行更新比如① B站注册检测② B站搜索提示2.搭建 Ajax 开发环境Ajax 需要服务器环境非服务器环境下很多浏览器无法正常使用 Ajaxwindows phpStudyMac MAMP2.Ajax的基本用法XMLHttpRequestAjax的使用步骤使用Ajax完成前后端通信1.XMLHttpRequestconsole.log(Ajax); ×
// Ajax 想要实现浏览器与服务器之间的异步通信需要依靠 XMLHttpRequest它是一个构造函数
// 不论是 XMLHttpRequest还是 Ajax都没有和具体的某种数据格式绑定2.Ajax 的使用步骤2.1.创建 xhr 对象const xhr new XMLHttpRequest();2.2.监听事件处理响应当获取到响应后会触发 xhr 对象的 readystatechange 事件可以在该事件中对响应进行处理xhr.addEventListener(readystatechange, () {}, fasle);
//readystatechange 事件也可以配合 addEventListener 使用不过要注意IE6~8 不支持 addEventListener
//为了兼容性readystatechange 中不使用 this而是直接使用 xhr
//由于兼容性的原因最好放在 open 之前//xhr.readyState 是xhr的自身的状态码
// 0未初始化。尚未调用 open()
// 1启动。已经调用 open()但尚未调用 send()
// 2发送。已经调用 send()但尚未接收到响应
// 3接收。已经接收到部分响应数据
// 4完成。已经接收到全部响应数据而且已经可以在浏览器中使用了xhr.onreadystatechange () {if (xhr.readyState ! 4) return;// HTTP CODE// 获取到响应后响应的内容会自动填充 xhr 对象的属性// xhr.statusHTTP 200 404// xhr.statusTextHTTP 状态说明 OK Not Foundif ((xhr.status 200) (xhr.status 300) || xhr.status 304) {// console.log(正常使用响应数据);console.log(xhr.responseText);}
};2.3.准备发送请求调用 open 并不会真正发送请求而只是做好发送请求前的准备工作xhr.open(HTTP 方法 GET、POST、PUT、DELETE,地址 URL https://www.imooc.com/api/http/search/suggest?wordsjs ./index.html ./index.xml ./index.txt,true
);
//由于兼容性的原因最好放在 open 之前2.4.发送请求调用 send() 正式发送请求send() 的参数是通过请求体携带的数据xhr.send(null);//传递null兼容3.使用 Ajax 完成前后端通信const url https://www.imooc.com/api/http/search/suggest?wordsjs;const xhr new XMLHttpRequest();xhr.onreadystatechange function () {if (xhr.readyState ! 4) return;if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.responseText);console.log(typeof xhr.responseText);}
};xhr.open(GET, url, true);xhr.send(null);3.GET请求携带数据数据编码1.携带数据GET 请求不能通过请求体携带数据但可以通过请求头携带const url https://www.imooc.com/api/http/search/suggest?wordsjsusernameyunmuage18;const xhr new XMLHttpRequest();xhr.onreadystatechange function () {if (xhr.readyState ! 4) return;if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.responseText);}
};xhr.open(GET, url, true);
//不会报错但不会发送数据
xhr.send(sexfemale);//类似与form表单的提交方式
form actionhttps://www.imooc.com/api/http/search/suggest methodgetinput typetext nameusername /input typetext namewords /input typepassword namepassword /input typesubmit value提交 /
/form2.数据编码如果携带的数据是非英文字母的话比如说汉字就需要编码之后再发送给后端不然会造成乱码问题可以使用 encodeURIComponent() 编码const url https://www.imooc.com/api/http/search/suggest?words${encodeURIComponent(前端
)};const xhr new XMLHttpRequest();xhr.onreadystatechange function () {if (xhr.readyState ! 4) return;if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.responseText);}
};xhr.open(GET, url, true);
//不会报错但不会发送数据
xhr.send();4.POST请求携带数据数据编码1.携带数据POST 请求主要通过请求体携带数据同时也可以通过请求头携带// POST 请求主要通过请求体携带数据同时也可以通过请求头携带
const url https://www.imooc.com/api/http/search/suggest?wordsjs;const xhr new XMLHttpRequest();xhr.onreadystatechange () {if (xhr.readyState ! 4) return;if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.responseText);}
};xhr.open(POST, url, true);// 如果想发送数据直接写在 send() 的参数位置一般是字符串 保持与form表单传递数据格式一致
xhr.send(usernameyunmuage18);formactionhttps://www.imooc.com/api/http/search/suggest?wordsjsmethodpostinput typetext nameusername /input typepassword namepassword /input typesubmit value提交 /
/form不能直接传递对象需要先将对象转换成字符串的形式xhr.send({username: yunmu,age: 18
});
// [object Object]2.数据编码xhr.send(username${encodeURIComponent(云牧)}age18);5.JSON1.初识JSONJSON是什么为什么需要JSON1.JSON 是什么JSON 全称是 JavaScript Object NotationAjax 发送和接收数据的一种格式{code:200,data:[{word:jsp},{word:js},{word:json},{word:js \u5165\u95e8},{word:jstl}]}2.为什么需要 JSONJSON 有 3 种形式每种形式的写法都和 JS 中的数据类型很像可以很轻松的和 JS 中的数据类型互相转换// JS-JSON-PHP/Java
// PHP/Java-JSON-JS2.JSON的3种形式简单值形式对象形式数组形式1.简单值形式json文件后缀为.jsonJSON 的简单值形式就对应着 JS 中的基础数据类型数字、字符串、布尔值、nullconst xhr new XMLHttpRequest();xhr.onreadystatechange function () {if (xhr.readyState ! 4) return;if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.responseText);console.log(typeof xhr.responseText);}
};//请求本地的json数据
xhr.open(GET, ./plain.json, true);xhr.send(null);6
true
false
str
null注意事项① JSON 中没有 undefined 值② JSON 中的字符串必须使用双引号③ JSON 中是不能注释的2.对象形式JSON 的对象形式就对应着 JS 中的对象注意事项JSON 中对象的属性名必须用双引号属性值如果是字符串也必须用双引号JSON 中只要涉及到字符串就必须使用双引号不支持 undefinedconst xhr new XMLHttpRequest();xhr.onreadystatechange function () {if (xhr.readyState ! 4) return;if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.responseText);console.log(typeof xhr.responseText);}
};xhr.open(GET, ./obj.json, true);xhr.send(null);{name:云牧,age:18,hobbies:[唱歌,看电影],family:{brother:夕颜}
}3.数组形式JSON 的数组形式就对应着 JS 中的数组注意事项数组中的字符串必须用双引号JSON 中只要涉及到字符串就必须使用双引号不支持 undefinedconst xhr new XMLHttpRequest();xhr.onreadystatechange function () {if (xhr.readyState ! 4) return;if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.responseText);console.log(typeof xhr.responseText);}
};xhr.open(GET, ./arr.json, true);xhr.send(null);[6,null,true,false,yunmumu]
//这里不能写undefined 虽然能够获取到 但是后期转换成js对应的数据类型会有问题[{id: 1,username: 夕颜,comment: 666},{id: 2,username: 云牧,comment: 999 6翻了}
]3.JSON的常用方法JSON.parse()JSON.stringify()使用JSON.parse()和JSON.stringify()封装localStorage1.JSON.parse()JSON.parse() 可以将 JSON 格式的字符串解析成 JS 中的对应值一定要是合法的 JSON 字符串否则会报错const xhr new XMLHttpRequest();xhr.onreadystatechange function () {if (xhr.readyState ! 4) return;if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(JSON.parse(xhr.responseText));console.log(JSON.parse(xhr.responseText).data);console.log(xhr.responseText);}
};xhr.open(GET, https://www.imooc.com/api/http/search/suggest?wordsjs, true);
xhr.open(GET, ./index.json, true);xhr.send(null);2.JSON.stringify()JSON.stringify() 可以将 JS 的基本数据类型、对象或者数组转换成 JSON 格式的字符串const xhr new XMLHttpRequest();xhr.onreadystatechange function () {if (xhr.readyState ! 4) return;if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.responseText);}
};xhr.open(POST, https://www.imooc.com/api/http/search/suggest?wordsjs, true);//xhr.send({//username:yunmu,
//age:18
//});
console.log(JSON.stringify({username: yunmu,age: 18,})
);xhr.send(JSON.stringify({username: yunmu,age: 18,})
);3.使用 JSON.parse() 和 JSON.stringify() 封装 localStorageconst Storage window.localStorage;
// 设置
const set (name,value) {Storage.setItem(name, JSON.stringify(value));
}// 获取
const get (name) {return JSON.parse(Storage.getItem(name))
}// 删除
const remove (name) {Storage.removeItem(name)
}// 清空
const clear () {Storage.clear();
}export {set, get, remove, clear};import {set, get, remove, clear} from ./localStorage.js;set(user1,{name:夕颜,school:中心小学,feature:憨憨
})
set(user2,{name:云牧,school:中心大学,feature:比憨憨聪明
})console.log(get(user1));
console.log(get(user2));6.跨域跨域是什么什么是不同域什么是同域跨域请求为什么会被阻止跨域解决方案1.跨域是什么// 同域不是跨域
//const url ./index.html;// 不同域跨域被浏览器阻止
const url https://www.baidu.com;
const xhr new XMLHttpRequest();// 向一个域发送请求如果要请求的域和当前域是不同域就叫跨域
// 不同域之间的请求就是跨域请求xhr.onreadystatechange () {if (xhr.readyState ! 4) return;if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.responseText);}
};xhr.open(GET, url, true);xhr.send(null);2.什么是不同域什么是同域https协议://www.shiguangkey.com域名:443端口号/course/list路径协议、域名、端口号任何一个不一样就是不同域与路径无关路径一不一样无所谓不同域https://www.shiguangkey.com:443/course/list
http://www.shiguangkey.com:80/course/listhttp://www.shiguangkey.com:80/course/list
http://m.shiguangkey.com:80/course/list
http://shiguangkey.com:80/course/list同域http://shiguangkey.com:80
http://shiguangkey.com:80/course/list3.跨域请求为什么会被阻止阻止跨域请求其实是浏览器本身的一种安全策略--同源策略其他客户端或者服务器都不存在跨域被阻止的问题4.跨域解决方案① CORS 跨域资源共享② JSONP优先使用 CORS 跨域资源共享如果浏览器不支持 CORS 的话再使用 JSONP4.CORS 跨域资源共享CORS 是什么使用CORS 跨域的过程CORS的兼容性1.CORS 是什么//const url https://www.baidu.com;const url https://www.imooc.com/api/http/search/suggest?wordsjs;
const xhr new XMLHttpRequest();xhr.onreadystatechange () {if (xhr.readyState ! 4) return;if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.responseText);}
};xhr.open(GET, url, true);xhr.send(null);**Access-Control-Allow-Origin: ***表明允许所有的域名来跨域请求它* 是通配符没有任何限制只允许指定域名的跨域请求Access-Control-Allow-Origin: http://127.0.0.1:55002.使用 CORS 跨域的过程① 浏览器发送请求② 后端在响应头中添加 Access-Control-Allow-Origin 头信息③ 浏览器接收到响应④ 如果是同域下的请求浏览器不会额外做什么这次前后端通信就圆满完成了⑤ 如果是跨域请求浏览器会从响应头中查找是否允许跨域访问⑥ 如果允许跨域通信圆满完成⑦ 如果没找到或不包含想要跨域的域名就丢弃响应结果3.CORS 的兼容性IE10 及以上版本的浏览器可以正常使用 CORS5.JSONPJSONP的原理使用JSONP 实现跨域1.JSONP 的原理script 标签跨域不会被浏览器阻止JSONP 主要就是利用 script 标签加载跨域文件2.使用 JSONP 实现跨域服务器端准备好 JSONP 接口 https://www.imooc.com/api/http/jsonp?callbackhandleResponse手动加载 JSONP 接口或动态加载 JSONP 接口script//声明函数const handleResponse (data) {console.log(data);} // 动态加载 JSONP 接口// const script document.createElement(script);// script.src // https://www.imooc.com/api/http/jsonp?callbackhandleResponse;// document.body.appendChild(script);/script//手动加载 JSONP接口
script srchttps://www.imooc.com/api/http/jsonp?callbackhandleResponse/script7.XHR对象XHR的属性responseType和response属性timeout属性withCredentials 属性1.responseType 和 response 属性const url https://www.imooc.com/api/http/search/suggest?wordsjs;
const xhr new XMLHttpRequest();xhr.onreadystatechange () {if (xhr.readyState ! 4) return;if ((xhr.status 200 xhr.status 300) || xhr.status 304) {// 文本形式的响应内容// responseText 只能在没有设置 responseType 或者 responseType 或 text 的时候才能使用// console.log(responseText:, xhr.responseText);//可以用来替代 responseTextconsole.log(response:, xhr.response);}
};xhr.open(GET, url, true);//默认的响应类型
//xhr.responseType ;
//xhr.responseType text;
xhr.responseType json;xhr.send(null);IE6~9 不支持IE10 开始支持2.timeout 属性设置请求的超时时间单位 msconst url https://www.imooc.com/api/http/search/suggest?wordsjs;
const xhr new XMLHttpRequest();xhr.onreadystatechange () {if (xhr.readyState ! 4) return;if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.response);}
};xhr.open(GET, url, true);xhr.timeout 10000;xhr.send(null);IE6~7 不支持IE8 开始支持3.withCredentials 属性指定使用 Ajax 发送请求时是否携带 Cookie使用 Ajax 发送请求默认情况下同域时会携带 Cookie跨域时不会 如果要跨域携带 xhr.withCredentials true;最终能否成功跨域携带 Cookie还要看服务器同不同意//const url ./index.html;
const url https://www.imooc.com/api/http/search/suggest?wordsjs;const xhr new XMLHttpRequest();xhr.onreadystatechange () {if (xhr.readyState ! 4) return;if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.response);}
};xhr.open(GET, url, true);xhr.withCredentials true;xhr.send(null);IE6~9 不支持IE10 开始支持XHR的方法abort()setRequestHeader()1.abort()终止当前请求一般配合 abort 事件一起使用const url https://www.imooc.com/api/http/search/suggest?wordsjs;const xhr new XMLHttpRequest();xhr.onreadystatechange () {if (xhr.readyState ! 4) return;if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.response);}
};xhr.open(GET, url, true);xhr.abort();//这里不能终止请求xhr.send(null);xhr.abort();2.setRequestHeader()可以设置请求头信息xhr.setRequestHeader(头部字段的名称, 头部字段的值);//const url https://www.imooc.com/api/http/search/suggest?wordsjs;
const url https://www.imooc.com/api/http/json/search/suggest?wordsjs;const xhr new XMLHttpRequest();xhr.onreadystatechange () {if (xhr.readyState ! 4) return;if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.response);}
};xhr.open(POST, url, true);//请求头中的 Content-Type 字段用来告诉服务器浏览器发送的数据是什么格式的
//xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);
xhr.setRequestHeader(Content-Type, application/json);//xhr.send(usernamealexage18);
xhr.send(JSON.stringify({username: yunmu})
);XHR的事件load事件error 事件abort事件timeout 事件1.load 事件响应数据可用时触发const url https://www.imooc.com/api/http/search/suggest?wordsjs;
const xhr new XMLHttpRequest();// xhr.onload () {
// if ((xhr.status 200 xhr.status 300) || xhr.status 304) {
// console.log(xhr.response);
// }
// };xhr.addEventListener(load,() {if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.response);}},false
);xhr.open(GET, url, true);xhr.send(null);IE6~8 不支持 load 事件2.error 事件请求发生错误时触发const url https://www.imooc.com/api/http/search/suggest?wordsjs;
//const url https://www.iimooc.com/api/http/search/suggest?wordsjs;const xhr new XMLHttpRequest();xhr.addEventListener(load,() {if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.response);}},false
);
xhr.addEventListener(error,() {console.log(error);},false
);xhr.open(GET, url, true);xhr.send(null);IE10 开始支持3.abort 事件调用 abort() 终止请求时触发const url https://www.imooc.com/api/http/search/suggest?wordsjs;const xhr new XMLHttpRequest();xhr.addEventListener(load,() {if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.response);}},false
);
xhr.addEventListener(abort,() {console.log(abort);},false
);xhr.open(GET, url, true);xhr.send(null);xhr.abort();IE10 开始支持4.timeout 事件请求超时后触发const url https://www.imooc.com/api/http/search/suggest?wordsjs;const xhr new XMLHttpRequest();xhr.addEventListener(load,() {if ((xhr.status 200 xhr.status 300) || xhr.status 304) {console.log(xhr.response);}},false
);
xhr.addEventListener(timeout,() {console.log(timeout);},false
);xhr.open(GET, url, true);xhr.timeout 10;xhr.send(null);IE8 开始支持8.封装ajax1.使用 Ajax 提交表单formidloginactionhttps://www.imooc.com/api/http/search/suggest?wordsjsmethodPOSTenctypemultipart/form-datainput typetext nameusername placeholder用户名 /input typepassword namepassword placeholder密码 /input idsubmit typesubmit value登录 /
/formscriptconst login document.getElementById(login);// console.log(login.username);// console.log(login.password);const { username, password } login;const btn document.getElementById(submit);const url https://www.imooc.com/api/http/search/suggest?wordsjs;btn.addEventListener(click,e {// 阻止表单自动提交e.preventDefault();// 表单数据验证// 发送 Ajax 请求const xhr new XMLHttpRequest();xhr.addEventListener(load,() {if ((xhr.status 200 xhr.status 300) ||xhr.status 304) {console.log(xhr.response);}},false);xhr.open(POST, url, true);// 组装数据// const data username${username.value}password${password.value};// FormData 可用于发送表单数据const data new FormData(login);// console.log(data);data.append(age, 18);data.append(sex, male);// for (const item of data) {// console.log(item);// }// xhr.setRequestHeader(// Content-Type,// application/x-www-form-urlencoded// );xhr.send(data);},false);/script2.FormData 的基本用法// 通过 HTML 表单元素创建 FormData 对象
// const fd new FormData(表单元素);
// xhr.send(fd);// 通过 append() 方法添加数据
// const fd new FormData(表单元素);
// fd.append(age, 18);
// fd.append(sex, male);
// xhr.send(fd);// IE10 及以上可以支持3.封装ajaxajax
//默认参数
import DEFAULTS from ./deafaults.js;
//工具函数
import { serialize, addURLData, serializeJSON} from ./utils.js;
//常量
import {HTTP_GET,COTENT_TYPE_FORM_URLENCODED,COTENT_TYPE_JSON,
} from ./constants.js;//Ajax类
class Ajax {constructor(url, options) {this.url url;this.options Object.assign({}, DEFAULTS, options);//初始化this.init();}//初始化init() {const xhr new XMLHttpRequest();this.xhr xhr;//绑定事件的响应程序this.bindEvent();//准备发送请求xhr.open(this.options.method, this.url this.addParam(), true);//设置responseTypethis.setResponseType();//设置超时this.setTimeout();//设置跨域是否携带 cookiethis.setCookie();//发送请求this.sendData();}//绑定事件的响应程序bindEvent() {const xhr this.xhr;const { success, httpCodeError, error, abort, timeout } this.options;//loadxhr.addEventListener(load, () {if (this.ok()) {success(xhr.response, xhr);} else {httpCodeError(xhr.status, xhr);}});// errorxhr.addEventListener(error, () {error(xhr);});//abortxhr.addEventListener(abort, () {abort(xhr);});// timeoutxhr.addEventListener(timeout, () {timeout(xhr);});}//检测状态码是否正常ok() {const xhr this.xhr;return (xhr.status 200 xhr.status 300) || xhr.status 304;}// 在地址上添加数据addParam() {const { params } this.options;if (!params) return ;return addURLData(this.url, serialize(params));}// 设置responseTypesetResponseType() {this.xhr.responseType this.options.responseType;}//设置超时setTimeout() {const { timeoutTime } this.options;if (timeoutTime 0) {this.xhr.timeout timeoutTime;}}//设置跨域是否携带 cookiesetCookie() {if (this.options.withCredentials) {this.xhr.withCredentials true;}}//发送请求sendData() {const xhr this.xhr;if (!this.isSendData()) {return xhr.send(null);}let resultData null;const { data } this.options;// 发送 FormData 数据if(this.isFormData()){resultData data;}else if(this.isFormURLEncodedData()){//发送form-urlencoded格式的数据this.setContentType(COTENT_TYPE_FORM_URLENCODED)resultData serialize(data);}else if(this.JSONData()){this.setContentType(COTENT_TYPE_JSON)//发送JSON格式的数据resultData serializeJSON(data);}else{this.setContentType();//其他格式的数据resultData data;}return xhr.send(resultData)}// 是否需要使用sendData发送数据isSendData() {const { data, method } this.options;if (!data) return false;if (method.toLowerCase() HTTP_GET.toLowerCase()) return false;return true;}//判断是否 发送 FormData格式的数据isFormData(){return this.options.data instanceof FormData;}//判断是否发送 application/x-www-form-urlencoded 格式的数据isFormURLEncodedData(){return this.options.cotentType.toLowerCase().includes(COTENT_TYPE_FORM_URLENCODED);}//判断是否发送的是否是 JSON 格式的数据JSONData(){return this.options.cotentType.toLowerCase().includes(COTENT_TYPE_JSON);}// 设置发送的数据格式ContentTypesetContentType(contentType this.options.conetntType){if(!contentType) return;this.xhr.setRequestHeader(Content-Type, contentType);}//获取XHR对象getXHR(){return this.xhr;}
}export default Ajax;//new Ajax()deafaults//默认参数
import {HTTP_GET, COTENT_TYPE_FORM_URLENCODED, COTENT_TYPE_JSON} from ./constants.js;
const DEFAULTS {method: HTTP_GET,//请求头携带的数据params: null,//params:{// username:yunmu,// age:18//}//usernameyunmuage18//请求体携带数据data: null,//data:{// username:yunmu,// age:18//}//data: FormData数据// 属性cotentType: COTENT_TYPE_FORM_URLENCODED,responseType:,timeoutTime:0,withCredentials:false,//方法success(){},httpCodeError(){},error(){},abort(){},timeout(){}
}export default DEFAULTS;utils// 工具函数
const serialize param {const results [];for(const [key, value] of Object.entries(param)){results.push(${encodeURIComponent(key)}${encodeURIComponent(value)});}return results.join();//[usernameyunmu,age18]//usernameyunmuage18
}//www,baidu.com//给URL添加参数
const addURLData (url, data) {if(!data) return ;const mark url.includes(?) ? : ?;return ${mark}${data};
}//序列化成JSON格式的字符串
const serializeJSON (data) {return JSON.stringify(data);
}export {serialize, addURLData, serializeJSON};constants//常量模块
export const HTTP_GET GET;export const COTENT_TYPE_FORM_URLENCODED application/x-www-form-urlencoded;export const COTENT_TYPE_JSON application/json;export const ERROR_HTTP_CODE 1;
export const ERROR_HTTP_CODE_TEXT HTTP 状态码异常;
export const ERROR_REQUEST 2;
export const ERROR_REQUEST_TEXT 请求被阻止;
export const ERROR_TIMEOUT 3;
export const ERROR_TIMEOUT_TEXT 请求超时;
export const ERROR_ABORT 4;
export const ERROR_ABORT_TEXT 请求终止;indeximport Ajax from ./ajax.js;//常量
import {ERROR_HTTP_CODE,ERROR_HTTP_CODE_TEXT,ERROR_REQUEST,ERROR_REQUEST_TEXT,ERROR_TIMEOUT,ERROR_TIMEOUT_TEXT,ERROR_ABORT,ERROR_ABORT_TEXT,
} from ./constants.js;const ajax (url, options) {//return new Ajax(url, options).getXHR();let xhr;const p new Promise((resolve, reject) {xhr new Ajax(url, {...options,...{success(response) {resolve(response);},httpCodeError(status) {reject({type: ERROR_HTTP_CODE,text: ERROR_HTTP_CODE_TEXT:${status},});},error() {reject({type: ERROR_REQUEST,text: ERROR_REQUEST_TEXT,});},abort() {reject({type: ERROR_ABORT,text: ERROR_ABORT_TEXT,});},timeout() {reject({type: ERROR_TIMEOUT,text: ERROR_TIMEOUT_TEXT,});},},}).getXHR();});p.xhr xhr;p.ERROR_HTTP_CODE ERROR_HTTP_CODE;p.ERROR_REQUEST ERROR_REQUEST;p.ERROR_TIMEOUT ERROR_TIMEOUT;p.ERROR_ABORT ERROR_ABORT;return p;
};const get (url, options) {return ajax(url, { ...options, method: GET });
};const post (url, options) {return ajax(url, { ...options, method: POST });
};const getJSON (url, options) {return ajax(url, { ...options, method: GET, responseType: json });
};export { ajax, get, post, getJSON };9.ajax的应用搜索提示input idsearch typetext /
ul idresult/ulscript typemoduleimport { getJSON } from ./ajax/index.js;const searchInput document.getElementById(search);const resultList document.getElementById(result);const url https://www.imooc.com/api/http/search/suggest?words;const handleInputEvent () {if (searchInput.value.trim() ! ) {getJSON(${url}${searchInput.value}).then(response {console.log(response);// [{word: jsp}]let html ;for (const item of response.data) {html li${item.word}/li;}resultList.innerHTML html;resultList.style.display ;// resultList.innerHTML lijsp/lilijs/li;}).catch(err {console.log(err);});} else {resultList.innerHTML ;resultList.style.display none;}};let timer null;// IE9 开始支持searchInput.addEventListener(input,() {// handleInputEvent();if (timer) {clearTimeout(timer);}// jsatimer setTimeout(handleInputEvent, 500);},false);/script二级菜单
!DOCTYPE html
html langenheadmeta charsetUTF-8 /title二级菜单/titlestyle/* css reset */* {padding: 0;margin: 0;}li {list-style: none;}/* menu */.menu {width: 100px;background-color: rgba(0, 0, 0, 0.1);margin: 10px;}.menu-item {position: relative;padding: 5px;cursor: pointer;}.menu-content {display: none;position: absolute;left: 100%;top: 0;width: 200px;height: 100px;padding: 0 5px;background-color: rgba(0, 0, 0, 0.1);}.menu-item:hover {background-color: rgba(0, 0, 0, 0.4);}.menu-item:hover .menu-content {display: block;}.menu-loading {margin: 45px 0 0 92px;}/style/headbodyul idmenu classmenu!-- li classmenu-item data-keyhot data-donedone
span热门/span
div classmenu-content
pimg classmenu-loading src./loading.gif alt加载中 //p
/div
/li --/ulscript typemodule// https://www.imooc.com/api/mall-PC/index/menu/hot// https://www.imooc.com/api/mall-PC/index/menuimport { getJSON } from ./ajax/index.js;const menuURL https://www.imooc.com/api/mall-PC/index/menu;const menuEl document.getElementById(menu);getJSON(menuURL).then(repsonse {// console.log(repsonse);let html ;for (const item of repsonse.data) {html
li classmenu-item data-key${item.key}
span${item.title}/span
div classmenu-content
pimg classmenu-loading src./loading.gif alt加载中 //p/div/li
;}menuEl.innerHTML html;// [{key: hot, title: 热门出发地, subTitles: Array(5)}]// ...}).then(() {const items menuEl.querySelectorAll(.menu-item);for (const item of items) {item.addEventListener(mouseenter,() {// console.log(item.getAttribute(data-key));// IE11 开始支持// console.log(item.dataset.key);if (item.dataset.done done) return;getJSON(https://www.imooc.com/api/mall-PC/index/menu/${item.dataset.key}).then(repsonse {// console.log(repsonse);// [{title: 内地热门城市, cities: Array(27)}]item.dataset.done done;let html ;for (const item of repsonse.data) {html p${item.title}/p;}item.querySelector(.menu-content).innerHTML html;}).catch(err {console.log(err);});},false);}}).catch(err {console.log(err);});/script/body
/html多个ajax请求并发执行
!DOCTYPE html
html langenheadmeta charsetUTF-8 /title多个 Ajax 请求的并发执行/titlestyle/* css reset */* {padding: 0;margin: 0;}li {list-style: none;}/* menu */.menu {width: 100px;background-color: rgba(0, 0, 0, 0.1);margin: 10px;}.menu-item {position: relative;padding: 5px;cursor: pointer;}.menu-content {display: none;position: absolute;left: 100%;top: 0;width: 200px;height: 100px;padding: 0 5px;background-color: rgba(0, 0, 0, 0.1);}.menu-item:hover {background-color: rgba(0, 0, 0, 0.4);}.menu-item:hover .menu-content {display: block;}.menu-loading {margin: 45px 0 0 92px;}/* loading-page */.loading-page {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1000;background-color: #eee;text-align: center;}.loading-img {position: absolute;top: 50%;}.ad img {display: inline-block;width: 25%;}.none {display: none;}/style/headbodydiv idloading-page classloading-pageimg classloading-img src./loading.gif alt加载中 //divdiv idad classad/divul idmenu classmenu!-- li classmenu-item data-keyhot data-donedone
span热门/span
div classmenu-content
pimg classmenu-loading src./loading.gif alt加载中 //p
/div
/li --/ulscript typemoduleimport { getJSON } from ./ajax/index.js;const menuURL https://www.imooc.com/api/mall-PC/index/menu;const adURL https://www.imooc.com/api/mall-PC/index/ad;const loadingPageEl document.getElementById(loading-page);const adEl document.getElementById(ad);const menuEl document.getElementById(menu);const p1 getJSON(menuURL).then(repsonse {// console.log(repsonse);let html ;for (const item of repsonse.data) {html
li classmenu-item data-key${item.key}
span${item.title}/span
div classmenu-content
pimg classmenu-loading src./loading.gif alt加载中 //p/div/li
;}menuEl.innerHTML html;// [{key: hot, title: 热门出发地, subTitles: Array(5)}]// ...}).then(() {const items menuEl.querySelectorAll(.menu-item);for (const item of items) {item.addEventListener(mouseenter,() {// console.log(item.getAttribute(data-key));// IE11 开始支持// console.log(item.dataset.key);if (item.dataset.done done) return;getJSON(https://www.imooc.com/api/mall-PC/index/menu/${item.dataset.key}).then(repsonse {// console.log(repsonse);// [{title: 内地热门城市, cities: Array(27)}]item.dataset.done done;let html ;for (const item of repsonse.data) {html p${item.title}/p;}item.querySelector(.menu-content).innerHTML html;}).catch(err {console.log(err);});},false);}}).catch(err {console.log(err);});const p2 getJSON(adURL).then(response {// console.log(response);// [{ url: http://alimc.img.imooc.com/class/ }];let html ;for (const item of response.data) {html img src${item.url} alt /;}adEl.innerHTML html;}).catch(err {console.log(err);});Promise.all([p1, p2]).then(() {// loadingPageEl.style.display none;// IE10 开始支持loadingPageEl.classList.add(none);// loadingPageEl.classList.remove(none);});/script/body
/html// 1.axios 是什么
// axios 是一个基于 Promise 的 HTTP 库可以用在浏览器和 node.js 中
// 第三方 Ajax 库// http://www.axios-js.com/zh-cn/docs/// 2.axios 的基本用法
// 引入 axios
// console.log(axios);const url https://www.imooc.com/api/http/search/suggest?wordsjs;
// axios(url, {
// method: post,// // 请求时的头信息
// headers: {
// Content-Type: application/x-www-form-urlencoded
// // Content-Type: application/json
// },// // 通过请求头携带的数据
// params: {
// username: alex
// },// // 通过请求体携带的数据// // application/json
// // data: {
// // age: 18,
// // sex: male
// // }// // application/x-www-form-urlencoded
// data: age18sexmale// // timeout: 10// // withCredentials: true
// })
// .then(response {
// console.log(response);
// console.log(response.data.data);
// })
// .catch(err {
// console.log(err);
// });// axios
// .get(url, {
// params: {
// username: alex
// }
// })
// .then(response {
// console.log(response);
// });// axios
// .post(url, usernamealexage18)
// .then(response {
// console.log(response);
// })
// .catch(err {
// console.log(err);
// });axios.post(https://www.imooc.com/api/http/json/search/suggest?wordsjs, {username: alex
}).then(response {console.log(response);
}).catch(err {console.log(err);
});// axios.put()
// axios.delete()// 1.Fetch 是什么
// Fetch 也是前后端通信的一种方式
// Fetch 是 AjaxXMLHttpRequest的一种替代方案它是基于 Promise 的// Ajax 的兼容性比 Fetch 好// abort timeout// 2.Fetch 的基本用法
// console.log(fetch);
// console.log(ajax);// fetch() 调用后返回 Promise 对象
const url https://www.imooc.com/api/http/search/suggest?wordsjs;// body: (...)
// bodyUsed: false
// ok: true
// status: 200
// statusText: OK
// type: cors
// url: https://www.im// 第二个参数是对象用来配置 fetch
const fd new FormData();
fd.append(username, alex);
fetch(url, {method: post,// body: null// body: usernamealexage18,// body: JSON.stringify({ username: alex })body: fd,// headers: {// // Content-Type: application/x-www-form-urlencoded// Content-Type: application/json// }mode: cors// credentials:include
}).then(response {console.log(response);// body/bodyUsed// body 只能读一次读过之后就不让再读了// ok// 如果为 true表示可以读取数据不用再去判断 HTTP 状态码了if (response.ok) {// console.log(response.json());return response.json();// return response.text();} else {throw new Error(HTTP CODE 异常 ${response.status});}}).then(data {console.log(data);}).catch(err {console.log(err);});
