AJAX了解
作者:互联网
1.简介
AJAX = Asynchronous JavaScript And XML.
AJAX 并非编程语言。
AJAX 仅仅组合了:
浏览器内建的 XMLHttpRequest 对象(从 web 服务器请求数据)
JavaScript 和 HTML DOM(显示或使用数据)
Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据,但将数据作为纯文本或 JSON 文本传输也同样常见。
作用:
Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分,而不需要重新加载整个页面。
2.如何工作
网页中发生一个事件(页面加载、按钮点击)
由 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 对象方法
XMLHttpRequest 对象属性
4.向服务器发送请求
如需向服务器发送请求,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xhttp.open(“GET”, “ajax_info.txt”, true);
xhttp.send();
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 文件进行交互式通信。
标签:XMLHttpRequest,请求,GET,xhttp,AJAX,了解,服务器 来源: https://blog.csdn.net/zhazhali_fenqi/article/details/120101397