原生js jquery ajax请求以及jsonp的调用方法

var xhr = null;
      //获取ajax对象
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
      } else{
        xhr = new ActiveXObject("Microsoft.XMLHttp");
      }
      xhr.onreadystatechange = function(){
        console.log(xhr.readyState);
        switch (xhr.readyState){
          case 0:
          console.log("尚未初始化");
          break;
          case 1:
          console.log("尚未建立连接");
          break;
          case 2:
          console.log("正在发送数据");
          break;
          case 3:
          console.log("正在接受数据");
          break;
          case 4:
          console.log("数据接收完成");
          //处理接到的数据,这下面是重点
          var text = xhr.responseText;
          break;
        }
      }
      //创建请求
      xhr.open('get','http://localhost/PHP/ajax01.php"background-color: #ccffcc">post请求

-给服务器传参数，需要将参数写在send方法中：参数1=值1&参数2=值2...
-需要调用setRequestHeader()方法，把传送的参数封装成xml格式（模仿form表单提交数据：application/x-www-form-urlencoded）;
-传递的中文、特殊符号都需要编码


var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function(){
        if (xhr.readyState == 4) {
          console.log("登陆成功:"+xhr.responseText);
        }
      }
      //等到输入的用户名和密码，
      var uname = "uname="+ encodeURIComponent(document.getElementById("uname").value);
      var pwd = "pwd="+encodeURIComponent(document.getElementById("pwd").value);
      xhr.open("post","http://localhos/PHP/ajax01.php");
      //设置头信息，需要在open方法之后设置
      xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      //设置参数
      var str = uname+"&"+pwd;
      xhr.send(str);


get/post的区别：
-请求数据量，get最多2k，post没有限制
-安全方面，post更安全
-传递数据的形式：get是url和参数一起发送，post是参数单独发送
jquery ajax请求


//AJAX
    $.ajax({
      url:"data.txt",
      type:'get',
      dataType:'json',
      data:null,
      async:true,
      timeout:1000,//设定超时时间 一般都是3000毫秒
      cache:false,//设定GET请求的时候不走 缓存数据，原理其实就是在URL末尾加随机数，默认是true
      success:function(data){
        console.log(data)
      },
    })
    //JSONP
    //JSONP都是GET和异步请求的，不存在其他的请求方式和同步请求，而且jquery默认会给JSONP的请求清楚缓存
    $.ajax({
      url:"http://matchweb.sports.qq.com/kbs/calendar",
      type:'get',
      dataType:'jsonp',
      jsonpCallback:"fn",//自定义传递给服务器的函数名，而不是使用jquery自动生成的
      jsonp:'cb',//把传递函数名的那个形参callBack变为cb
      success:function(data){
        console.log(data)
      },
    })


以上这篇原生js jquery ajax请求以及jsonp的调用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。