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 相关文章推荐
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
javascript中的this详解
Dec 08 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
js实现搜索提示框效果
Sep 05 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中常见数据类型的汇总分享
2014/01/06 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
php文件缓存类汇总
2014/11/21 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
简化Python的Django框架代码的一些示例
2015/04/20 Python
Django自定义用户认证示例详解
2018/03/14 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
python自动识别文本编码格式代码
2019/12/26 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
python打开文件的方式有哪些
2020/06/29 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
计算机开发个人求职信范文
2013/09/26 职场文书
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
自主招生自荐书
2013/11/29 职场文书
销售目标责任书
2014/07/23 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
高三数学教学反思
2016/02/18 职场文书
人民调解协议书
2016/03/21 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB