原生和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继承之为什么要继承
Nov 10 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
vue如何判断dom的class
Apr 26 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
PHP中for与foreach的区别分析
2011/03/09 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
js下获取div中的数据的原理分析
2010/04/07 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python 运算符 供重载参考
2009/06/11 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
Atom的python插件和常用插件说明
2018/07/08 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
python飞机大战游戏实例讲解
2020/12/04 Python
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
项目投资建议书
2014/05/16 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技