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 数据