zoukankan      html  css  js  c++  java
  • js源码 模仿 jquery的ajax的获取数据(get,post )的请求封装

    function ajax(obj){ 
                // 默认参数 
                var defaults = { 
                    type : 'get',
                    data : {}, 
                    url : '#', 
                    dataType : 'text', 
                    async : true, 
                    success : function(data){console.log(data)}
                } 
                // 处理形参,传递参数的时候就覆盖默认参数,不传递就使用默认参数 
                for(var key in obj){//把输入的参数与设置的默认数据进行覆盖更新 
                    defaults[key] = obj[key]; 
                } 
                // 1、创建XMLHttpRequest对象 
                var xhr = null; 
                if(window.XMLHttpRequest){ 
                    xhr = new XMLHttpRequest(); 
                }else{ 
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');// 兼容ie的早期版本 
                } 
                // 把对象形式的参数转化为字符串形式的参数 
                /* {username:'zhangsan','password':123} 转换为 username=zhangsan&password=123 */ 
                var param = ''; 
                for(var attr in obj.data){ 
                    param += attr + '=' + obj.data[attr] + '&'; 
                } 
                if(param){//substring(start, end)截取字符串去掉最后的&符号 
                    param = param.substring(0,param.length - 1); 
                } 
                // 处理get请求参数并且处理中文乱码问题 
                if(defaults.type == 'get'){ 
                    defaults.url += '?' + encodeURI(param); 
                } 
                // 2、准备发送(设置发送的参数) 
                xhr.open(defaults.type,defaults.url,defaults.async); // 处理post请求参数并且设置请求头信息(必须设置) 
                var data = null; 
                if(defaults.type == 'post'){ 
                    data = param; 
                    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                //post模式下必须加的请求头,这个请求头是告诉服务器怎么去解析请求的正文部分。 
                } 
                // 3、执行发送动作 
                xhr.send(data); 
                // 处理同步请求,不会调用回调函数 
                if(!defaults.async){ 
                    if(defaults.dataType == 'json'){ 
                        return JSON.parse(xhr.responseText); 
                    }else{ 
                        return xhr.responseText; 
                    } 
                } 
                // 4、指定回调函数(处理服务器响应数据) 
                xhr.onreadystatechange = function(){ 
                    if(xhr.readyState == 4){
                        //4 获取数据成功 
                    if(xhr.status == 200){
                        //200 获取的数据格式正确 
                        var data = xhr.responseText; 
                        if(defaults.dataType == 'json'){ 
                            // data = eval("("+ data +")"); 
                            data = JSON.parse(data);
                            //JSON.parse把获取带的json格式的数据转化为js的对象形式可以使用 
                            } 
                            defaults.success(data);//回调函数 
                        }
                    } 
                } 
            }
    

  • 相关阅读:
    Shell Sort
    Insertion Sort
    Notations
    Nakamori Akina
    QuickSort
    Onedrive File Open Problem
    JSON Introduction
    System Call
    进程软中断通信
    Bubble Sort
  • 原文地址:https://www.cnblogs.com/YOUNGZZ/p/7103784.html
Copyright © 2011-2022 走看看