ajax异步请求详解


Posted in Javascript onJanuary 06, 2017

做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事。既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.com学习,教程完善,适合初学者快速入门。

jQuery的引用,可以通过下载js文件导入,或通过外部导入

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

导入好jQuery之后我们就可以开始进行ajax异步更新请求数据了。

1、使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:load(url,[data],[callback])参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。

$(function(){
  $("#btn").click(function(){
    $("ul").html("<img src='Images/Loading.gif' alt=''/>").load("www.manyiaby.com",function(){
    });
  });
});

2、使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数据,并对获取的数据进行解析,显示在页面中,它的调用格式为:jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。

$(function(){
  $("#btn").click(function(){
    $.getJson("www.manyiaby.com", function(data){
      $.each(data, function(index, sport){
        if(index==3)
          alert(sport["name"]);
      })
    });
  });
});

3、使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件,它的调用格式如下所示:jQuery.getScript(url,[callback])或$.getScript(url,[callback])参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。

$(function(){
  $("#btn").click(function(){
    $.getScript("www.manyiaby.com", function(){
      alert("操作完成");
    });
  });
});

4、使用get()方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据,它的调用格式如下:$.get(url,[callback])参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。

$(function(){
  $("#btn").click(function(){
    $.get("www.manyiaby.com", function(data){
      alert(data.name);
    }, "json");
  });
});

5、与get()方法相比,post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面,调用格式如下:$.post(url,[data],[callback])参数url为服务器请求地址,可选项data为向服务器请求时发送的数据,可选项callback参数为请求成功后执行的回调函数。

$(function(){
  $("#btn").click(function(){
    $.post("www.manyiaby.com",{name:"满艺网", url:"www.manyiaby.com"}, function(data){
      alert(data);
    });
  });
});

6、使用serialize()方法可以将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求,它的调用格式如下:$(selector).serialize()其中selector参数是一个或多个表单中的元素或表单元素本身。

$(function(){
  $("#btn").click(function(){
    alert($("form").serialize());
  });
});

7、使用ajax()方法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下:jQuery.ajax([settings])或$.ajax([settings])其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。

$(function(){
  $("#btn").click(function(){
    $.ajax({
      url:"www.manyiaby.com",
      dataType:"text",
      data:{name:"满艺网", url:"wwww.manyiaby.com"},
      success:function(data){
        alert(data);
      }
    });
  });
});

8、使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为:jQuery.ajaxSetup([options])或$.ajaxSetup([options])可选项options参数为一个对象,通过该对象设置Ajax请求时的全局选项值。

$(function () {
  $.ajaxSetup({
    dataType:"text",
    success:function(data){
      alert(data);
    }
  });
  $("#btn").bind("click", function () {
    $.ajax({
      data: {name: "满艺网", url: "www.manyiaby.com"},
        url: "www.manyiaby.com"
       });
    })
  });
});

9、ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为:$(selector).ajaxStart(function())和$(selector).ajaxStop(function())其中,两个方法中括号都是绑定的函数,当发送Ajax请求前执行ajaxStart()方法绑定的函数,请求成功后,执行ajaxStop ()方法绑定的函数。

$(function () {
  $.ajaxStart(function (){
    alert("正在请求数据...");
  });
  $.ajaxStop(function (){
    alert("数据请求完成!");
  });
  $("#btn").bind("click", function () {
    $.ajax({
      url: "www.manyiaby.com",
      dataType: "json",
      success: function (data) {
        alert("姓名:"+data.name);
       }
     });
  })
});

10、定义一个json对象,用于保存学生的相关资料,通过$.each()工具函数,获取数组中各元素的名称与内容,显示在页面中。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <title>练习</title>
  </head>
  <body>
  <button>按钮</button>
  <script type="text/javascript">
    $(function () {
      $("button").bind("click", function () {
        var jsonDate = [{name:"满艺网", url:"www.manyiaby.com"}];
        $.each(jsonDate, function(index, data){
          alert(data.name);
        });
      })
    });  
  </script>
  </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 #Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 #Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 #Javascript
JS调用Android、Ios原生控件
Jan 06 #Javascript
JS正则匹配中文的方法示例
Jan 06 #Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 #Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 #Javascript
You might like
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
python队列原理及实现方法示例
2019/11/27 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
校本教研工作制度
2014/01/22 职场文书
打造完美自荐信
2014/01/24 职场文书
公司寄语大全
2014/04/10 职场文书
初中班主任评语
2014/04/24 职场文书
商铺门前三包责任书
2014/07/25 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis