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


Posted in jQuery onAugust 04, 2017

ajax

是用来处理前后端交互的技术,可以改善用户体验,其本质是

XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容

同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前面的任务是耗时操作,则需要一直等待

异步:多条任务并发执行,也就是一个任务的开启,不需要等待其他任务执行结束,效率较高

ajax的语言载体是JavaScript,最大的特点是页面不刷新

1、获取ajax对象

主流浏览器获取方式:火狐、谷歌、safari、opera、IE7以上

var xhr = new XMLHttpRequest();

IE7以下

var xhr = new ActiveXObject("microsoft.XMLHttp");

2、发起请求

创建请求:xhr.open(请求方式get/post,请求地址);

发送请求:xhr.send(post请求数据/get设置null);

3、接收数据

ajax可以接收字符串、html标签、css样式、xml、json

通过监听onreadystatechange事件。来接收ajax状态的变化(readyState属性)

readyState:

-0:表示未初始化,对象已经建立,但是没调用onen方法

-1:对象已建立,但是未调用send方法

-2:发送数据,已调用send方法,但当前状态及http头未知

-3:已接收部分数据,但是数据不全

-4:数据接收完毕

4、常用属性和方法

属性:

-responseText:将响应的数据作为字符串返回,只读

-responseXML:将响应的数据格式化为xml格式并返回,只读

-status:当前请求的http状态码

方法:

-open

-send

-setRequestHeader:设置请求头

get请求

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);

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?columnId=100000",
      type:'get',
      dataType:'jsonp',
      jsonpCallback:"fn",//自定义传递给服务器的函数名,而不是使用jquery自动生成的
      jsonp:'cb',//把传递函数名的那个形参callBack变为cb
      success:function(data){
        console.log(data)
      },
    })

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

jQuery 相关文章推荐
jquery图片放大镜效果
Jun 23 jQuery
详解jquery选择器的原理
Aug 01 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 #jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 #jQuery
基于jquery实现多选下拉列表
Aug 02 #jQuery
jQuery接受后台传递的List的实例详解
Aug 02 #jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 #jQuery
详解jquery选择器的原理
Aug 01 #jQuery
jQuery上传插件webupload使用方法
Aug 01 #jQuery
You might like
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
关于js类的定义
2011/06/28 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
利用Psyco提升Python运行速度
2014/12/24 Python
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
Python实现合并字典的方法
2015/07/07 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
python tkinter组件使用详解
2019/09/16 Python
python 实现视频 图像帧提取
2019/12/10 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
学校万圣节活动方案
2014/02/13 职场文书
健康家庭事迹材料
2014/05/02 职场文书
企业宗旨标语
2014/06/10 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
个人年终总结结尾
2015/03/06 职场文书
养成教育工作总结
2015/08/13 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python