Featured image of post Ajax

Ajax

废墟里的玫瑰依旧高贵

Ajax

Asynchronous javascript and xml AJAX 不是新的编程语言,而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件,但需要用户允许 JavaScript 在浏览器上执行。 XMLHttpRequest 只是实现 Ajax 的一种方式。

应用:

  • 运用 XHTML+CSS 来表达资讯;
  • 运用 JavaScript 操作 DOM(Document Object Model)来执行动态效果;
  • 运用 XML 和 XSLT 操作资料;
  • 运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换;

简介

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

Ajax是基于现有的internet标准 AJAX是基于现有的Internet标准,并且联合使用它们:

  • XMLHttpRequest对象(异步的与服务器交换数据)
  • JavaScript/DOM(信息显示/交互)
  • CSS (给数据定义样式)
  • XML (作为转换数据的格式)

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面:当您在谷歌的搜索框输入关键字时,JavaScript 会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。

XHR创建对象

AJAX-创建XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

XHR请求

AJAX - 向服务器发送请求

XMLHttpRequest 对象用于和服务器交换数据。

向服务器发送请求

如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。

通过 AJAX,JavaScript 无需等待服务器的响应,而是:

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理

XHR响应

AJAX - 服务器响应

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

XHR readyState

onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。 每当 readyState 改变时,就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。

使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数 如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。 该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同)

AJAX数据库

AJAX 可用来与数据库进行动态通信。

AJAX XML实例

最后更新于 Oct 19, 2024 20:02 CST
comments powered by Disqus
使用 Hugo 构建
主题 StackJimmy 设计