ajax 和 mock 数据

2018-08-02 06:22:16来源：博客园阅读 ()

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结果

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：JavaScript手绘风格的图形库RoughJS使用指南

下一篇：MUI - IOS系统，相册选择照片后，点击确定按钮无反应

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签