标签 jQuery 下的文章

[ JQuery Ajax ] 实例全解析

AJAX简介

AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现对部分内容的异步更新

关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

load() 方法

定义和用法

load() 方法通过 AJAX 请求从服务器加载数据,可以是 html 代码,可以是 txt,并把返回的数据放置到指定的元素中。

语法

url     规定要将请求发送到哪个 URL。
data    可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)   可选。规定当请求完成时运行的函数。

额外的参数:
response - 包含来自请求的结果数据
status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")
xhr - 包含 XMLHttpRequest 对象

load ( url , data , function (response,status,xhr) )

加载页面片段

.load() 方法,也允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格,紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。

$("#id").load("ajax/test.html #part");

同源策略

由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。

示例

<script>
$(document).ready(function(){
  $("button#load").click(function(){
    $("#get").load("/load.html",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
</script>

    <h1 id='test'>静态页面</h1>
    <h2 id='get'></h2>
    <button id='load'>LOAD</button>

load.html

<p style='color:blue;'>外部资源</p>

1.png

点击按钮之后加载 load.html ,可以在 Network 里看见 ,我们发现html代码是可以被解释执行的
这样就又有了更多好玩的想法,比如加载一段小动画,调皮的播放一段音频,可以让页面变得更加千姿百态,更具有魅力,让人眼前一亮

2.png

具体可以用在哪呢?比如一些内容比较丰富的网站比如图片、视频,如果所有的数据都一次请求,那么打开网页的速度会非常慢,
首先保证网页的打开速度,不要让访问者看着一片空白发呆,
然后根据需求再加载访问者需要的数据,
同时我们可以利用JS获取访问深度,举个例子,比如一个长页面共分为4个部分,打开页面时只需要请求第一个部分,
然后根据访问深度的不同,加载对应的内容,这个部分可以更详细的展开

post() 方法

定义和用法

post() 方法通过 HTTP POST 请求从服务器载入数据。

语法

jQuery.post(url,data,success(data, textStatus, jqXHR ) , dataType )

url 必需,规定把请求发送到哪个 URL。
data 可选,映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选,请求成功时执行的回调函数。
dataType 可选,规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script 或 html)。

详细说明

该函数是简写的 Ajax 函数,等价于:

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

示例

<script>
$(document).ready(function(){
$("button#post").click(function(){
    var t = $('#check1').val();
    $.post('/controller.php',
    {
        t:t
    },
    function(data,status){
        $('#res').text("Data: " + data + "\nStatus: " + status);
    })
  })
</script>
<input id='check1' class='m' type="text">
<button id='post'>POST</button>

controller.php

<?php 
    echo htmlspecialchars($_POST['t']);
?>

3.png

点击按钮,在 Network 中我们可以看到 Request Method 为 POST

4.png

可以通过 POST 方式去替代传统的 表单提交 来进行信息交互,利用JQuery丰富的组件,让交互变得更加人性化
也可以设置请求的格式为 "json" 以 json 格式请求

5.png

如果设置了请求的格式为 "json" ,此时若没有设置 Response 回来的 ContentType 为:Response.ContentType = "application/json"
那么将无法捕捉到返回的数据。

jQuery Ajax 一开始我是拒绝的,后来经过我也知道它是真的非常好用,现在呢我每天还在用,还推荐给我朋友用,
不仅如此,你还可以 加特技加特技再加特技,然后迎娶白富美,当上CEO,走向人生巅峰!

Read More »

关于JQuery中动画重复触发滞后的解决方案

在交互中,鼠标触发事件的动画很常见
比如一个商品清单,当鼠标移入时显示商品的详细信息,鼠标移出时恢复初始
在使用JQuery的mouseover和mouseout事件时,若只是show()和hide(),这个过程瞬间完成,不会遇到动画滞后的问题
如果想要添加一些效果,比如使用slideDown()和slideUp()做交互,那么动画执行完成需要一定时间

当鼠标不停快速滑入滑出事件就会重复触发,但是每次触发的动画又必须执行完毕,就导致了动画滞后的问题
这里有两种解决方案

  1. 在触发元素上的事件设置为延迟处理,使用 setTimeout()
  2. 在触发事件时先停止动画,再执行相应的动画事件,使用 stop()

显然第二种方法体验更优

jQuery stop() 方法用于停止动画或效果,在它们完成之前
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画

语法

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false
因此,默认地,stop() 会清除在被选元素上指定的当前动画

所以,一个简单的商品清单的示例如下

$(document).ready(function(){
    $('li').mouseover(function(){
        $(this).children('dl').stop(true,false).slideDown();
    })
    $('li').mouseout(function(){
        $(this).children('dl').stop(true,false).slideUp();
    })
})

Read More »