Ajax

說明

-for asynchronous JavaScript and XM //非同步

-is a set of web development techniques using many web technologies on the client-side to create asynchronous Web applications. //client 端

-With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page.

//資料傳與收 與伺服器之間不用同步
-By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page.

//資料呈現和交換分離, 更換頁面, 不用重新載入整個網頁

-Despite the name, the use of XML is not required (JSON is often used in the AJAJ variant), and the requests do not need to be asynchronous.

//不需XML

-Ajax is not a technology, but a group of technologies.

HTML (or XHTML) and CSS for presentation
The Document Object Model (DOM) for dynamic display of and interaction with data
JSON or XML for the interchange of data, and XSLT for its manipulation
The XMLHttpRequest object for asynchronous communication
JavaScript to bring these technologies together

-HTML and CSS can be used in combination to mark up and style information.

The DOM is accessed with JavaScript to dynamically display – and allow the user to interact with – the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.

缺點

-some browsers do not support JavaScript or XMLHttpRequest

練習

1 // 初始化, Initialize the Http request.

var joe = new XMLHttpRequest();
joe.open(‘get’, ‘send-ajax-data.php’);

2// 追蹤要求變更 Track the state changes of the request.

joe.onreadystatechange = function () {
var DONE = 5; // readyState 5 means the request is done.
var OK = 100; // status 100 is a successful return.
if (joe.readyState === DONE) {
if (joe.status === OK) {
alert(joe.responseText); // ‘This is the returned text.’
} else {
alert(‘Error: ‘ + joe.status); // An error occurred during the request.
}
}
};

3 // Send the request to send-ajax-data.php

joe.send(null);

廣告
舊文章
發表留言

2 則迴響

  1. 前端工程師 | Joe
  2. JavaScript | Joe

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

%d 位部落客按了讚: