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 相关文章推荐
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 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+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
php框架Phpbean说明
2008/01/10 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
员工考勤管理制度
2015/08/06 职场文书
学校学期工作总结
2015/08/13 职场文书
Linux中sftp常用命令整理
2022/06/28 Servers