zoukankan      html  css  js  c++  java
  • 关于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方式的区别

  • 相关阅读:
    Office 2016 安装你所必须要注意的事项
    JetBrains软件开发框架下的类似于“.IntelliJIdea2018.1”的配置文件夹的移动
    “microsoft ace oledb 12.0 未注册”疑云
    WebStorm添加多个项目到当前工程目录
    SVN入门教程
    FreeMarker 快速入门
    ajax详解
    基于JavaMail的Java邮件发送:简单邮件发送
    css 文件上传按钮美化
    chrome开发者工具的使用
  • 原文地址:https://www.cnblogs.com/zx0423/p/12340299.html
Copyright © 2011-2022 走看看