原生和jQuery的ajax用法详解


Posted in Javascript onJanuary 23, 2017

Ajax简介

Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写)。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。 

异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式 。

AJAX的缺陷

AJAX大量使用了JavaScript和AJAX引擎,而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持,Mozilla虽然也支持AJAX,但是提供XMLHttpRequest的方式不一样。所以,使用AJAX的程序必须测试针对各个浏览器的兼容性。

AJAX更新页面内容的时候并没有刷新整个页面,因此,网页的后退功能是失效的;有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。

对流媒体的支持没有FLASH好。

一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax。

form数据的序列化:

$('#submit').click(function(){
  $('#form').serialize();    //会根据input里面的name,把数据序列化成字符串;eg:name=yang
  $('#form').serializeArray();  //会根据input里面的name,把数据序列化成数组;eg:[object]
//注意:没有name会获取不到值
  //下面两种不是jQuery的方法
  JSON.parse()  //json字符串转化为json对象
  JSON.stringify()  //json对象转化为json字符串
});

jQuery的ajax方法:

$.ajax({
  url:'/comm/test1.php',
  type:'POST', //GET
  async:true,  //或false,是否异步
  data:{
    name:'yang',age:25
  },
  timeout:5000,  //超时时间
  dataType:'json',  //返回的数据格式:json/xml/html/script/jsonp/text
  beforeSend:function(xhr){
    console.log(xhr)
    console.log('发送前')
  },
  success:function(data,textStatus,jqXHR){
    console.log(data)
    console.log(textStatus)
    console.log(jqXHR)
  },
  error:function(xhr,textStatus){
    console.log('错误')
    console.log(xhr)
    console.log(textStatus)
  },
  complete:function(){
    console.log('结束')
  }
})

原生的ajax方法:

$('#send').click(function(){
  //请求的5个阶段,对应readyState的值
    //0: 未初始化,send方法未调用;
    //1: 正在发送请求,send方法已调用;
    //2: 请求发送完毕,send方法执行完毕;
    //3: 正在解析响应内容;
    //4: 响应内容解析完毕;
  var data = 'name=yang';
  var xhr = new XMLHttpRequest();    //创建一个ajax对象
  xhr.onreadystatechange = function(event){  //对ajax对象进行监听
    if(xhr.readyState == 4){  //4表示解析完毕
      if(xhr.status == 200){  //200为正常返回
        console.log(xhr)
      }
    }
  };
  xhr.open('POST','url',true);  //建立连接,参数一:发送方式,二:请求地址,三:是否异步,true为异步
  xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');  //可有可无
  xhr.send(data);    //发送
});
Javascript 相关文章推荐
JS及PHP代码编写八大排序算法
Jul 12 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
小程序开发之模态框组件封装
Apr 23 Javascript
详解Javascript实践中的命令模式
May 05 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 #Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 #Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 #Javascript
js选项卡的制作方法
Jan 23 #Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 #Javascript
详解javascript中对数据格式化的思考
Jan 23 #Javascript
JavaScript 栈的详解及实例代码
Jan 22 #Javascript
You might like
PHP 危险函数解释 分析
2009/04/22 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
python 删除非空文件夹的实例
2018/04/26 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
自我评价怎么写正确呢?
2013/12/02 职场文书
大学生村官工作感言
2014/01/10 职场文书
学校财务管理制度
2015/08/04 职场文书
同学会演讲稿
2019/04/02 职场文书
如何用python反转图片,视频
2021/04/24 Python
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
Python一行代码实现自动发邮件功能
2021/05/30 Python