源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-11-29 02:58 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:原生js jquery ajax请求以及jsonp的调用方法
[b]ajax[/b] 是用来处理前后端交互的技术,可以改善用户体验,其本质是 XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容 同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前面的任务是耗时操作,则需要一直等待 异步:多条任务并发执行,也就是一个任务的开启,不需要等待其他任务执行结束,效率较高 ajax的语言载体是JavaScript,最大的特点是页面不刷新 [b]1、获取ajax对象[/b] 主流浏览器获取方式:火狐、谷歌、safari、opera、IE7以上 var xhr = new XMLHttpRequest(); IE7以下 var xhr = new ActiveXObject("microsoft.XMLHttp"); [b]2、发起请求[/b] 创建请求:xhr.open(请求方式get/post,请求地址); 发送请求:xhr.send(post请求数据/get设置null); [b]3、接收数据[/b] ajax可以接收字符串、html标签、css样式、xml、json 通过监听onreadystatechange事件。来接收ajax状态的变化(readyState属性) [b]readyState:[/b] -0:表示未初始化,对象已经建立,但是没调用onen方法 -1:对象已建立,但是未调用send方法 -2:发送数据,已调用send方法,但当前状态及http头未知 -3:已接收部分数据,但是数据不全 -4:数据接收完毕 4、常用属性和方法 [b]属性:[/b] -responseText:将响应的数据作为字符串返回,只读 -responseXML:将响应的数据格式化为xml格式并返回,只读 -status:当前请求的http状态码 [b]方法:[/b] -open -send -setRequestHeader:设置请求头 [b]get请求[/b] url以字符串形式传递数据,对中文、&、=需要特殊处理,可以使用encodeURIComponent()方法进行编码,编码后的内容在服务端不需要解码,可以正常接收,get多个参数之间用&连接,参数名和参数值用=连接
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?sel=4');
      xhr.send(null);
[b]post请求[/b] -给服务器传参数,需要将参数写在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);
[b]get/post的区别:[/b] -请求数据量,get最多2k,post没有限制 -安全方面,post更安全 -传递数据的形式:get是url和参数一起发送,post是参数单独发送 [b]jquery ajax请求[/b]
//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?columnId=100000",
      type:'get',
      dataType:'jsonp',
      jsonpCallback:"fn",//自定义传递给服务器的函数名,而不是使用jquery自动生成的
      jsonp:'cb',//把传递函数名的那个形参callBack变为cb
      success:function(data){
        console.log(data)
      },
    })
以上这篇原生js jquery ajax请求以及jsonp的调用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部