zoukankan      html  css  js  c++  java
  • ajax请求的封装

    前端的工作,免不了要用到交互,请求后端的数据,可能大多人一直选择用jq封装好的方法直接使用,要知道封装这个事我们自己也可以的,今天给大家介绍一种封装方法,而且连跨域问题都不在话下,有了这个函数,是不是ajax请求so easy了呢!!下面就是: 

                                                                                                   function ajax(obj){//做网络请求的时候,参数以对象的形式传递进来,用的之后直接传参就ok啦!

    //规定:obj里面包含属性
    //1.url
    //2.type-----get还是post
                                                        //3,data-----前端给后端传递的参数(前端传递的时候以对象的形式)
    //4,回调函数----success;
    //5,回调函数----error;
        //6,跨域的回调函数--callback
       //7,后台接受回调函数的key值

    if(obj.callBack&&obj.key){
    var sc=document.createElement("script");
    document.documentElement.appendChild(sc);
    sc.src=obj.url+"?"+obj.key+"=callBack";
    return;
    }
    var ajaxObj=null;
    if(window.XMLHttpRequest){
    ajaxObj=new XMLHttpRequest();
    }else{
    ajaxObj=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //检测状态的变化
    ajaxObj.onreadystatechange=function(){
    if(ajaxObj.readyState==4){
    if(ajaxObj.status>=200&&ajaxObj.status<300||ajaxObj.status==304){
    if(obj.success){
    obj.success(JSON.parse(ajaxObj.responseText));
    // obj.success(ajaxObj.responseText);
    }else{
    alert("您忘记了success函数!");
    }

    }else{
    if(obj.error){
    obj.error(ajaxObj.status);
    }else{
    alert("您忘记了error函数!!");
    }
    }
    }
    }
    //type转化为小写,方便使用;当用户不传type的时候,默认为get;
    var type=obj.type||"get";
    type=type.toLowerCase();
    var params="";//字符串
    //判断是否传递了参数
    if(obj.data){
    for(var key in obj.data){
    params+=(key+"="+obj.data[key]+"&");
    }
    params=params.slice(0,params.length-1);
    }
    //当type为get的时候
    if(type=="get"){
    ajaxObj.open(type,obj.url+"?"+params,true);
    ajaxObj.send();
    }else{
    ajaxObj.open(type,obj.url,true);
    ajaxObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    ajaxObj.send(params);
    }
    }

  • 相关阅读:
    Ambari Server 架构
    [Spark]-源码解析-RDD之transform
    [Spark]-源码解析-RDD的五大特征体现
    [Spark]-作业调度与动态资源分配
    [Spark]-集群与日志监控
    [Spark]-Streaming-调优
    [Spark]-调优
    [Spark]-Streaming-Persist与CheckPoint
    [Spark]-Streaming-输出
    [Spark]-Streaming-操作
  • 原文地址:https://www.cnblogs.com/melry/p/6154874.html
Copyright © 2011-2022 走看看