原生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 30 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery实现简单全选框
Sep 13 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数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
lib.utf.js
2007/08/21 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
用原生js统计文本行数的简单示例
2016/08/19 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
jQuery事件详解
2017/02/23 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
vue移动端屏幕适配详解
2019/04/30 Javascript
python统计一个文本中重复行数的方法
2014/11/19 Python
Python二分查找详解
2015/09/13 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
实践Vim配置python开发环境
2018/07/02 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
求职个人评价范文
2014/04/09 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
英文邀请函
2015/02/02 职场文书