原生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实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
javascript(基于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
php写的简易聊天室代码
2011/06/04 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
原生js实现日期联动
2015/01/12 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
python是否适合网页编程详解
2019/10/04 Python
python实现人像动漫化的示例代码
2020/05/17 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
项目经理岗位职责
2013/11/11 职场文书
经理秘书找工作求职信
2013/12/19 职场文书
学习委员自我鉴定
2014/01/13 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
2014国庆节标语口号
2014/09/19 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL
浅谈Redis的事件驱动模型
2022/05/30 Redis