原生封装一个类似于JQ的ajax方法

function $ajax(json){
    //初始化参数
    if(!json){
        return;
    }
    json.type = json.type || ‘GET‘;
    json.url = json.url || "";
    json.async = json.async || true;
    json.data = json.data || {};
    json.succeed = json.succeed || function(){}

    if(json.dataType=="jsonp"){

        var oScript=document.createElement("script")
        oScript.src=json.url
        document.body.appendChild(oScript);
        oScript.remove()
        return
    }
    //将json.data对象转为符合传递参数的格式
    var arr = [];
    for(var key in json.data){
        arr.push(key + ‘=‘ + json.data[key]);
    }
    var str = arr.join(‘&‘);
    alert(str);
    var xhr = new XMLHttpRequest();
    if(json.type.toUpperCase() === ‘GET‘){
        xhr.open(json.type,json.url + "?" + str,json.async);
        xhr.send();
    }else if(json.type.toUpperCase() === ‘POST‘){
        xhr.open(json.type,json.url,json.async);
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8");
        xhr.send(str);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            json.succeed(xhr.responseText);
        }
    }
}

原文地址:https://www.cnblogs.com/zzkxjh/p/10087558.html

时间: 2024-10-20 08:32:40

原生封装一个类似于JQ的ajax方法的相关文章

封装一个类似jquery的ajax方法

//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{ // type:"get"/"post", // dataType:"json"/"jsonp", // url:"地址", // data:{key:value} // success:function(){ // } // } //还需要一个跨域方法,可以访问远程服务器的数据 function myAja

一个类似于jq的小型库

本人写了一个类似于jq的小型库,不过只是写了部分方法而已.并没有jq那么全面,下面就介绍下有哪些方法可以使用 第一个是选择器, 选择器比较简单 只支持ID选择器 $(‘#id_name’) Class选择器$(‘.class_name’) 标签选择器$(‘tag _name’) 并没有像jq那样拥有高级的选择器. 方法有 Js延迟加载 Ready     $(document).ready(function(){ // 在这里写你的代码... }); $(functoin(){ }) 事件有 C

jq的ajax方法

相较与js异步对象的繁琐,jq的ajax对象结构更加清晰 一:ajax对象简述 ajax(Asynchronous JavaScript and XML),异步的xml和js对象,主要用于在不刷新全局页面的基础上,更新局部页面,多用于表单提交,搜索更新 在jq中的ajax对象的格式为: $.ajax({ // some code... }) js的ajax对象在此不多赘述 二:各类属性 一个完整的ajax对象起码应该有四个属性:type, url,data,success 1.type 这个是a

如果给JQ的ajax方法中的success()传入参数?

当时在使用JQuery提供的Ajax技术的时候,我有个需求,就是要给它请求成功后调用的success()方法传入参数: 所以,我就直接这样子写了: <script> function getTypeList(name){ $.ajax({ url : '<c:url value="admin/type_loadTypeList.action"/>', type : 'get', contentType : "text/html;charset=utf-

JQuery系列(4) - AJAX方法

jQuery对象上面还定义了Ajax方法($.ajax()),用来处理Ajax操作.调用该方法后,浏览器就会向服务器发出一个HTTP请求. $.ajax方法 $.ajax()的用法主要有两种. $.ajax(url[, options]) $.ajax([options]) 上面代码中的url,指的是服务器网址,options则是一个对象参数,设置Ajax请求的具体参数. $.ajax({ async: true, url: '/url/to/json', type: 'GET', data :

原生javascript包装一个ajax方法

调用AJAX 1 <script type="text/javascript" src="ajax.js"></script> 2 <script type="text/javascript"> 3 //调用包装好的ajax方法 4 ajax({ 5 method : "get", 6 url : "get.php", 7 asyn : true, 8 data : &q

jQuery的ajax和原生的ajax方法

jQuery的ajax方法: $.ajax({ url:'/comm/test1.php', type:'POST', //GET async:true, //或false,是否异步 data:{ name:'yang',age:25 }, timeout:5000, //超时时间 dataType:'json', //返回的数据格式:json/xml/html/script/jsonp/text beforeSend:function(xhr){ console.log(xhr) consol

使用对象封装ajax方法实现可重复调用

在项目中经常用到AJAX调用远程数据,每一次调用,都得写一个ajax方法,这就造成了重复代码过多,可读性也不够强,所以,我一般都是封装起来,需要的时候调用. var imgUpload = { //ajax请求数据 method:function(murl,mdata,method,success){ $.ajax({ type: method, url: murl, dataType : "jsonp", data: mdata, timeout: 20000, error: fun

原生封装的ajax

原生封装的ajax的代码如下: //将数据转换成 a=1&b=2格式; function json2url(json){ var arr = []; //加随机数防止缓存; json.t = Math.random(); for(var name in json){ arr.push(name+'='+json[name]); } return arr.join('&'); } function ajax(json){ //1.创建一个ajax对象; if(window.XMLHttpRe