原生和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 相关文章推荐
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
jQuery技巧总结
Jan 01 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
js canvas实现写字动画效果
Nov 30 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加密解密函数authcode的用法详细解析
2013/10/28 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
php常用表单验证类用法实例
2015/06/18 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
vue.js中created方法作用
2018/03/30 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
vue实例的选项总结
2020/06/09 Javascript
Python基于time模块求程序运行时间的方法
2017/09/18 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
Pycharm调试程序技巧小结
2020/08/08 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
个人求职自荐信范文
2014/06/20 职场文书
党员身份证明材料
2015/06/19 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书