my Ajax

LOGO
AJAX相关知识
同步交互和异步交互的区别

LOGO
Ajax的好处
1.Ajax最大的好处就是可以实现页面局部刷新 可以 只更改页面中需要更改滴数据 而不用刷新整个页面。 这样节省了我们的流量，并且执行速度得到了很大 的提升，更重要的是我们用户的一些操作不会被中 断。（正如我们刚才所举的例子，正在观看视频的 精彩处，忍不住发表看法，不会造成整个页面的刷 新 ，视频不会重新开始）

LOGO
Ajax缺点
3、另外，像其他方面的一些问题，比如说 违背了url和资源定位的初衷。例如，我给你 一个url地址，如果采用了ajax技术，也许你 在该url地址下面看到的和我在这个url地址 下看到的内容是不同的。这个和资源定位的 初衷是相背离的。

LOGO
jQuery 介绍
jQuery 是一个 JavaScript 库，有助于简化 JavaScript 以及 Ajax 编程 。 jQuery 是由 John Resig 2006年初创建的，封装了 JavaScript、DOM、Ajax 等的复杂操作，相信在学 习的过程中，大家会喜欢它的。 jQuery 有独特的基本原理，可以简洁的表示常见的复 杂代码。 jQuery 目前有成熟的核心代码，还有非常丰富的 UI 组件，涵盖了 Web 开发中绝大部分的页面控件，在后 面的课程中给大家介绍几种。
接收请求

LOGO
接收请求

LOGO
接收请求

LOGO
接收请求

LOGO
AJAX开发框架
开发框架介绍

LOGO
赋值和取值

jQuery 可以使用同一个函数实现给页面中某个元素 赋值和取值； 代码如下： $(“#msg”).html(); //返回 id=msg 的元素节点的 html 内容 $(“#msg”).html(“<b>new Content</b>”); //将新内容写入id=msg 的 元素中 $(“#msg”).text(); //返回 id=msg 的元素节点的文本内容 $(“#msg”).text(“new Content”); //将文本写入 id=msg 的元素节点中 $(“#msg”).height(); //返回 id=msg 的元素的高度 $(“#msg”).height(“300”); //将 id=msg 的元素高度设为 300 $(“input”).val(“”); //返回表单的 value 值 $(“input”).val(“test”); //将表单的 value 值设置为 test $(“#msg”).click() ; //触发 id=msg 的元素的单击事件 $(“#msg”).click(fn) ; //为id=msg 的元素的单击事件添加函数
LOGO
AJAX开发框架
C、发出HTTP请求

LOGO
AJAX开发框架
C、发出HTTP请求

LOGO
AJAX开发框架
D、处理服务器返回的信息

LOGO
AJAX开发框架
D、处理服务器返回的信息

LOGO
Ajax的好处
2.可以把以前一些服务器负担的工作转嫁到客 户端，利用客户端闲置的能力来处理，减轻服 务器和带宽的负担，节约空间和宽带租用成本， 并且减轻服务器的负担。

LOGO
Ajax的缺点
1、ajax干掉了back按钮，即对浏览器后退 机制的破坏。后退按钮是一个标准的web站 点的重要功能，但是它没法和js进行很好的 合作。这是ajax所带来的一个比较严重的问 题，因为用户往往是希望能够通过后退来取 消前一次操作的。

LOGO
Ajax的缺点
那么对于这个问题有没有办法？答案是肯定的， 用过Gmail的知道，Gmail下面采用的ajax技术 解决了这个问题，在Gmail下面是可以后退的， 但是，它也并不能改变ajax的机制，它只是采 用的一个比较笨但是有效的办法，即用户单击 后退按钮访问历史记录时，通过创建或使用一 个隐藏的IFRAME来重现页面上的变更。（例 如，当用户在Google Maps中单击后退时，它 在一个隐藏的IFRAME中进行搜索，然后将搜 索结果反映到Ajax元素上，以便将应用程序状 态恢复到当时的状态。）

LOGO
Ajax的缺点
虽然说这个问题是可以解决的，但是它所带 来的开发成本是非常高的，和ajax框架所要 求的快速开发是相背离的。这是ajax所带来 的一个非常严重的问题。

LOGO
Ajax的缺点
2、安全问题
技术同时也对IT企业带来了新的安全威胁， ajax技术就如同对企业数据建立了一个直接通 道。这使得开发者在不经意间会暴露比以前更 多的数据和服务器逻辑。ajax的逻辑可以对客 户端的安全扫描技术隐藏起来，允许黑客从远 端服务器上建立新的攻击。还有ajax也难以避 免一些已知的安全弱点，诸如跨站点脚步攻击、 SQL注入攻击和基于credentials的安全漏洞等。

LOGO
什么是Ajax

LOGO
什么是Ajax

LOGO
Ajax的发展
该技术在1998年前后得到了应用。允许客户端脚本发 送HTTP请求(XMLHTTP)的第一个组件由Outlook Web Access小组写成。该组件原属于微软Exchange Server， 并且迅速地成为了Internet Explorer 4.0[3]的一部分。 部分观察家认为，Outlook Web Access是第一个应用 了Ajax技术的成功的商业应用程序，并成为包括 Oddpost的网络邮件产品在内的许多产品的领头羊。 但是，2005年初，许多事件使得Ajax被大众所接受。 Google在它著名的交互应用程序中使用了异步通讯， 如Google讨论组、Google地图、Google搜索建议、 Gmail等。
LOGO
发送请求

LOห้องสมุดไป่ตู้O
发送请求

LOGO
发送请求

LOGO
接收请求

LOGO
接收请求

LOGO
$(“div”).show(); //按照 html 选择 $("p").css("background", "#ff0000"); // $("#sampleText").html("Hi"); //按照 ID 选择 $(“.redBack”).css(“background”, “#ff0000”); //按照 CSS 选择

LOGO
jQuery是什么

LOGO
jQuery 基本语法
如何安装 jQuery <script type="text/javascript" src="jquery.js"></script> 如何调用 jQuery 要想安全、无错的调用 jQuery代码，必须把它们放 在一个函数 <script language=JavaScript> $(document).ready(function(){ //在这里写 jQuery 代码能够被正常调用 $("div").addClass("a"); }); </script>

LOGO
Ajax的前景
AJAX前景非常乐观，可以提高系统性能，优 化用户界面。AJAX现有直接框架AjaxPro，可 以引入AjaxPro.2.dll文件，可以直接在前台页 面JS调用后台页面的方法。但此框架与FORM 验证有冲突。 另微软也引入了AJAX组建，需要添加 AjaxControlToolkit.dll文件，可以在控件列表中 出现相关控件。
LOGO
AJAX应用到的技术

LOGO
AJAX应用到的技术

LOGO
AJAX应用到的技术

LOGO
AJAX应用到的技术

LOGO
发送请求


LOGO
Ajax的发展
Ajax这个词由《Ajax: A New Approach to Web Applications》一文所创，该文的迅速流传提高了 人们使用该项技术的意识。
在《Ajax: A New Approach to Web Applications》 Garrett讨论了如何消除胖客户端应用与瘦客 户应用之间的界限。

LOGO
jQuery选择器


jQuery 的根本在于它在页面上选择和操作某些元素的能力。 jQuery 创建了自己的选择语法，非常简单。它通过 HTML元素名、 ID、Class查找对象，返回的对象都是 jQuery 对象 jQuery 对象不能直接调用DOM定义的方法，只能使用jQuery API 中指定的方法 具体内容查看 jQuery API 帮助文档； 举例：

LOGO
什么是Ajax
Ajax是一种客户端方法，可以与 J2EE、.NET、 PHP、Ruby和CGI脚本交互，它并不关心服 务器是什么。 Ajax是Javascript中的一部分，其最重要的 一个对象是XMLHttpRequest（XHR）对象， 它早在IE 5中就已经出现了，大多数现代浏 览器都支持了该对象。

LOGO
传统网页与Ajax的比较

LOGO
传统网页与Ajax的比较

LOGO
Ajax工作原理

LOGO
Ajax包含的技术


LOGO
选择器
补充：
jQuery 可以合并搜索结果，可以在一个搜索中，将 多个搜索条件合并起来。通过使用 “,” 分隔每个搜 索条件，搜索将返回与搜索词匹配的一组结果
$(“p, span, div”).hide(); //按照 合并条件 选择

LOGO
浅谈Ajax
LOGO
什么是Ajax
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML技术）， 是指一种创建交互式网页应用的网页开发技 术。核心是JavaScript和XMLHttpRequest。 XMLHttpRequest负责发送异步请求和接收 异步响应消息，JavaScript负责在浏览器端 实现所有程序逻辑。
LOGO
AJAX开发框架
A、初始化XMLHttpRequest对象

LOGO
AJAX开发框架
A、初始化XMLHttpRequest对象

LOGO
AJAX开发框架
B、指定相应处理函数