zoukankan      html  css  js  c++  java
  • 用XMLHttpRequest制作一个简易ajax

    概述

    jquery退出历史舞台之后,我们怎么来发送ajax请求呢?可以用相关的库,也可以自己制作一个简易的ajax

    需要说明的是,我们使用的是XMLHttpRequest 2,它几乎兼容所有主流浏览器:XMLHttpRequest advanced features

    参考:

    stackoverflow答案

    实现get请求

    先从支持get请求开始,代码如下:

    function ajax(a, b, c){ // URL, callback, just a placeholder
        c = new XMLHttpRequest;
        c.open('GET', a);
        c.onload = b;
        c.send();
    }
    

    这里的c是一个占位符,可以避免我们声明变量,虽然影响了一点可读性。

    进行如下测试:

    ajax('https://api.github.com/repositories/91545010/issues/1', function(e) {
        console.log(this.response);
    });
    

    可以看到能够返回数据。

    实现post请求

    很多时候,我们需要post请求,支持post请求也很简单,代码如下:

    // URL, callback, method, formdata, just a placeholder
    function ajax(a, b, e, d, c){
        c = new XMLHttpRequest;
        c.open(e||'GET', a);
        c.onload = b;
        c.send(d||null);
    }
    

    可以利用如下方式发送get和post请求:

    ajax(url, callback);
    ajax(url, callback, 'post', {'key': 'val'});
    

    实现错误处理

    错误处理是请求api中必不可少的东西,实现也很简单,代码如下:

    // URL, callback, errorCallback, method, formdata, just a placeholder
    function ajax(a, b, f, e, d, c){
        c = new XMLHttpRequest;
        c.open(e||'GET', a);
        c.onload = b;
        c.onerror = f;
        c.send(d||null);
    }
    

    可以利用如下方式发送get和post请求,并且定制error错误处理回调。

    function error(e){
      console.log('--Error--', this.type);
      console.log('this: ', this);
      console.log('Event: ', e)
    }
    
    ajax(url, callback, error);
    ajax(url, callback, error, 'post', {'key': 'val'});
    

    学到了什么

    我学到了什么?

    1. 自己一步步包装实现常用api其实没有那么难。
    2. ajax的内部原理。
  • 相关阅读:
    KingPaper初探Java之初学者编码遇到的问题
    KingPaper初探redis之redis数据类型解析(String类型)
    KingPaper初探Java之面向对象对象的声名和实例化(一)
    KingPaper初探百度应用之百度地图API
    MYSQL之用户授权
    nginx入门到精通目录
    nginx入门篇负载均衡策略
    nginx入门篇功能特性
    开博啦
    ubuntu14.04下pycharm的安装及破解
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/9986655.html
Copyright © 2011-2022 走看看