1.什么是ajax
一种与服务进行通讯的技术,能够实现同步或异步的局部刷新
2.ajax的核心对象是什么?
XMLHttpRequest
- 同步与异步区别?
同步按照顺序一步一步的执行 ,容易造成阻塞 ,js引擎本身就是单线程
异步:不按照顺序执行,能做多并发,能同时处理多个任务
4.get与post请求?
get比post要快,post比get要安全
get是通过url地址传值
post通过表单体传值
get有长度限制
get只能传输 ascii或字符
post 能传输大的数据
post 传输的格式多(视频,音频,图片等等)
get会产生历史记录
post不会
- http协议
它是超文本传输协议,基于TCP/IP
它的特性:
1.断开式
2.短链接
3.无状态
4. b/s,c/s
请求报文
请求行 请求方式(get/post) 请求路径 http协议版本号
请求头 content-type:appliction/x-www-form-urlencoded charset=utf-8
cookie:xxx
user-agent:xx
xhr.setRequestHeader("key","value")
一下自己定义请求头
token: 凭证
isNotLogin: 自己可以设定请求头
换行
请求体 携带到服务器的数据
响应报文
状态行 协议 状态码(200,304,403,404,500) 短语
响应头 content-type: 告诉浏览器,我给你内容的格式
text/html ,text/css ,text/javascript charset=utf-8
换行
响应体 响应的数据
ajax的步骤
1.创建核心对象
2.设置open参数 (请求方式,url,同步/异步)
3.发送数据 ,如果是post请求send数据,如果是get请求send null
4.配置onreadystatechange事件监听状态码
5. 获取数据
xhr.resposne
xhr.resposneXML 响应的数据是xml才能用
xml:扩展标记语言,重量级的数据格式,做配置文件,跨平台,
它较强校验机制
json:轻量级的跨平台的数据格式(做配置文件,跨平台)
xhr.responseText
同源策略
它是ajax的一种安全机制,要符合协议,域名,端口三者要统一
如果不统一就发生了跨域
解决跨域的方案
1.在后端的响应头配置 Access-Control-Allow-Origin:* (cors);
2.使用非官方的跨域方案: JSONP
它的原理:
利用一些带有src属性的标签(script,iframe),不受限制的去
访问外部资源,并结合callback拿到数据
它并不算真正的ajax,它是一种get请求,适合查询
3. 使用服务器代理 proxy Server
jsonp的封装
const $ = (function () {
const getParmas = (o) => {
let str = "";
for (let key in o) {
str += key + "=" + o[key] + "&";
}
return str;
}
const JSONP = (settings = {}) => {
//1.随机生成函数名
let fnName = "jQuery_" + parseInt(Math.random() * 1000);
//1.1 如果带了指定的函数名,就使用指定的函数名
fnName = settings.jsonpCallback ? settings.jsonpCallback : fnName;
//2.把函数名挂载到window上并赋予函数
window[fnName] = settings.success;
//3. 拼接请求的路径
let newUrl = settings.url + "?" + getParmas(settings.data) + settings.jsonp + "=" + fnName;
//4.动态创建script标签,并配置src属性
let oScript = document.createElement("script");
oScript.setAttribute("src", newUrl);
//5.把script标签追加到body
document.body.appendChild(oScript);
//5.script加载完成后,移除script
oScript.onload = function () {
this.remove();
}
}
return {
JSONP
}
})();
百度搜索
<script>
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=miqi&cb=fn
class SearchBox {
constructor(sttings = {}) {
this.el = document.querySelector(sttings.el);
this.oInput = this.el.children[0];
this.oUl = this.oInput.nextElementSibling || this.oInput.nextSibling;
this.entrInput();
this.mosuehandler();
this.clickHandler();
this.data = {};
}
entrInput() {
this.oInput.addEventListener("input", (evt) => {
this.oUl.style.display = "block";//输入的时候,要显示
let e = evt || window.event;
let val = e.target.value.trim();
if (val == "") {
this.oUl.innerHTML = "";
return;
}
let self = this;
$.JSONP({
url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
data: { wd: val },
jsonp: "cb",
success(res) {
// console.log(res);
let { s } = res;
// console.log(this);
self.data = s;
self.render();
}
})
})
}
render() {
let strHtml = ``;
this.data.forEach(item => strHtml += ` <li>${item}</li>`);
this.oUl.innerHTML = strHtml;
}
mosuehandler() { //建议必须使用 委托
this.oUl.addEventListener("mouseover", (evt) => {
let e = evt || window.event;
let ele = e.target || e.srcElement;
if (ele.nodeName !== 'LI') {
return;
}
[...this.oUl.children].forEach((item) => {
item.className = item == ele ? 'current' : '';
})
})
}
clickHandler() {
this.oUl.addEventListener("click", (evt) => {
let e = evt || window.event;
let ele = e.target || e.srcElement;
if (ele.nodeName !== 'LI') {
return;
}
this.oInput.value = ele.innerText;
setTimeout(() => {
this.oUl.style.display = "none";
}, 600);
})
}
}
new SearchBox({
el: "#serach_box"
})
回调函数:
把一个函数当做另外一个函数的参数,在另外一个函数内被执行和传递参数
回调函数能解决异步
// function fn() {
// setTimeout(() => {
// console.log("1111");
// }, 1000);
// }
// fn();
//回调函数,容易造成回调地狱
//回调地狱 不方便理解,也不方便维护,
//处理这个问题 promise 许诺; 承诺
// promise:能解决回调地狱,还能实现并发
//1. promise 是一个微任务,它是一个构造函数,就需要被实例化
//2.promise有3个状态
//1. pending 等待
//2. fulfilled 完成
//3. rejected 拒绝
//等待---> 解决
//等待---> 拒绝
//不能从 解决-->拒绝 或 拒绝-->解决
//方式1
var promise = new Promise(function (resolve, reject) {
if (Math.random() > 0.5) {
resolve("成功了")
} else {
reject("失败了")
}
});
promise.then(function (res) {
console.log(res);
}, function (err) {
console.log(err);
})
//方式2
var promise = new Promise(function (resolve, reject) {
// reject("err");
// resolve("ok")
// resolve("ok")
if (Math.random() > 0.5) {
resolve("大于0.5")
} else {
reject("小于0.5")
}
});
promise.then(function (res) {
console.log(res);
}).catch(function (err) {
console.log(err);
})
