AJAX了解

1.简介
AJAX = Asynchronous JavaScript And XML.

AJAX 并非编程语言。

AJAX 仅仅组合了:
浏览器内建的 XMLHttpRequest 对象(从 web 服务器请求数据)
JavaScript 和 HTML DOM(显示或使用数据)
Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据,但将数据作为纯文本或 JSON 文本传输也同样常见。

作用:
Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分,而不需要重新加载整个页面。
2.如何工作
AJAX了解
网页中发生一个事件(页面加载、按钮点击)
由 JavaScript 创建 XMLHttpRequest 对象
XMLHttpRequest 对象向 web 服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由 JavaScript 读取响应
由 JavaScript 执行正确的动作(比如更新页面)
3.XMLHttp
创建 XMLHttpRequest 的语法是:

variable = new XMLHttpRequest();

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/example/js/ajax_info.txt", true);
  xhttp.send();
}
</script>

XMLHttpRequest 对象方法
AJAX了解
XMLHttpRequest 对象属性
AJAX了解
4.向服务器发送请求
如需向服务器发送请求,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xhttp.open(“GET”, “ajax_info.txt”, true);
xhttp.send();
AJAX了解

GET 还是 POST? GET 比 POST 更简单更快,可用于大多数情况下。

不过,请在以下情况始终使用 POST:

缓存文件不是选项(更新服务器上的文件或数据库) 向服务器发送大量数据(POST 无大小限制) 发送用户输入(可包含未知字符),POST 比
GET 更强大更安全

5.服务器响应
onreadystatechange 属性

readyState 属性存留 XMLHttpRequest 的状态。

onreadystatechange 属性定义当 readyState 发生变化时执行的函数。

status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。

readyState
保存了 XMLHttpRequest 的状态。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 正在处理请求
4: 请求已完成且响应已就绪

status
200: “OK”
403: “Forbidden”
404: “Page not found”

statusText 返回状态文本(例如 “OK” 或 “Not Found”)

responseText 获取字符串形式的响应数据
responseXML 获取 XML 数据形式的响应数据
getResponseHeader() 从服务器返回特定的头部信息
getAllResponseHeaders() 从服务器返回所有头部信息

6.XML文件
AJAX 可用于同 XML 文件进行交互式通信。

上一篇:HDOJ-1540(线段树+较复杂的单点修改和区间查询)


下一篇:AJAX 简介