十八、ajax，同步和异步，宏任务和微任务 |
您所在的位置：网站首页 › 异步通信和同步通信的联系 › 十八、ajax，同步和异步，宏任务和微任务 |
十八、ajax，同步和异步，宏任务和微任务
|
1. ajax
1.1 什么是ajax
Asynchronous Javascript And XML（异步 JavaScript 和 XML）。
浏览器和服务器的一种 通信 技术
可以访问服务器数据局部刷新
【补充】 xml 可扩展标记语言（重量级的数据格式） ① 网络传输 ② 配置文件 1.2 ajax的核心对象：XMLHttpRequest 1.3 ajax函数的封装 1.3.1 get同步不传参的ajax封装缺点：同步会造成阻塞 1. 封装一个创建xhr的方法 function createXhr(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); // 谷歌火狐 } return new ActiveXObject("Msxml2.HTTP"); //ms微软 ie } 2. get同步不带参的ajax封装 function get(url){ // 2.1 创建一个xhr var xhr = createXhr(); // 2.2 调用open方法，准备数据 // 参数：请求方式，请求路径，同步/异步（true异步false同步，默认是true异步） xhr.open("get",url,false); // 2.3 调用send方法，发送请求 xhr.send(null); // 2.4 判断并接收数据 if(xhr.status==200){ return xhr.response; } } 复制代码 1.3.2 post同步不传参的ajax封装缺点：同步会造成阻塞 1. 封装一个创建xhr的方法 function createXhr(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); } return new ActiveXObject("Msxml2.HTTP"); } 2. post同步不带参的ajax封装 function get(url){ // 2.1 创建一个xhr var xhr = createXhr(); // 2.2 调用open方法，准备数据 // 参数：请求方式，请求路径，同步/异步（true异步false同步，默认是true异步） xhr.open("post",url,false); // 2.3 调用send方法，发送请求 xhr.send(null); // 2.4 判断并接收数据 if(xhr.status==200){ return xhr.response; } } 复制代码 1.3.3 get异步不传参的ajax封装 ---> 回调函数解决异步ajax异步：onreadystatechange事件 + callback获取数据 1. 封装一个创建xhr的方法 function createXhr(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); } return new ActiveXObject("Msxml2.HTTP"); } 2. get异步不传参的ajax封装 function get(url,callback){ var xhr = createXhr(); xhr.open("get",url); //默认异步 xhr.send(null); // onreadystatechange事件在响应数据回来时会自动触发 // xhr.status==200指http协议状态码 // xhr.readyState==4指xhr的响应码 xhr.onreadystatechange=function(){ if(xhr.status==200&&xhr.readyState==4){ if(callback){ callback(xhr.response); } } } } 复制代码ajax异步：onreadystatechange事件 + callback获取数据 1. 封装一个创建xhr的方法 function createXhr(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); } return new ActiveXObject("Msxml2.HTTP"); } 2. post异步不传参的ajax封装 function get(url,callback){ var xhr = createXhr(); xhr.open("post",url); //默认异步 xhr.send(null); // onreadystatechange事件在响应数据回来时会自动触发 // xhr.status==200指http协议状态码 // xhr.readyState==4指xhr的响应码 xhr.onreadystatechange=function(){ if(xhr.status==200&&xhr.readyState==4){ if(callback){ callback(xhr.response); } } } } 复制代码 1.3.5 get异步传参的ajax封装 ---> 回调函数解决异步get传参：通过url传参 1. 封装一个创建xhr的方法 function createXhr(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); } return new ActiveXObject("Msxml2.HTTP"); } 2. 封装一个处理参数的方法（键值对的字符串，比如 id=1&&name=小刘&） 注意：= & 在ajax中属于有特殊含义的字符，可多不可少 function getParams(obj){ let str = ''; for(let key of Object.keys(obj)){ str += key + "=" + obj[key] + "&"; } return str; } 3. get异步传参的ajax封装 function get(url,obj,callback){ let xhr = createXhr(); xhr.open("get",url+"?"+getParams(obj)); xhr.send(null); xhr.onreadystatechange = function(){ if(xhr.status==200&&xhr.readyState==4){ if(callback){ callback(xhr.response); } } } } 复制代码 1.3.6 post异步传参的ajax封装 ---> 回调函数解决异步post传参：send方法传参 send前需要设置请求头 xhr.setRequestHeader("Content-Type","application-x-www-form-urlencoded") 1. 封装一个创建xhr的方法 function createXhr(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); } return new ActiveXObject("Msxml2.HTTP"); } 2. 封装一个处理参数的方法（键值对的字符串，比如 id=1&&name=小刘&） 注意：= & 在ajax中属于有特殊含义的字符，可多不可少 function getParams(obj){ let str = ''; for(let key of Object.keys(obj)){ str += key + "=" + obj[key] + "&"; } return str; } 3. get异步传参的ajax封装 function get(url,obj,callback){ let xhr = createXhr(); xhr.open("post",url); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send(getPatams(obj)); xhr.onreadystatechange = function(){ if(xhr.status==200&&xhr.readyState==4){ if(callback){ callback(xhr.response); } } } } 复制代码 1.3.7 get异步传参的ajax封装 ---> promise+async+await获取数据 1. 封装一个创建xhr的方法 function createXhr(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); } return new ActiveXObject("Msxml2.HTTP"); } 2. 封装一个处理参数的方法（键值对的字符串，比如 id=1&&name=小刘&） 注意：= & 在ajax中属于有特殊含义的字符，可多不可少 function getParams(obj){ let str = ''; for(let key of Object.keys(obj)){ str += key + "=" + obj[key] + "&"; } return str; } 3. get异步传参的ajax封装 function getP(url,obj){ return new Promise((resolve,reject)=>{ let xhr = createXhr(); xhr.open("get",url+"?"+getParams(obj)); xhr.send(null); xhr.onreadystatechange = function(){ if(xhr.status==200&&xhr.readyState==4){ resolve(xhr.response); } } }) } // 使用 async function(){ let res = await getP('http://xxxx', {name:"小刘"}); console.log(res); } 复制代码 1.3.8 post异步传参的ajax封装 ---> promise+async+await获取数据 1. 封装一个创建xhr的方法 function createXhr(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); } return new ActiveXObject("Msxml2.HTTP"); } 2. 封装一个处理参数的方法（键值对的字符串，比如 id=1&&name=小刘&） 注意：= & 在ajax中属于有特殊含义的字符，可多不可少 function getParams(obj){ let str = ''; for(let key of Object.keys(obj)){ str += key + "=" + obj[key] + "&"; } return str; } 3. post异步传参的ajax封装 function postP(url,obj){ return new Promise((resolve,reject)=>{ let xhr = createXhr(); xhr.open("post",url); xhr.setRequestHeader("Content-Type","application/x-www-form-encoded"); xhr.send(getParams(obj)); xhr.onreadystatechange = function(){ if(xhr.status==200&&xhr.readyState==4){ resolve(xhr.response); } } }) } // 使用 async function(){ let res = await postP('http://xxxx', {name:"小刘"}); console.log(res); } 复制代码2. 同步和异步 |
【本文地址】
今日新闻 |
推荐新闻 |