Ajax和XMLHttpRequest

ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的就是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应，实现在页面不刷新的情况下和服务端进行数据交互。
现在有了一种新的方式fetch，但是到现在为止fetch的支持性还不是很好

常用方法

• xhr.open：初始化一个请求

xhrReq.open(method, url, async, user, password);

• xhr.send：发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回
  如果是get方法可以不传数据，
• xhr.setRequestHeader：设置HTTP请求头的值
• xhr.getResponseHeader：返回包含指定响应头的字符串
• xhr.getAllResponseHeader：以字符串的形式返回所有用CRLF分割的响应头

常用属性：

• xhr.readyState：xhr对象的状态，等于4代表数据已经接收完毕
• xhr.status：服务器返回的状态吗，等于200表示一切正常
• xhr.responseText：服务器返回的文本数据
• xhr.timout：一个无符号长整型（unsigned long）数字，表示该请求的最大请求时间（毫秒），若超出该时间，则请求会自动结束
• xhr.upload：XMLHttpRequestUpload，代表上传过程
• xhr.response：一个用于定义响应类型的枚举值
• xhr.responseType：返回一个 ArrayBuffer、Blob、Document，或 DOMString，具体是哪种类型取决于 XMLHttpRequest.responseType 的值。其中包含整个响应体

常用事件

• abort
  当 request 被停止时触发，例如当程序调用 XMLHttpRequest.abort() 时。
  也可以使用 onabort 属性
• error
  当request遭遇错误时触发。
  也可以使用 onerror 属性
• load
  XMLHttpRequest请求成功完成时触发。
  也可以使用 onload 属性
• loadend
  当请求结束时触发, 无论请求成功 ( load) 还是失败 (abort 或 error)。
  也可以使用 onloadend 属性。
• loadstart
  接收到响应数据时触发。
  也可以使用 onloadstart 属性。
• progress
  接收数据开始周期触发。
  也可以使用 onprogress 属性。
• timeout
  在预设时间内没有接收到响应时触发。
  也可以使用 ontimeout 属性。

1.每一个XMLHttpRequest里面都有一个upload属性，而upload是一个XMLHttpRequestUpload对象
2.XMLHttpRequest和XMLHttpRequestUpload都继承了同一个XMLHttpRequestEventTarget接口，所以xhr和xhr.upload都有第一条列举的7个事件
3.onreadystatechange是XMLHttpRequest独有的事件

简单实现

案例：get

var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://api.jirengu.com/weather.php', true)
xhr.onload = function(){
        //onload也可以是onreadyStatusChange，但是需要加上是否为4的判断
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        //成功了
        console.log(xhr.responseText)
    } else {
        console.log('服务器异常')
    }
}
xhr.onerror = function(){
    console.log('服务器异常')
}
xhr.send()

案例：post

 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=jirengu&password=123456')

封装一个 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 || {}

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

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