ajax 和 mock 数据
ajax
ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。 实现在页面不刷新的情况下和服务端进行数据交互。
作用：
传统的网页（不使用ajax）。如果需要更新内容，必须重新加载整个网页，而通过使用ajax可以在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
实现方式
- XMLHttpRequest对象
- fetch（兼容性不如XMLHttpRequest）
兼容性查询
范例
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','/login?username=evenyao&password=123',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吗？
Ajax状态值及状态码
关于如何mock数据
http-server
本地使用http-server node工具启动一个静态服务器
以下是已经写好的ajax用法，这里采用GET类型，使用xhr.open('GET','/hello2.json',true)
在已经安装好node和http-server的情况下，先cd到对应的文件夹。然后通过http-server启动本地server。
通过访问127.0.0.1:8080/indexl.html，并进入控制台，即可看到mock结果
具体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
具体和本地区别不大，只是需要注意模拟接口的地址，因为域名是github.com，所以前面还需要加项目名，详情见github/mocktest里面的README.md
测试：
github pages
线上mock
使用easy-mock.com进行mock数据
进入easy-mock.com，登录注册账号之后进入创建项目，输入名称然后创建
- 进入创建好的项目
- 选择创建接口
- 填写类型(get/post)、描述、并输入JSON格式的内容，点击创建
- 生成链接，复制该链接
将该链接粘贴到之前写好的
ajax用法的xhr.open('GET','',true)当中
7. 打开页面，进入控制台查看mock结果
ajax 和 mock 数据的更多相关文章
- 前端通信：ajax设计方案（十）--- 完善Promise A+规范，增加mock数据功能
半年不迭代,迭代搞半年,说的就是我,这里有点尴尬了,直接进入主题吧 我记得在这篇博客的时候集成了Promise的,不过那个时候就简简单单的写了一点最基础,在一些特殊的case上,还是有点问题的,所以才 ...
- vue-cli项目中怎么mock数据
在vue项目中, mock数据可以使用 node 的 express模块搭建服务 1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data ...
- json-server mock数据
前言: 项目开发中,影响项目进程的常常是由于在前后端数据交互的开发流程中停滞,前端完成静态页面的开发后,后端迟迟未给到接口.而现在,我们就可以通过根据后端接口字段,建立一个REST风格的API接口,进 ...
- vue-cli项目使用mock数据的方法（借助express）
前言 现如今前后端分离开发越来越普遍,前端人员写好页面后可以自己模拟一些数据进行代码测试,这样就不必等后端接口,提高了我们开发效率.今天就来分析下前端常用的mock数据的方式是如何实现的. 主体 项目 ...
- 使用node.js + json-server + mock.js 搭建本地开发mock数据服务
在开发过程中,前后端不论是否分离,接口多半是滞后于页面开发的.所以建立一个REST风格的API接口,给前端页面提供虚拟的数据,是非常有必要的.对比过多种mock工具后,我最终选择了使用 json se ...
- mock数据（模拟后台数据）
mock数据(模拟后台数据) - Emily恩 - 博客园 https://www.cnblogs.com/enboke/p/vue.html Mock.js http://mockjs.com/ 前 ...
- Electron-vue实战（二）— 请求Mock数据渲染页面
Electron-vue实战(二)— 请求Mock数据渲染页面 作者:狐狸家的鱼 本文链接 GitHub:sueRimn 一.环境搭建 1.安装Mock.js 如果仅仅用作脱离后台的模拟数据,就安装在 ...
- mock 数据 解决方案
前端工程化之--Mock解决方案 https://www.jianshu.com/p/720b12b5d120 一.为什么要使用mock数据: 1.后端接口数据没有的时候,前端根据接口文档,使用 ...
- vue mock数据（模拟后台）
本文转载自:https://blog.csdn.net/benben513624/article/details/78562529 vue实现ajax获取后台数据是通过vue-resource,首先通 ...
随机推荐
- Css中路径data:image/png;base64的用法详解 (转载)
大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: background-image:url(data:image/png;base64, iVBORw0KGg ...
- 给requests模块添加请求头列表和代理ip列表
Requests 是使用 Apache2 Licensed 许可证的 基于Python开发的HTTP 库,其在Python内置模块的基础上进行了高度的封装,符合了Python语言的思想,通俗的说去繁存 ...
- ObjC之RunTime(上)
转载自这里. 最近看了一本书——iOS6 programming Pushing the Limits(亚马逊有中文版),最后一章是关于Deep ObjC的,主要内容是ObjC的runtime.虽然之 ...
- 装饰器概念&实际使用干货
定义: 本质是函数(装饰其他函数),是为其他函数添加附加功能 原则: 不能修改被装饰函数的源代码 不能修改被装饰函数的调用方式 实现装饰器知识储备: 函数及“变量” 高阶函数 把一个函数名当做实参 ...
- 类似"音速启动"的原创工具简码"万能助手"在线用户数终于突破100了!
原本只是开发出来方便自己的一个小工具,看到群友也喜欢,就随手分享了, 经过1个多月的自然积累,在线用户数终于突破100了,这增长速度实在让人泪奔~ 博客园的朋友如果看到,喜欢的话就拿去用吧, 万能助手 ...
- WebPack系列之Proxy
背景 当我们直接去访问https://m.weibo.cn/api/config/list时由于端口.域名的不同产生了跨域,无法请求到资源数据. 分析 WebPack中devServer的proxy代 ...
- Jmeter的实例应用
目标: 获取城市的天气数据: 第一步: 发送request 获取城市的城市代号http://toy1.weather.com.cn/search?cityname=上海 从这个请求的response ...
- Ubuntu 16.04 搭建 ELK
1.安装Java JDK sudo apt-get install default-jdk 2.安装Elasticsearch 1.导入Elasticsearch的GPG公钥 wget -qO - h ...
- react-router-dom实现全局路由登陆拦截
相比与vue的路由集中式管理,能够很好的进行统一的路由操作,react的路由看起来更乱,想要进行像vue的全局路由管理不是那么得心应手.在我们的项目中,有很多页面是需要登陆权限验证的,最好的方式就是能 ...
- JSON与Delphi Object的互换
Delphi自从增强了RTTI后,语言的可灵活性多大增强,Delphi的dbExpress中提供了DBXJSON,和DBXJSONReflect两个单元,可提供JSON序列化 下面的例子是实现Delp ...