AJAX与JSONP的原生js和jquery写法汇总

本文书写的内容是能实现基本功能的ajax和jsonp，可以用于理解ajax和jsonp的工作原理。

一、原生写get

//1.创建xml对象
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = callback;//注册回调函数
//2.初始化
xhr.open('GET' , '接口地址?数据名='+数据+'&数据名='+数据,true);//true代表异步
//3.发送
xhr.send();//异步下send函数立即完成执行；同步时,send这名话会在服务器端数据回来后才执行完

//4.处理相应结果
var callback = function(){
  if (xhr.readyState === 4){
    //判断响应码
    if((xhr.status >= 200 && xhr.status<300)||xhr.status == 304){
      //成功
      let resoonseTest = xhr.responseText;//获取服务器返回数据
    }else{
      //失败
    }
  }
};

二、jquery写get

1.回调形式

$.ajax({
  url:'接口地址',     //请求地址
  type:'get',        //请求方式
  async:true,        //异步
  dataType:'json',   //数据格式
  data:{name:123},//发送数据
  success:function(getdata){
    //请求成功的回调
  },
  error:function(){
    //请求失败的回调
  },
  beforeSend:function(){
    //发送前
  },
  complete:function(){
    //结束
  }
});

2.非回调形式

$.ajax({
  url:'接口地址',     //请求地址
  type:'get',        //请求方式
  async:true,        //异步
  dataType:'json',   //数据格式
  data:{name:123},//发送数据
  }).done(function(getdata){
    //请求成功
  }).fail(function(){
    //请求失败
  }).always(function(){
    //总是执行
  });

3.简写形式

//API:$.get(url, [data], [callback], [type])
$.get("接口地址", { name:123 },
          function(data){
            //请求成功
});

三、原生写post

//1.创建xml对象
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = callback;//注册回调函数
//2.初始化
xhr.open('POST' , '接口地址',true);//true代表异步
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置http的表头
//3.发送
xhr.send('数据名='+数据);//异步下send函数立即完成执行；同步时,send这名话会在服务器端数据回来后才执行完

//4.处理相应结果
var callback = function(){
  if (xhr.readyState === 4){
    //判断响应码
    if((xhr.status >= 200 && xhr.status<300)||xhr.status == 304){
      //成功
      let resoonseTest = xhr.responseText;//获取服务器返回数据
    }else{
      //失败
    }
  }
};

四、jquery写post

1.回调形式

$.ajax({
  url:'接口地址',     //请求地址
  type:'post',        //请求方式
  async:true,        //异步
  dataType:'json',   //数据格式
  data:{name:123},//发送数据
  success:function(getdata){
    //请求成功的回调
  },
  error:function(){
    //请求失败的回调
  },
  beforeSend:function(){
    //发送前
  },
  complete:function(){
    //结束
  }
});

2.非回调形式

$.ajax({
  url:'接口地址',     //请求地址
  type:'post',        //请求方式
  async:true,        //异步
  dataType:'json',   //数据格式
  data:{name:123},//发送数据
  }).done(function(getdata){
    //请求成功
  }).fail(function(){
    //请求失败
  }).always(function(){
    //总是执行
  })
  
;

3.简写形式

//API:jQuery.post(url, [data], [callback], [type])
$.post("接口地址", { name:123 },
          function(data){
            //请求成功
}, "json");

五、JSONP跨域

1.原生jsonp

getjsonp('发送数据',callback);
function getjsonp(senddata,ca){//data是发送的数据，ca是回调函数
  let script = document.createElement('script');//创建script节点
  script.src = "请求文件地址"+"?callback="+ca+'&发送的数据名='+senddata;//设置请求地址和数据
  document.getElementsByTagName('head')[0].appendChild(script);//添加到head上面
  script.parentNode.removeChild(script);//删除节点
};
function callback(getdata){//getdata是从服务器得到的数据
  //回调函数，可以对得到的数据进行处理
};

2.jquery的jsonp-回调形式

$.ajax({
  url:'接口地址',     //请求地址
  type:'get',        //请求方式，只能写get
  async:true,        //异步
  data:{name:123},//发送数据
  dataType:'jsonp',   //数据格式
  jsonp:"callback",//相当于url里面的callback
  jsonpCallback:"ca",//相当于url里面的ca
  success:function(getdata){
    //请求成功的回调
  },
  error:function(){
    //请求失败的回调
  }
});

3.jquery的jsonp-简写非回调形式

$.ajax({
  url:"请求文件地址"+"?callback="+ca+'&发送的数据名='+senddata,     //请求地址
  type:'get',        //请求方式，只能写get
  async:true,        //异步
  dataType:'json',   //数据格式
  }).done(function(getdata){
    //请求成功
  }).fail(function(){
    //请求失败
  }).always(function(){
    //总是执行
  })
  
;