• 关于Ajax请求的JS封装函数


    每次连接ajax都要重复写很多代码,所以写了一个JS封装函数,如下:

    function ajax(obj){
    //创建对象
        var xhr = new XMLHttpRequest();
        
    //处理URL:拼接随机数,防止浏览器缓存
        if(obj.url.indexOf('?')==-1)  //代表原url中是不带?号的
        {
            obj.url += '?r=' + Math.random();
        }
        else
        {
            obj.url += '&r=' + Math.random();
        }
        
    //处理参数,如数据'data':{"name":123,'pass':123};
        var params = [];
        for(var i in obj.data)
        {
            var key=i;                    //此时key,i即name
            var value = obj.data[i];    //i对应的属性值为123
            params.push(key + '=' + value);
        }
        
        obj.data = params.join('&');
        
    //建立连接
        xhr.open(obj.type,obj.url,obj.async);
        
    //监听状态,接收后端返回值
        xhr.onreadystatechange = function ()
        {
            if (xhr.readyState == 4 && xhr.status == 200)
            {
                obj.callback(JSON.parse(xhr.responseText));
            }
        }
        
    //提交方式,get和post的区别
        //如果是get请求,就将参数拼接在url后面
        if (obj.type == 'get') 
        {
            obj.url += '&' + obj.data
        } 
        
        //如果是post请求,要设置请求头,并且在send方法带上参数
        if (obj.type == 'get') 
        {
            xhr.send();
        } 
        else if (obj.type == 'post')
        {
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.send(obj.data);
        }
    }

    再来解释一下其中obj对象的参数形式:

    obj={

      'type':提交方式,    get/post

      'url' : 提交地址,     1.php

      'data' : 数据,          {"name":123 , "pass":123}

      'async': 是否异步,   true:异步    false:同步

      'callback' : 回调函数    success

    }

    注意点:

      1.数组和字符串中的性质

      2.get和post方式的区别

  • 相关阅读:
    C#在与java对接时候的UrlEncode的坑
    sql server 删除大量数据的一次坑爹之旅
    js实现黑客帝国文字下落效果
    第一个SignalR案例
    简单的放天灯动画
    计量单位符号的书写规范【转】
    阿里云OSS搭建移动应用直传服务的.Net C#示例
    UWP Windows10开发更新磁贴和动态更新磁贴
    UWP Windows10开发获取设备位置(经纬度)
    Asp.Net识别手机访问
  • 原文地址:https://www.cnblogs.com/zx0423/p/12340299.html
Copyright © 2020-2023  润新知