ajax 和 mock 數據
阿新 • • 發佈：2018-08-02
{} ack .cn 兼容 gem 服務端 inline json格式 對象 
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 數據