ajax

1.ajax 是什么？有什么作用

Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

参考MDN

---

2.如何 mock 数据？

1.安装Node.js ，通过http-server开启本地服务器
获取端口http://localhost:8000
然后通过在文件夹创建html和json文件来测试数据
2.通过线上来mock数据
使用 https://easy-mock.com
使用 http://rapapi.org/org/index.do

---

3.GET 和 POST 类型的 ajax 的用法

xhr.open('GTE','/login?username=abc&password=123',true)
xhr.onload= function(){
  if(xhr.status>=200 && xhr.status<300 || xhr.status=304){
    console.log(xhr.responseText)
  }else {
    console.log('服务器出错！')
  }  
}
xhr.onerror= function(){
    console.log('服务器出错！')
}
xhr.send()    //GET的用法，拼接的数据放在open的第二个参数中


var xhr= new XMLHttpRequest()
xhr.timeout= 1000
xhr.open('POST','/login',true)
xhr.addEventListener('load',function(){
  if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
  var data=xhr.requestText
  console.log(data)
  }else {
    console.log('服务器储出错！')
  }
})
xhr.ontimeout= function(){
  console.log('请求超时')
}
xhr.onerror= function(){
  console.log('服务器出错！')
}
xhr.send('usernsme=abc&password=123')
                        //POST的用法，数据需放在send中

---

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

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

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 || {}

    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()
    }
}

参考课件