ajax 和 mock 数据
ajaxajax是一种技术方案,但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。 实现在页面不刷新的情况下和服务端进行数据交互。 作用: 实现方式
范例GET 范例//异步GET var xhr = new XMLHttpRequest() xhr.open(‘GET‘,‘/login?username=evenyao&password=123‘,true) //get类型 数据需要拼接成url放到?后面 xhr.send() console.log(‘readyState:‘,xhr.readyState) xhr.addEventListener(‘readystatechange‘,function(){ //或者使用xhr.onload = function() //查看readyState状态 console.log(‘readyState:‘,xhr.readyState) }) xhr.addEventListener(‘load‘,function(){ console.log(xhr.status) if((xhr.status >= 200 && xhr.status < 300)|| xhr.status === 304){ var data = xhr.responseText console.log(data) }else{ console.log(‘error‘) } }) xhr.onerror = function(){ console.log(‘error‘) } //等同代码 var xhr = new XMLHttpRequest() xhr.open(‘GET‘,true) xhr.send() xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if((xhr.status >= 200 && xhr.status < 300)|| xhr.status === 304){ console.log(xhr.responseText) }else{ console.log(‘error‘) } } } xhr.onerror = function(){ console.log(‘error‘) }
? POST 范例//异步POST var xhr = new XMLHttpRequest() xhr.open(‘POST‘,‘/login‘,true) //post拼接数据放掉send里面 //post拼接数据放掉send里面 xhr.send(makeUrl({ username:‘evenyao‘,password:‘123‘ })) xhr.addEventListener(‘load‘,function(){ console.log(xhr.status) if((xhr.status >= 200 && xhr.status < 300)|| xhr.status === 304){ var data = xhr.responseText console.log(data) }else{ console.log(‘error‘) } }) xhr.onerror = function(){ console.log(‘error‘) } //makeUrl拼接函数 function makeUrl(obj){ var arr = [] for(var key in obj){ arr.push(key + ‘=‘ + obj[key]) } return arr.join(‘&‘) }
? 封装 ajax//封装 ajax function ajax(opts){ var url = opts.url //如果有类型就使用用户输入的类型; 如果没有,默认为后面的 var type = opts.type || ‘GET‘ var dataType = opts.dataType || ‘json‘ var onsuccess = opts.onsuccess || function(){} var onerror = opts.onerror || function(){} var data = opts.data || {} //data序列化 var dataStr = [] for(var key in data){ dataStr.push(key + ‘=‘ + data[key]) } dataStr = dataStr.join(‘&‘) //GET类型 使用url拼接 if(type === ‘GET‘){ url += ‘?‘ + dataStr } //XMLHttpRequest对象创建 var xhr = new XMLHttpRequest() xhr.open(type,url,true) xhr.onload = function(){ if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ //成功 //如果返回的数据类型是json,就解析成json格式 if(dataType === ‘json‘){ onsuccess(JSON.parse(xhr.responseText)) }else{ onsuccess(xhr.responseText) } }else{ onerror() } } //如果断网,也会执行onerror() xhr.onerror = onerror() //POST类型 if(type === ‘POST‘){ xhr.send(dataStr) }else{ xhr.send() } } ajax({ url:‘http://xxx‘,type: ‘POST‘,data: { city: ‘北京‘ },onsuccess: function(ret){ console.log(ret) render(ret) },onerror: function(){ console.log(‘服务器异常‘) showError() } }) function render(json){ } function showError(){ }
? 参考你真的会使用XMLHttpRequest吗? ? 关于如何mock数据http-server本地使用
?
?
?
? 具体ajax用法代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script type="text/javascript"> // ajax GET var xhr = new XMLHttpRequest() xhr.open(‘GET‘,‘/hello2.json‘,true) xhr.send() xhr.onload = function(){ console.log(xhr.status) if((xhr.status >= 200 && xhr.status < 300)|| xhr.status === 304){ var data = xhr.responseText console.log(data) console.log(JSON.parse(data)) }else{ console.log(‘error‘) } } xhr.onerror = function(){ console.log(‘error‘) } </script> </body> </html>
模拟接口的json文件内容: //hello2.json 内容 { "name": "go","success": true,"data": [ "70","80","90","年代" ] }
? github在github上面写一个服务器进行mock ? 线上mock使用easy-mock.com进行mock数据
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |