Ajax

Ajax

全拼

Ajax的全称Asynchronous JavaScript + XML(异步JavaScript和XML)

定义：

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

请求方法

get

var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://hello.php', true)
xhr.onreadystatechange = function(){
   if(xhr.readyState === 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.open('POST', '/hello.json', true)
  //发送. psot数据要放在send里面
  xhr.send('username=luoshushu&passwore=123') 
  xhr.addEventListener('load', function () {
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
      var data = xhr.responseText
      console.log(data)
    }else{
      console.log('出错了')
    }
  })

封装Ajax

/*封装一个Ajax*/
function ajax(opts){
    var url = opts.url //请求地址
    var type = opts.type || 'GET' //请求类型。默认GET
    var dataType = opts.dataType || 'json' //返回的数据类型。默认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('&')
    
    // 如果类型===GET,那么用户的地址？dataStr  
    // 比如：http://api.luoshushu.com/weather.php?city=广州
    if(type === 'GET'){
        url += '?' + dataStr
    }
    //以下跟前面的“常见的Ajax用法”的解释差不多 
    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
    // 如果类型是POST
    if(type === 'POST'){
      // POST要在send中传递数据
        xhr.send(dataStr)
    }else{
      // GET直接调用
        xhr.send()
    }
}

/*--------------*/
/*      使用    */
/*--------------*/

ajax({
    url: 'http://api.luoshushu.com/weather.php',
    data: {
        city: '广州'
    },
    // 数据成功之后
    onsuccess: function(ret){
        console.log(ret)
    },
    // 失败之后执行
    onerror: function(){
        console.log('服务器异常')
    }
})

http的readyState状态码

0 ——（未初始化）还没有调用send（）方法
1 ——（载入）已调用send（）方法，正在发送请求
2 ——（载入完成）send（）方法执行完成，已经接收到全部响应内容
3 ——（交互）正在解析响应内容
4 ——（完成）响应内容解析完成，可以在客户端调用