精华内容
下载资源
问答
  • 原生js封装ajax(面向对象)
    2021-12-29 17:31:21
    class axios {
      static get (param = {}) {
        // console.log(param);
        param.method = 'get'
        return axios.http(param)
      }
      static post (param = {}) {
        param.method = 'post'
        return axios.http(param)
      }
      static http (param) {
        // console.log(param);
        let { method, url, data, dataType = 'json' } = param;
        //1 判断url是否为空
        if (!url) {
          throw new Error('判断不能为空')
        }
        // 2 处理data
        let tmPparam = null;
        if (data) {
          // console.log(data);
          tmPparam = [];
          for (let attr in data) {
            // console.log(attr);
            // 以key=val的形式添加到数组中
            tmPparam.push(`${attr}=${data[attr]}`)
    
          }
    
          // 3 以&分割为字符串
          tmPparam = tmPparam.join('&');
          // console.log(tmPparam);
          // 4 get 请求则拼接参数到url上
          if (method == 'get') {
            url = url + '?' + tmPparam;
            tmPparam = null;
          }
        }
        return new Promise((resolve, reject) => {
          // ajax的实现
          let xhr = new XMLHttpRequest();
          xhr.open(method, url);
          xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
          xhr.send(tmPparam);
          xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
              if (xhr.status == 200) {
                let res = xhr.response;
                if (dataType == 'json') {
                  res = JSON.parse(res)
    
                }
                // 成功
                resolve(res)
              } else {
                reject(xhr.status)
              }
            }
          }
        })
      }
    }

    更多相关内容
  • 原生JS封装ajax

    2021-01-17 14:02:40
    写在前面 我认为封装ajax最主要的其实就是XMLHttpRequest对象的创建。 1.创建XMLHttpRequest对象 那么什么是XMLHttpRequest对象呢?

    写在前面

    这个封装只包括最简单的get,post方法,主要是仿照jQuery中的ajax()函数,使用方法也类似。

    1. 创建XMLHttpRequest异步对象

    那么什么是XMLHttpRequest对象呢?
    XMLHttpRequest是ajax的基础,XMLHttpRequest对象用于和服务器交换数据并且获得服务器的响应。XMLHtppRequest用于在后台与服务器交换数据,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
    下面是创建一个异步对象的代码。

    var xmlhttp;
    if (window.XMLHttpRequest)
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp = new XMLHttpRequest();
    else
        // IE6, IE5 浏览器执行代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    

    2. 设置请求方式和请求地址并发送请求

    用到XMLHttpRequest对象的open和send方法向服务器发送请求。

    open(method, url, async)
    // method - 请求类型 GET或是POST
    // url - 文件在服务器上的位置
    // async - 异步true 同步false
    
    send(string)
    // string - 仅用于post请求
    // GET请求时可以sned()或是send(null)
    

    2.1 GET or POST

    GET相对于POST更快也更简单,适用于大部分情况。
    当遇到下列情形时必须使用POST

    • 需要更新服务器上的文件或数据库
    • 向服务器发送大量数据
    • 发送包含未知字符的用户输入时,POST比GET更稳定可靠

    2.2 GET请求

    一些GET实例

    xmlhttp.open("GET", "try/test.php", true);
    xmlhttp.send();
    // 可能得到缓存的结果,所以可以向url中添加唯一的ID
    xmlhttp.open("GET", "try/test.php?t=" + Math.random(), true);
    // 如果需要发送信息,则将信息添加到url中,格式如下
    xmlhttp.open("GET", "try/test.php?title=ajax&name=xuejiachen", true);
    

    通过上面的例子我们可以知道GET请求的基本格式,如果需要发送信息时,对data进行相应的格式处理添加到url后面即可。所以在我们这个封装ajax的例子中,我们这样操作:

    // 对option.data进行预处理
    let params = [];
     Object.keys(option.data).forEach(key => {
         params.push(key + '= ' + option.data[key]);
     })
     let sendData = params.join('&');
     if(option.type === "GET") {
         xhr.open("GET", option.url + '?' + sendData, true);
         xhr.send(null);
     }
    

    2.3 POST请求

    POST 数据时,需要使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定希望发送的数据。

    // 一个简单的post例子
    xmlhttp.open("POST", "try/demo.php", true);
    xmlhttp.send();
    
    // 当需要POST数据时,则必须要添加HTTP头
    setRequestHeader(header, value)
    // header - 规定头的名称
    // value - 规定头的值
    
    xmlhttp.open("POST", "try/test.php", true);
    xmlhttp.setRequestHeader("Content-type", "appliaction/x-www-form-urlencoded");
    xmlhttp.send("title=ajax&name=xuejiachen");
    

    setRequestHeader()又可以分为表单格式或是json格式

    xhr.open("POST", option.url, true);
    // 设置提交时的内容类型
    xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
    xhr.send(JSON.stringify(option.data));
    // 若数据为表单格式
    xhr.setRequestHeader('Content-Type', 'application/x-ww-form-urlencoded');
    xhr.send(sendData); // 这里的sendData与之前GET方法中加在url后面的数据格式一致
    

    3. 监听状态的变化,处理返回的结果

    这里涉及到XMLHttpRequest对象三个重要的属性onreadystatechange, readyState, status

    onreadystatechange
    存储函数名,每当readyState属性改变时,就会调用该函数
    
    readyState 返回当前文档的载入状态
    0 - 请求未初始化 还没有调用send()方法
    1 - 服务器连接已建立 已调用send()方法,正在发送请求
    2 - 请求已接收 send()方法执行完成,已经接收到全部响应内容
    3 - 请求处理中 正在解析响应内容
    4 - 请求已完成 响应内容及解析完成,可以在客户端调用了
    
    status
    200 'OK'
    404 未找到页面
    

    当readyState等于4且state为200时,表示响应已就绪;在这里接收后台返回的数据。


    下面是整个过程的代码

    function ajax(option) {
        option = option || {};
        option.type = (option.type || "GET").toUpperCase();
        option.dataType = option.dataType || "json";
    
        // 1.创建一个异步对象
        const xhr;
        // 考虑兼容性
        if(window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        }
        // 兼容IE6以下版本
        else if(window.ActiveXObject) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
    
        // 2.设置请求方式和请求地址
        // 3.发送请求
        // 对option.data进行预处理
        let params = [];
        Object.keys(option.data).forEach(key => {
            params.push(key + '= ' + option.data[key]);
        })
        let sendData = params.join('&');
        if(option.type === "GET") {
            xhr.open("GET", option.url + '?' + sendData, true);
            xhr.send(null);
        }
        else if(option.type === "POST") {
        	xhr.open("POST", option.url, true);
            // 设置表单提交时的内容类型
            xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
            xhr.send(JSON.stringify(option.data));
            // 若数据为表单格式
            // xhr.setRequestHeader('Content-Type', 'application/x-ww-form-urlencoded');
            // xhr.send(sendData);
        }
    
        // 4.监听状态的变化
        // 5.处理返回的结果
        /* onreadystatechange
        存储函数名,每当readyState属性改变时,就会调用该函数*/
    
        /* readyState 返回当前文档的载入状态
        0 - 请求未初始化 还没有调用send()方法
        1 - 服务器连接已建立 已调用send()方法,正在发送请求
        2 - 请求已接收 send()方法执行完成,已经接收到全部响应内容
        3 - 请求处理中 正在解析响应内容
        4 - 请求已完成 响应内容及解析完成,可以在客户端调用了*/
    
        /* status
        200 'OK'
        404 未找到页面*/
        xhr.onreadystatechange = () => {
            if(xhr.readyState === 4) {
                let status = xhr.status;
                if(status === 200) {
                    let response = xhr.responseText;
                    if(responseType === 'json') { // ?
                        response = JSON.parse(xhr.responseText); // 将ajax返回的data转为对象格式
                    }
                    option.onSuccess(response, xhr);
                }
                else {
                    option.onError(xhr);
                }
            }
        }
    }
            
    
    展开全文
  • js封装原生ajax

    2019-04-04 15:02:37
    js封装原生ajax,XMLHttpRequest/ActiveXObject对象封装
  • 原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的。。。简单说说思路,如有不正确的地方,还望指正^_^ 一、Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一...
  • 原生js封装ajax

    千次阅读 2018-07-06 16:43:16
    通过浏览大神的博客和自己的理解,自己尝试着封装了一下ajax请求。先大致了解一些XMLHTTPREQUEST。在XHLHTTPREQUEST1的版本中。返回响应的属性:responseText:响应文本。status:响应状态。根据响应状态可以判断...

    最近着手巩固,全面复习js的基础知识。通过浏览大神的博客和自己的理解,自己尝试着封装了一下ajax请求。

    1.Ajax是什么?

        Ajax是一种无需重现加载,就可以实现网页部分更新的技术。全称全称是Asynchronous JavaScript and XML,即异步JavaScript+XML。

    2.创建一个Ajax的基本步骤:

    •     创建一个XMLHttprequest对象。
    •     填写请求方法,url,时候异步请求。即xhr.open(method, url, async).
    •     发送请求xhr.send()。//如果是post请求,则将data填入到send中。否则将data以编码的形式写入到url中。

    3.先大致了解一些XMLHTTPREQUEST。在XHLHTTPREQUEST1的版本中,返回响应的属性:

    • responseText:响应文本。
    • status:响应状态。根据响应状态可以判断请求是否成功。
    • reponseXML:如果响应的内容类型是“text/xml”或者“application\xml”,这个属性将保存着相应数据的xml dom文档。
    • statusText:HTTP状态说明。

    4.xhr存在readyState属性,通过这个属性的不同状态,可以监听请求的不同响应操作:

    •   0:未初始化。未调用open()方法。
    •   1:启动。以调用open()方法,

    5.在XMLHTTPREQUEST2.0版本中:

    新增了表单序列化函数:new FormData();

    可以给函数直接传form表单的信息到,或者获取后以append(“键”, “值”)的方式去添加。同时,也增加了超时连接设置xhr.time,还提供了xhr.timeout =function(){}响应事件。

    基本知识了解完了,再附上我自己参考别人和自己稍微修改的ajax请求:



    展开全文
  • 由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法。 jQuery的ajax普通封装 var ajaxFn = function(uri, data, cb) { $.ajax({ ...原生ajax封装
  • 原生js封装Ajax

    2022-01-11 11:42:06
    function ajax(options) { let defaults={ type:'get', url:'', data:{}, header:{'content-type':'application/json'}, success:function(){}, error:function(){} } // 使用options覆盖defaults Object....

    封装Ajax 命名Ajax.js

    function ajax(options) {
        let defaults={
            type:'get',
            url:'',
            data:{},
            header:{'Content-type':'application/json'},
            success:function(){},
            error:function(){}
        }
        // 使用options覆盖defaults
        Object.assign(defaults,options)
        // 创建ajax对象
        let xhr = new XMLHttpRequest();
        let dataArr=[];
    
        // 循环data
        for (let key in defaults.data) {
            dataArr.push(`${key}=${defaults.data[key]}`)
        }
        let params=dataArr.join('&');
        // 如果是get请求
        if (defaults.type=='get') {
            defaults.url=defaults.url+'?'+params
        }
        // 给ajax赋值请求地址和请求方式
        xhr.open(defaults.type,defaults.url);
        if (defaults.type=='post') {
            xhr.setRequestHeader("Content-Type",defaults.header['content-type'])
            xhr.send(JSON.stringify(defaults.data));
        }else{
            // 发送请求
            xhr.send();
        }
       
        // 获取请求数据
        xhr.onreadystatechange = function () {
            //请求完成并且成功的时候,才调用success
            if (xhr.readyState == 4 && xhr.status == 200) {
                let result =xhr.responseText;
                //判断响应的头部类型,如果是json格式,则转换成json返回给success
                let header=xhr.getResponseHeader('Content-Type')
                if (header.includes('application/json')) {
                    result=JSON.parse(result)
                }
                options.success && options.success(result)
            }else if(xhr.readyState==4 && xhr.status!=200){
                options.error && options.error(xhr.status,xhr)
            }
        }
    }
    

    使用封装Ajax.js

    <script src="js/ajax.js"></script>
    
    ajax({
          type:'',//请求的类型
          url:'',//访问的地址
          data:{},//参数”xxx“:xxx
          success:function(data){//请求成功 data后台返回的数据
            console.log(data)
          },
          error:function(){//请求异常
          }
        })
    
    展开全文
  • Ajax封装代码部分: function obj2str(obj){ // 防止URL不变导致IE调用缓存 obj.t = new Date().getTime(); let res = []; for (let key in obj){ // URL中不能有中文,需要转码,即调用encodeURLComponent() ...
  • 分成两个页面,一个html页面,一个js页面 html页面代码: <body> <button onclick="testGet()">测试get请求</button> <button onclick="testForm()">测试post请求之form-data格式</...
  • /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的 * @...
  • 原生js-Ajax封装

    2022-01-12 16:36:37
    Ajax 说道ajax到底什么是ajaxajax是一种创建交互网页应用的一门技术。 ajax的应用场景有:(地图)实时更新,表单验证等等.... ajax的优缺点: 优点:1.实现局部更新(无刷新状态下),2.减轻了服务器端的...
  • <script> window.onload = function(){ ...创建ajax对象 //只支持非IE6浏览器 var oAjax = null; if(window.XMLHttpRequest){ oAjax = new XMLHttpRequest(); //alert(new .
  • 原生JS封装AJAX请求

    2021-06-08 18:23:54
    /*** 对封装好的ajax请求进行调用* */ajax({url:"", //请求地址type:'GET', //请求方式data:{name:'zhangsan',age :'23',email:'2372734044@qq.com'}, //请求参数dataType:"json", // 返回值类型的设定async:false, ...
  • 原生js封装ajax 代码如下,调用时候类似于Jquery封装的ajax function myajaxnormol(obj){ defaults={ type:"get", //获取类型 url:"#", //目标地址 datetype:"json",//数据类型 data:{}, //key-value值 asnyc:...
  • // 封装ajax函数 // @param {string}opt.type http连接的方式,包括POST和GET两种方式 // @param {string}opt.url 发送请求的url // @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的 // @...
  • 弄清楚ajax实现的五个步骤,带你用原生js实现ajax请求title> head> <body> <button id="test">testbutton> <script type="text/javascript"> // 原生ajax实现,非常的简单 // function ajax() { // var xhr = new ...
  • 封装原生js封装一个ajax函数,只需传地址和数据,加回调就可以使用。
  • 下面小编就为大家带来一篇用原生JSAJAX做简单封装的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • (前后端数据交互)###Asynchronous JavaScript and XML(异步JavaScript和XML)[ol][li]节省用户操作时间,提高用户体验,减少数据请求[/li][li] 传输、获取数据[/li][/ol]ajax流程:javascript 代码oBtn.onclick = ...
  • 本文主要介绍了如何通过原生JavaScript封装ajax请求,文中给出了具体的实现代码和详细的解释,希望对你有所帮助。 一、JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面; ajax的技术核心是 ...
  • 一、封装原生的xhr为ajax类xhr以及用法见之前的文章1、根据url确定请求的头部以及别的信息。var _headerConfig = {};if(url.indexOf('getcaptcha') !== -1) {_headerConfig = {Accept: 'image/png',responseType: '...
  • 利用Promise知识,用原生JS封装AJAX var url = '/请求的路径'; var params = { id: 'id=123', limit: 'limit=10' }; // 封装一个get请求的方法 function getJSON(url) { return new Promise(function (resolve, ...
  • 原生JS简单封装AJAX

    2020-05-24 17:59:24
    1.## 原生js封装简单的Ajax函数 function ajax (options) { // 默认值 var defaults = { type: 'get', url: '', async: true, data: {}, header: { 'Content-Type': 'application/x-...
  • 使用原生JavaScript封装ajax

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,123
精华内容 10,449
关键字:

原生js封装ajax

友情链接: CodeAttributeComposer.rar