第一百七十三节,jQuery,Ajax

jQuery,Ajax

学习要点:

  1.Ajax 概述

  2.load()方法

  3.$.get()和$.post()

  4.$.getScript()和$.getJSON()

  5.$.ajax()方法

  6.表单序列化

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

一.Ajax 概述

Ajax 这个概念是由 Jesse James Garrett 在 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)。

load()方法获取一个外部文件数据写入一个div

外部文件new.html

<span>玉秀文化传播</span>
<span>www.jxiou.com</span>

本页html

<input type="button" value="异步获取数据" />
<div id="box"></div>

jQuery获取

    $(‘input‘).click(function () {
        $(‘#box‘).load(‘new.html‘);  //获取new.html的数据写入#box元素
    });

获取后的本页代码

<input value="异步获取数据" type="button">
<div id="box">
    <span>玉秀文化传播</span>
    <span>www.jxiou.com</span>
</div>

load()方法获取一个外部文件数据筛选出指定数据写入一个div

时间: 2024-10-02 20:10:38

第一百七十三节,jQuery,Ajax的相关文章

第十节(jQuery - AJAX )

1:jQuery - AJAX 简介 AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新 什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示 关于 jQuery 与 AJAX jQuery 提供多个与 AJAX 有关的方法. 通过 jQuery AJAX 方法,您能够使用 HTTP Get

jQuery AJAX 网页无刷新上传示例

新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新.不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观).网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大.外观复杂,欲仅取出部分功能来引用,反而不易

jQuery Ajax 请求报长度过长的错误:Error during serialization or deserialization using the JSON JavaScriptSerializer

{"Message":"Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set 在web项目的web.config <configuration>节下增加 <system.web.extensions>    <scripting>    

详解JQuery Ajax 在asp.net中使用总结

自从有了JQuery,Ajax的使用变的越来越方便了,但是使用中还是会或多或少的出现一些让人短时间内痛苦的问题.本文暂时总结一些在使用JQuery Ajax中应该注意的问题,如有不恰当或者不完善的地方,欢迎大家指正和补充. 本文将从Ajax请求aspx.ashx和asmx三种方式讨论. 首先看看请求aspx的情况 Aspx页面的Ajax请求可以有两种方式: 1. 通过使用get或者post方法,传递页面地址为url参数的值,并附带一些标记参数,直接请求.这种方式的Ajax被一些人誉为"假的Aja

Jquery Ajax调用asmx出错问题

1.//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释.      [System.Web.Script.Services.ScriptService] 这个错误已经明显提示了,犯错几率不大. 2.在web.config的<system.web></system.web>中间加入如下配置节内容 <webServices>         <protocols>            <add name=&quo

JQuery Ajax 在asp.net中使用总结

自从有了JQuery,Ajax的使用变的越来越方便了,但是使用中还是会或多或少的出现一些让人短时间内痛苦的问题.本文暂时总结一些在使用JQuery Ajax中应该注意的问题,如有不恰当或者不完善的地方,欢迎大家指正和补充. 本文将从Ajax请求aspx.ashx和asmx三种方式讨论. 首先看看请求aspx的情况 Aspx页面的Ajax请求可以有两种方式: 1. 通过使用get或者post方法,传递页面地址为url参数的值,并附带一些标记参数,直接请求.这种方式的Ajax被一些人誉为“假的Aja

[转]JQuery Ajax 在asp.net中使用总结

本文转自:http://www.cnblogs.com/acles/articles/2385648.html 自从有了JQuery,Ajax的使用变的越来越方便了,但是使用中还是会或多或少的出现一些让人短时间内痛苦的问题.本文暂时总结一些在使用JQuery Ajax中应该注意的问题,如有不恰当或者不完善的地方,欢迎大家指正和补充. 本文将从Ajax请求aspx.ashx和asmx三种方式讨论. 首先看看请求aspx的情况 Aspx页面的Ajax请求可以有两种方式: 1. 通过使用get或者po

ThinkPHP JQuery Ajax 的实现实例

ThinkPHP JQuery Ajax ThinkPHP 框架和客户端是完全分离的,没有任何的依赖,而服务端返回 ajaxReturn 方法也是通用的.在<ThinkPHP Ajax 使用详解及实例>一文中,讲述的是 ThinkAjax 类库结合 prototyep 和 mootools 来实现的 Ajax .事实上可以使用任何 Js 类库来实现 ThinkPHP Ajax ,本文就以 JQuery 来实现<ThinkPHP Ajax 使用详解及实例>一文中同样的功能. Js 类

jquery ajax 方法及各参数详解

jquery ajax 方法及各参数详解 1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分

Django1.7+JQuery+Ajax集成小例子

Ajax的出现让Web展现了更新的活力,基本所有的语言,都动态支持Ajax与起服务端进行通信,并在页面实现无刷新动态交互. 下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证用户注册时,用户名存在不存在的一个小应用.注意,验证存在不存在使用的是Ajax的方式,不用让用户点击按钮验证是否存在. 截图如下: 页面HTML代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta