`

jquery ajax这async超级解析

 
阅读更多

jquery使用ajax时有个参数async,对于他的作用一直比较迷茫,下面用一个例子来说明他会带来什么效果。

 

客户端:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title> New Document </title>
  <script type="text/javascript" src="...../jquery.js"></script>
 </head>

 <body>
  <script type="text/javascript">
  <!--
	jQuery(function($){
		$.ajax({
			type: "get",
			async: false,
			url: "test.php",
			dataType: "jsonp",
			jsonp: "callbackparam",
			jsonpCallback: "success_callback",
			beforeSend:function(){
                $('#block').html('加载中...');
            },
            success: function(data){
				$('#block').html(data.a);
			},
            error: function(){
                alert('fail');
            }
		});

		$.ajax({
			type: "get",
			url: "aa.php",
			dataType: "text",
            success: function(data){
				alert(data);
			},
            error: function(){
                alert('fail');
            }
		});
	});
  //-->
  </script>

  <div id="block"></div>
 </body>
</html>
 

test.php:

<?php

$arr = array(
'a' => 'aaa',
'b' => 'bb'
);

$callback = $_GET['callbackparam'];
$json = json_encode($arr);
header("Content-type: text/html; charset=utf-8");
sleep(5);
echo $callback . "(" . $json . ")";

?>
 

aa.php

<?php
header("Content-type: text/html; charset=utf-8");
echo "tttttttt";
?>
 

 

上面代码演示可知,anysc为false时,后面的请求aa.php不会被发送,服务器处于等待状态,当test.php请求返回结果时,aa.php请求被发送。若anysc为true,可以看到test.php在请求的过程中,aa.php的请求结果已经返回,因为test.php设置了sleep(5)来延长请求时候。

 

分享到:
评论

相关推荐

    Jquery Ajax 前后台数据传输

    默认情况下,所有jQuery的AJAX操作都是异步的,但可以设置`async: false`使请求变为同步。然而,同步请求会阻塞浏览器,通常不推荐使用。 6. **数据格式和序列化** jQuery支持多种数据格式(如JSON、XML、HTML等...

    jquery+ajax上传解析文件

    这里我们将深入探讨如何使用jQuery结合Ajax技术来实现文件上传,并通过JSON进行数据解析。 首先,jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在文件上传的场景中,...

    jQuery_Ajax_全解析(非常实用的开发参考)

    1. **$.ajax()**:这是jQuery的核心Ajax函数,提供了一种灵活的方式来发送Ajax请求。可以设置各种参数,如URL、数据类型、回调函数等。 2. **$.get()**:简化的GET请求,用于获取服务器上的数据。它接受URL、回调...

    jquery ajax实例点击按钮触发Ajax loading

    在网页开发中,jQuery AJAX是一种常用的异步数据通信技术,它允许我们在不刷新整个页面的情况下与服务器进行数据交互。在本实例中,我们将探讨如何利用jQuery的AJAX功能,通过点击按钮来触发一个加载动画(通常表现...

    jquery ajax 智能搜索

    ### jQuery AJAX 智能搜索实现详解 在现代Web开发中,实时反馈用户输入的智能搜索功能变得越来越普遍。本文将深入探讨如何使用jQuery和AJAX技术实现一个智能搜索功能,通过分析给定代码示例,我们将理解其工作原理...

    jquery ajax接收后台传值

    ### jQuery AJAX 接收后台传值 在本案例中,主要介绍了如何利用jQuery AJAX技术实现根据JSP页面中下拉框的选择来动态控制显示不同的内容。这种交互方式常见于需要实时响应用户操作并从服务器获取数据的应用场景。 ...

    jquery的ajax方法

    **jQuery的Ajax方法**是JavaScript库中的核心特性之一,它为开发者提供了简单、高效的数据交互方式,无需刷新页面即可实现异步与服务器进行通信。在Web开发中,jQuery的Ajax功能极大地简化了XMLHttpRequest对象的...

    jQuery_Ajax全解析.doc

    4. **jQuery.ajax()**:这是最底层的AJAX函数,允许更多的控制和自定义。它可以处理所有类型的HTTP请求,包括GET和POST,以及PUT、DELETE等。你可以设置各种选项,如请求类型、数据格式、错误处理等。例如: ```...

    利用jquery以及ajax实现树结构

    本教程将探讨如何利用jQuery和AJAX技术来实现这样的树形结构,并且这个项目可以直接在MyEclipse环境中运行。 首先,我们需要理解jQuery和AJAX的基本概念。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、...

    jquery treeview async

    在“jquery treeview async”这个场景下,我们关注的是如何利用Java后端和Servlet技术来实现异步(async)加载树形菜单。这种方法能够显著提高用户体验,因为它仅在用户需要时加载数据,而不是一次性加载所有节点。 ...

    jQuery中的ajax async同步和异步详解

    在jQuery的$.ajax()方法中,可以指定一个参数来控制请求的同步和异步行为,这个参数就是async。根据描述,$ .ajax()方法的async参数默认值是true,表示所有的请求默认都是异步的。这一默认设置让程序员在编写代码时...

    Jquery的Ajax应用

    如果你需要进行同步请求,可以将`async`参数设为`false`,但这会阻塞浏览器直到请求完成,通常不推荐。 **5. 回调函数与Promise** jQuery的Ajax函数支持多个回调函数,如`beforeSend()`、`complete()`、`success()...

    jquery ajax无刷新技术

    如果需要同步请求,可以设置`async: false`,但这会导致浏览器在请求完成前无法进行其他操作,不建议在生产环境中使用。 ### 6. 回调函数 - `success`:当请求成功时执行的回调函数,参数`data`是服务器返回的数据...

    达内 JQUERY AJAX 课件pdf版

    - **Promise和async/await**:jQuery 3.0引入Promise,可以更优雅地处理异步操作,配合async/await可以实现同步编程的体验。 **7. jQuery与AJAX的高级应用** - **局部刷新**:使用AJAX更新页面的特定部分,提高用户...

    jQuery ajax libs

    默认情况下,所有 AJAX 请求都是异步的,可以通过 `async: false` 设置为同步。但需要注意,同步请求会阻塞浏览器,可能导致用户体验下降。 ### 6. 其他高级选项 - **dataType**:指定预期的服务器响应类型,如 '...

    jQuery 封装Ajax

    在提供的文件中,`common_gui.js`可能包含了自定义的Ajax封装,而`jquery.json-2.2.min.js`可能是用于解析JSON数据的辅助工具。在实际使用时,结合这些资源,我们可以构建更高效、更安全的Ajax通信流程。

    jQuery Ajax 三级省市联动 (JSON)

    这里我们将深入探讨如何使用jQuery和Ajax技术实现这一功能,并结合JSON数据格式来动态加载和展示地区信息。 首先,理解jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互。Ajax全称...

    jquery_ajax操作数据库

    **jQuery AJAX 操作数据库详解** jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了 JavaScript 的 DOM 操作、事件处理和Ajax交互。AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许...

    农民的jquery之旅-jquery的Ajax

    《农民的jQuery之旅——jQuery的Ajax》一文深入浅出地介绍了如何利用jQuery库进行Ajax操作,这在Web开发中非常实用且易于学习。Ajax,全称Asynchronous JavaScript and XML,是一种创建动态网页的技术,允许在不刷新...

Global site tag (gtag.js) - Google Analytics