zoukankan      html  css  js  c++  java
  • 20151205 jquery 学习笔记--Ajax

    Ajax全称为:“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML), 它并不是 JavaScript 的一种单一技术,而是利用了一系列交互式网页应用相关的技术所形 成的结合体。使用 Ajax,我们可以无刷新状态更新页面,并且实现异步提交,提升了用户 体验。

    一.Ajax 概述 Ajax 这个概念是由 JesseJamesGarrett 在 2005 年发明的。它本身不是单一技术,是一串 技术的集合,主要有: 1.JavaScript,通过用户或其他与浏览器相关事件捕获交互行为; 2.XMLHttpRequest 对象,通过这个对象可以在不中断其它浏览器任务的情况下向服务 器发送请求; 3.服务器上的文件,以 XML、HTML 或 JSON 格式保存文本数据; 4.其它 JavaScript,解释来自服务器的数据(比如 PHP 从 MySQL 获取的数据)并将其 呈现到页面上。
    由于 Ajax 包含众多特性,优势与不足也非常明显。优势主要以下几点: 1.不需要插件支持(一般浏览器且默认开启 JavaScript 即可); 2.用户体验极佳(不刷新页面即可获取可更新的数据); 3.提升 Web 程序的性能(在传递数据方面做到按需放松,不必整体提交); 4.减轻服务器和带宽的负担(将服务器的一些操作转移到客户端);
    而 Ajax 的不足由以下几点: 1.不同版本的浏览器度 XMLHttpRequest 对象支持度不足(比如 IE5 之前); 2.前进、后退的功能被破坏(因为 Ajax 永远在当前页,不会几率前后页面) ; 3.搜索引擎的支持度不够(因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容); 4.开发调试工具缺乏(相对于其他语言的工具集来说,JS 或 Ajax 调试开发少的可怜) 。
    异步和同步

    使用 Ajax 最关键的地方,就是实现异步请求、接受响应及执行回调。那么异步与同步 有什么区别呢?我们普通的 Web 程序开发基本都是同步的,意为执行一段程序才能执行下 一段,类似电话中的通话,一个电话接完才能接听下个电话;而异步可以同时执行多条任务, 感觉有多条线路,类似于短信,不会因为看一条短信而停止接受另一条短信。Ajax 也可以 使用同步模式执行,但同步的模式属于阻塞模式,这样会导致多条线路执行时又必须一条一 条执行,会让 Web 页面出现假死状态,所以,一般 Ajax 大部分采用异步模式。

    .load()方法 jQuery 对 Ajax 做了大量的封装,我们使用起来也较为方便,不需要去考虑浏览器兼容 性。对于封装的方式,jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这 层封装了第二层有三种方法:.load()、$.get()和$.post(),最高层是$.getScript()和$.getJSON() 方法。 

    .load()方法可以参数三个参数:url(必须,请求 html 文件的 url 地址,参数类型为 String)、 data(可选,发送的 key/value 数据,参数类型为 Object)、callback(可选,成功或失败的回调 函数,参数类型为函数 Function)。 如果想让 Ajax 异步载入一段 HTML 内容,我们只需要一个 HTML 请求的 url 即可。 

    //HTML

    <inputtype="button"value="异步获取数据"/>

    <divid="box"></div>

    //jQuery

    $('input').click(function(){

    $('#box').load('test.html');

    });

    如果想对载入的 HTML 进行筛选,那么只要在 url 参数后面跟着一个选择器即可。 

    //带选择器的 url 

    $('input').click(function(){

    $('#box').load('test.html.my');

    });

    如果是服务器文件,比如.php。一般不仅需要载入数据,还需要向服务器提交数据,那 么我们就可以使用第二个可选参数 data。向服务器提交数据有两种方式:get 和 post。

    //不传递 data,则默认 get 方式 

    $('input').click(function(){

    $('#box').load('test.php?url=ycku');

    });

    //get 方式接受的 PHP 

    <?php

    if($_GET['url']=='ycku'){

    echo'瓢城 Web 俱乐部官网';

    }else{ echo'其他网站';

    }
    ?>

    //传递 data,则为 post 方式 

    $('input').click(function(){

    $('#box').load('test.php',{

    url:'ycku'

    });

    });

    //post 方式接受的 PHP

    <?php

    if($_POST['url']=='ycku'){

    echo'瓢城 Web 俱乐部官网';

    }else{ echo'其他网站';

    }

    ?>

    在 Ajax 数据载入完毕之后,就能执行回调函数 callback,也就是第三个参数。回调函数 也可以传递三个可选参数:responseText(请求返回)、textStatus(请求状态)、XMLHttpRequest (XMLHttpRequest 对象)。 

    $('input').click(function(){

    $('#box').load('test.php',{

    url:'ycku'

    },function(response,status,xhr){

    alert('返回的值为:'+response+',状态为:'+status +',

    状态是:'+xhr.statusText);

    });

    });

    注意:status 得到的值,如果成功返回数据则为:success,否则为:error。XMLHttpRequest 对象属于 JavaScript 范畴,可以调用一些属性如下: 

    如果成功返回数据,那么 xhr 对象的 statusText 属性则返回'OK'字符串。除了'OK'的状态 字符串,statusText 属性还提供了一系列其他的值,如下

    注意:以上教程均来自 北风网,并非本人原创。

  • 相关阅读:
    页面返回顶部的方法总结
    举个栗子学习JavaScript设计模式
    深入理解css3中nth-child和 nth-of-type的区别
    HTML5笔记2——HTML5音/视频标签详解
    Chrome DevTools – 键盘和UI快捷键参考
    js中this关键字测试集锦
    JavaScript学习总结(三)——this、原型、javascript面向对象
    javascript移动设备Web开发中对touch事件的封装实例
    手机兼容集锦
    谈谈常用清除浮动的方法
  • 原文地址:https://www.cnblogs.com/xiaoduc-org/p/5022138.html
Copyright © 2011-2022 走看看