原生ajax和JQuery封装的ajax

1,326 阅读1分钟

原生ajax:

get方式:

    var xhr = new XMLHttpRequest();//实例化XMLHttpRequest对象
    xhr.open('get',"url?name='zs'&age=18",bool);//调用open方法准备发送
    xhr.send(null);
    xhr.onreadystatechange = function(){
        if(xhr.readystate == 4){
            ...
        }
    }
    
post方式:

    var xhr = new XMLHttpRequest();
    xhr.open('post','url',false);//true:异步 false(默认):同步
    
    //方式1:拼接字符串
    var data = "name='zs'&age=18";//传递字符串,这样的格式
    
    方式2:结合formData对象(需要有form表单元素)
    var form = document.querySelector('#form');
    var data = new FormData(form);
    
    xhr.send(str);
    xhr.onreadystatechange = function(){
        if(xhr.readystate == 4){
            ...
        }
    }

JQ封装的ajax

$.post(param1,param2,param3,param4);

    param1: 请求的后台地址
    param2:发送到后台的数据json格式
    param3:readyState=4时的触发函数,该函数中有一个参数接收后台返回的值
    param4: 设置后台返回数据的类型:text(默认)/json/xml

$.get(param1,param2,param3,param4);

    param1: 请求的后台地址
    param2:发送到后台的数据json格式 {name:'zs','_':Math.random()}(防止缓存加随机后缀)
    param3:readyState=4时的触发函数,该函数中有一个参数接收后台返回的值
    param4: 设置后台返回数据的类型:text(默认)/json/xml
    
$.ajax({url,type,cache,async,data,dataType,success,contentType,processData})

    url:后台地址
    type:请求方式
    cache:true(缓存)/false(不缓存) get设置false,post不写
    async:true(异步)/false(同步)
    data:发送的数据 一般位json对象
    dataType:设置返回值的数据类型 text(默认)/xml/jsonp
    success: readyState = 4时触发的函数,参数接收后台返回的数据
    
    contentType:设置响应类型
    processData:处理的数据格式
    
    contentType和processType一般在处理FormData对象时使用,都设置false;一般情况可以不写