ajax

ajax 是什么？有什么作用？

1. ajax(Asynchronous Javascript and XML)

• ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。 实现在页面不刷新的情况下和服务端进行数据交互，使用户体验更加友好。
• 两种实现(fetch和XMLHttpRequest)

如何 mock 数据？

1. 本地mock数据

• 使用本地的gitbash开启http-server进行mock数据

2. 线上mock数据

• 使用 http://easy-mock.com/
• 使用 http://rapapi.org/org/index.do
• 使用 server-mock

GET和POST类型的ajax的用法

• GET类型的ajax用法

var xhr = new XMLHttpRequest()
xhr.open('GET' , '/hello.json', true)
xhr.send()
xhr.addEventListener('readyStatechange', function(){
  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')}

• POST类型的ajax用法

var xhr = new XMLHttpRequest()
xhr.timeout = 3000        //可选，设置xhr请求的超时时间
xhr.open('POST', '/register', true)
xhr.onload = function(e) { 
  if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
    console.log(this.responseText)
  }
}
  //可选
xhr.ontimeout = function(e) { 
      console.log('请求超时')
}
//可选
xhr.onerror = function(e) {
    console.log('连接失败')
}
//可选
xhr.upload.onprogress = function(e) {
    //如果是上传文件，可以获取上传进度
}
xhr.send('username=luoyang&password=2235709')

封装一个ajax函数，能实现如下方法调用

function ajax(options){
    //补全
}
ajax({
    url: 'http://api.douban.com/weather.php',
    data: {
        city: '北京'
    },
    onsuccess: function(ret){
        console.log(ret)
    },
    onerror: function(){
        console.log('服务器异常')
    }
})

• 答案

function ajax(options){
    var url = options.url
    var type = options.type || 'GET'
    var dataType = options.dataType || 'json'
    var onsuccess = options.onsuccess || function(){}
    var onerror = options.onerror || function(){}
    var data = options.data || {}
    var dataStr = []
    for(var key in data){
        dataStr.push(key + '=' + data[key])
    }
    dataStr = dataStr.join('&')
    if(type === 'GET'){
        url += '?' + dataStr
    }
    var xhr = new XMLHttpRequest()
    xhr.open(type, url, true)
    xhr.onload = function(){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            //成功了
            if(dataType === 'json'){
                onsuccess( JSON.parse(xhr.responseText))
            }else{
                onsuccess( xhr.responseText)
            }
        } else {
            onerror()
        }
    }
    xhr.onerror = onerror
    if(type === 'POST'){
        xhr.send(dataStr)
    }else{
        xhr.send()
    }
}