原生和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 Prototype 对象扩展
May 15 Javascript
Javascript 汉字字节判断
Aug 01 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
js module大战
Apr 19 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
Vue $attrs & inheritAttr实现button禁用效果案例
Dec 07 Vue.js
基于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 IF ELSE简化/三元一次式的使用
2011/08/22 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
javascript实现密码验证
2015/11/10 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
vue实现重置表单信息为空的方法
2018/09/29 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
python正则分析nginx的访问日志
2017/01/17 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
numpy库reshape用法详解
2020/04/19 Python
python 追踪except信息方式
2020/04/25 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
adidas美国官网:adidas US
2016/09/21 全球购物
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
咖啡书吧创业计划书
2014/01/13 职场文书
节约粮食标语
2014/06/18 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis