ajax

2019-03-25  本文已影响0人  antimony

ajax 是什么?有什么作用?

ajax(全称:Asynchronous JavaScript + XML,异步JavaScript和XML) 是一种技术方案,但并不是一种新技术。它依赖的是现有的 CSS/HTML/JavaScript,而其中最核心的依赖是浏览器提供的 XMLHttpRequest 对象,是这个对象使得浏览器可以发出 HTTP 请求与接收 HTTP 响应。
ajax 应用可以仅向服务器发送并取回必须的数据,并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少,服务器回应更快了。同时,很多的处理工作可以在发出请求的客户端机器上完成,因此Web服务器的负荷也减少了。

作用:
1.运用 XHTML+CSS 来表达信息;
2.运用 JavaScript 操作 DOM(Document Object Model)来运行动态效果;
3.运用 XML 和 XSLT 操作数据
4.运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步数据交换;


如何 mock 数据?


把视频中GET 和 POST 类型的 ajax 的用法手写一遍

<script>
  // GET 类型
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'login?username=huanger&password=123',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);
    }else{
      console.log('error');
    }
  };

  // POST 类型
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'login',true);
  xhr.send('username=huanger&password=123');
  xhr.onload = 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');
    }
  };

</script>

封装一个 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])
    }
  //拼装data进数组中
    dataStr = dataStr.join('&')

    if(type === 'GET'){
        url += '?' + dataStr
    }
   //假如是GET方法,就把data放入URL中
    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'){
        //POST方法就放入send中
        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('服务器异常')
    }
})
上一篇 下一篇

猜你喜欢

热点阅读