ajax异步请求详解

2024-09-28 19:47:58

做前端开发的朋友对于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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

Vue form 表单提交+ajax异步请求+分页效果

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-
jquery的ajax异步请求接收返回json数据实例

jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码代码如下: $('#send').click(function () { $.ajax({ type : "GET", url : "a.php", dataType : "json
ajax 同步请求和异步请求的差异分析

ajax同步和异步的差异, 先看2段代码: 代码一: 复制代码代码如下: Synchronize = function(url,param) { function createXhrObject() { var http; var activeX = [ "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ]; try { http = new XMLHttpRequest;
dojo学习第二天 ajax异步请求之绑定列表

用户不喜欢滚动条,于是我们做成了选项卡切换,用户不喜欢刷新页面,于是我们就要使用ajax了,前些年,几乎每个web端开发人员,都以懂得一点点ajax而自豪,但知道使用ajax是远远不够的,因为技术是为人而服务的,不能滥用技术,你总不能为了验证一个文本框textbox而去异步请求一次.我还遇到过有人,更新用户信息的时候,使用ajax更新,用户信息中的图片,又使用回发来更新,一个更新中,先ajax卡在那,然后再回发,你说这是多么2的行为?这种人还不少,我还遇到过有人用ajax更新后再location
AJAX实现简单的注册页面异步请求实例代码

AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. (4)传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 简单布局 JS先判断,把前端可以的判断做,减少服务器的交互 $('button').on('click',function(){; var boolu
ajax的工作原理以及异步请求的封装介绍

Ajax原理: 客户端通过浏览器的内置对象XMLHttpRequest来发送异步请求,当服务器返回响应时,会调用先前注册的回调函数,在回调函数中可以使用javascript操作DOM来更新页面,异步请求不会阻塞客户端的操作,达到页面无法刷新就可以更新数据的效果. 异步请求的封装: 复制代码代码如下: var xhr=false; //step1:创建一个兼容浏览器各个版本的XMLHttpRequest对象 if (window.XMLHttpRequest) { //IE7+, Firefox
四步轻松实现ajax发送异步请求

ajax发送异步请求,供大家参考,具体内容如下第一步(得到XMLHttpRequest) ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了ajax!!! 1.得到XMLHttpRequest 大多数浏览器都支持:var xmlHttp=new XMLHttpRequest(); IE6.0:var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); IE5.0以更早版本的IE:var xmlHttp=new A
SpringMVC环境下实现的Ajax异步请求JSON格式数据

一环境搭建首先是常规的spring mvc环境搭建,不用多说,需要注意的是,这里需要引入jackson相关jar包,然后在spring配置文件"springmvc-servlet.xml"中添加json解析相关配置,我这里的完整代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schem
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

情景目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件代码片段 $.ajax({ type: "POST", url: root + "/xxx, data: requestData, dataType: "json", success: function(data){ // 清空列表 $("#formOpinion #
Ajax异步请求JSon数据(图文详解)

上一篇讲了Ajax请求数据text类型,text和html都是处理比较简答的数据,而在编程过程中使用Ajax调用数据的时候,难免要进行逻辑的处理,接受的数据也变的复杂比如数组类型的数据,这时候就需要使用JSON数据类型进行处理,今天就说说,JSON数据请求过程中的一些细节: 我们友情提醒本文所需工具和原料如下: wamp或lamp环境.jquery.js.编辑器具体方法/步骤请看下面: 1.创建基本的文件结构json_ajax.html和json_ajax.php,下载jquery.js,如图

ajax异步请求详解

相关推荐

随机推荐