[音乐播放] 道格·劳埃德:所以多一个 那种概念了 排序的保护伞下瀑布 JavaScript是一种叫AJAX。 直到此时,我们的 使用JavaScript交互 已被限制推 按钮,有事。 具体而言,在 发生的事情 我们的网站的外观和感觉的变化。 对? 像,特别是在 文档对象模型的视频, 我改变了背景色。 但是,当我这样做,我没有 做任何特殊的额外的请求。 我没有要求了 服务器给我一个新的一页。 我只是改变了我已经有了。 我没有重装我的网页, 而事情的确改变了, 所以这是很大的。 但肯定有一些 手动的用户交互参与。 AJAX是一个很酷的技术,它允许 我们更新页面内容, 而不仅仅是它的外表和 感觉,无需重新加载。 并通过具体什么时候我 说更新网页的内容, 我不是说我们重写 使用JavaScript的网页。 我是说,我们其实要求 从服务器的详细信息 无需重新载入我们的页面。 现在那种有点的 更先进的技术 我们要谈 关于这部影片。 我们将有一些互动。 但是,当我们这样做,我会是 发出请求到万维网服务器。 在这种情况下,只是什么 运行我的Apache Web服务器。 我将要作出更多 请求,而我访问一个网页, 但我的网页不会刷新。 它只是要 异步更新我的网页。 而这,其实, 这AJAX表示, 是异步JavaScript和XML。 XML是另一种标记 语言,你可以排序的 想起来了,就像HTML。 这是不太一样的东西,但 它基本上只是一种标记语言。 所以这是一个异步 JavaScript和标记语言。 因此,为了使用该 AJAX technique-- AJAX 不是单独的编程语言。 这只是形式的 集techniques--我们的 需要创建一个特殊的 JavaScript对象,其中 被称为一个XMLHttpRequest。 现在,它是很容易做到这一点。 我们只说无功,无论 我们要调用这个对象, 等于新的XMLHttpRequest。 现在,我们现在已经获得 一个AJAX类的对象, 或者一个XMLHttpRequest 对象,这将允许 我们异步更新我们的页面。 之后,我们已经得到了这个新 对象,XMLHttpRequest的, 我们必须做一些事来了 onreadystatechange的行为。 的onreadystatechange 行为实际上只是 当你提出要求 到一个网页,在网页 经过许多步骤。 首先,一个请求未被发送。 然后,该请求已 发送,但没有采取行动。 然后请求已经采取行动。 然后该请求是 被发回给你。 然后,该请求是 在你的页面完全加载。 那些是不同的状态。 因此,我们需要设置我们的 新的XMLHttpRequest对象 更改就绪状态发生变化时。 而通常情况下,我们做到这一点, 定义一个匿名函数,该函数 我们熟悉的 JavaScript的现在, 被称为就绪状态发生变化时。 这真的不是远不止于此。 我们只是被限定 那种匿名函数,喜欢什么 我们正在做的 JavaScript的,在这里我们将 有匿名函数 对点击响应的, 或者当我们在做的地图 在一个阵列中的各个对象。 事情发生时, 东西被点击。 在这种情况下,它只是东西 发生在我们的页面的状态 的变化。 有两个其他属性 被排序of--他们不 这是唯一的属性 固有的XMLHttpRequest, 但他们非常重要的。 有一种叫做readyState的, 正如你可能已经猜到了, 是的onreadystatechange有关。 这实际上告诉你 readyState的是什么。 0,1,2,3和4是 可能性有, 和排序,他们大致 对应于什么 我只是在谈论一秒钟前。 然后地位,这 希望如果一切正常, 是200,这是短 对,当然,OK, 这是我们所熟悉的从http。 因此,我们希望我们的准备状态 为四,而我们的状态是200。 如果我们的准备状态 为四,并且响应 准备好被提上 页,且状态为200, 我们能够做 一切顺利, 现在我们可以异步 更新我们的网页 而无需重新加载 它的全部内容。 之后我们定义会发生什么 到onreadystatechange的行为, 我们已经检查过的readyState 是4和状态是200, 那么我们需要做的是 打开一个异步 的要求,这是刚刚制作 一个HTTP一般GET请求。 只是这样做编程, 而不是通过我们的网络浏览器。 然后我们发送请求。 那么,这也许 看起来像背景? 因此,这里的一个函数, 用AJAX请求交易。 好不好? 我也随便说 它接受一个参数。 而这一类的 这里一般的骨架。 开始的时候,我们得到 自己一个新的XMLHttpRequest对象。 然后,我需要设置 onreadystatechange的行为。 所以我要说 当readyState的变化, 我希望你能调用这个函数。 这是会问 问题,如果readyState的 是4,如果readyState的已改变 为4,状态为200, 所以我们有一个成功的请求,我 想要做一些事来的页面。 我们来看看 在一个例子什么 的东西可能是在一秒钟。 那么,现在我已经定义 我的匿名函数, 我的响应函数,只要 readyState的变化。 于是我只需要打开一个 要求,使用Open方法。 然后,我将请求发送。 让我们来看看 一个更具体的例子 什么AJAX可以在我们的网页做。 所以,我这里有一个很简单的 所谓home.html的页面。 而且我有一个信息去 在这里和某种形式的下拉菜单中。 我们会在一秒钟内重温这一点。 但我认为,我们现在应该采取 看看实际的源代码。 所以,我要打开home.html的。 我们可以看到这是怎么回事。 所以,起来在最高层在这里,我有 一些JavaScript的东西,是怎么回事。 在这里,我显然有 一个div一个ID为infodiv, 有些信息 会去那里。 然后,我有这样的形式。 而这里面 形式,我有话 被称为选择,这 仅仅是一个下拉菜单 与一群不同的选择。 而且很显然,当改变,当 已被选择的选项 变了,我要去打电话 一些功能cs50Info, 然后我要去 传中THIS.VALUE, 其中,这是指 该选项被选中, 和值是这些人在这里,选项 值=等于空,“布隆伯格” “鲍登”,“陈”和“马兰”。 那么,实际上可能 发生在这里,当我做到这一点? 那么,让我们一起来 看blumberg.html。 看起来这只是一个 摘录一些HTML的。 而事实上,我所希望 即将在这里发生 是我将能够堵塞 这个网站直接进入我的网页 而无需重新加载 的页面,使得当 我从下拉列表中选择汉娜 菜单中,约汉娜的信息, 特别是,该信息 在这里blumberg.html, 是什么显示在页面上。 而且我没有刷新。 如果我选择了别人, 他们的信息会显示出来。 我该怎么做呢? 再次,这需要 我们可以使用一些AJAX。 因此,我们将开辟ajax.js. 这里是该函数,cs50Info。 如果名字是什么,我回。 我不会,如果做任何事情 空的选项已被选定。 否则,我要去 创建一个新的XMLHttpRequest。 然后,我会说,当 readyState的变化,调用这个函数。 而如果readyState为 4,状态为200, 这里有一点点 jQuery的第13行的。 但是,所有我做的是说, 改变infodiv的内容 是什么我回来作为 响应从我的HttpRequest。 什么是我的HttpRequest? 嗯,这是正确的 在这里在线18和19。 第18行,我基本上准备 一个GET请求名称+ html的。 再次,名字在这里是 这是争论 传过来的参数cs50Info。 所以基本上,我在路过别人的 名字,这是一组选项 我们在看到 下拉菜单的形式。 我得到这个名字。 而且我说我想你 请获得我file.html, 然后发送该请求。 并且使得onreadystatechange的是要 在听和等待,等待 等待,直到readyState的 为4,状态为200。 因此,它已经准备好提供服务, 并请求成功。 然后如果是这样,这将 改变infodiv的内容 要我回来的响应文本。 因此,让我们看看这个 可能实际工作。 因此,我们将头部到我的浏览器 窗口,我们将看看在这里。 因此,让我们一起来看看 怎么在这里对AJAX。 因此,我们将选择谁 从下拉菜单中。 所以在此情况下,让我们 只是选择汉娜。 并注意汉娜的 信息已改变, 但我没有any--我 页面并没有完全重装。 的东西留了下来。 大部分的东西留了下来。 AJAX测试没有变化。 按钮本身,这 下拉菜单并没有改变。 但信息有没有改变。 和取决于如何 很快我的电脑动作, 你实际上可能会看到的内容 消失,然后重新出现真正 很快。 这是内容 从infodiv删除, 然后以一取代 新的异步请求。 所以,如果我切换它被说, Rob--并再次,看一看, 也许我们将真正看到它 消失,重新出现快速。 你看到了吗? 它是如何只是突然离开, 然后将其重新填充? 这是AJAX请求 排序发生。 等视 人我选择,我 使得不同的异步 要求到不同的文件 我有我的服务器上。 及的内容,我 infodiv正在更新, 在此基础上对这些我选择。 所以这就是所有要做就是AJAX。 它使我们能够使这些异步 请求,更新到页面。 而不必 刷新整个页面, 我们将获得新的 从它的内容通过 一个新的新鲜的请求到服务器。 因此,我们的网页能够成为 相当多的活力。 当我们得到更多的 和更先进的,则 可能会像 比方说,你的电子邮件收件箱, 在这里,你不必做任何事情。 你不必点击 下拉菜单或点击任何东西, 和突然,你的最新的 电子邮件显示在顶部。 这也只是一个Ajax请求。 阿贾克斯请求您 服务器,电子邮件服务器, 送过来的所有信息 有关最新的电子邮件, 并改变你在看 屏幕是你最新的一组电子邮件。 如果你有一个新的 该分区的存在,则内容 将改变,以反映 的更新的内容。 我是道格·劳埃德。 这是CS50。