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);
    }
    }

  • 相关阅读:
    Best Time to Buy and Sell Stock
    Remove Nth Node From End of List
    Unique Paths
    Swap Nodes in Pairs
    Convert Sorted Array to Binary Search Tree
    Populating Next Right Pointers in Each Node
    Maximum Subarray
    Climbing Stairs
    Unique Binary Search Trees
    Remove Duplicates from Sorted Array
  • 原文地址:https://www.cnblogs.com/melry/p/6154874.html
Copyright © 2011-2022 走看看