首页
会员中心
到顶部
到尾部
JavaScript教程

AJAX - 服务器响应

时间:2020/11/2 14:51:46  作者:  来源:  查看:0  评论:0
内容摘要:AJAX - 服务器响应AJAX 请求AJAX XML 文件onreadystatechange 属性readyState 属性存留 XMLHttpRequest 的状态。onreadystatechange 属性定义当 readyState 发生变化时执行的函数。status ...

AJAX - 服务器响应

onreadystatechange 属性

readyState 属性存留 XMLHttpRequest 的状态。

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

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

属性描述
onreadystatechange定义了当 readyState 属性发生改变时所调用的函数。
readyState

保存了 XMLHttpRequest 的状态。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 正在处理请求
  • 4: 请求已完成且响应已就绪
status
  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Page not found"

如需完整列表,请访问 Http 消息参考手册

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

每当 readyState 发生变化时就会调用 onreadystatechange 函数。

readyState4status200 时,响应就绪:

实例

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", "ajax_info.txt", true);    xhttp.send(); } 

亲自试一试

注释:onreadystatechange 被触发五次(0-4),每次 readyState 都发生变化。

使用回调函数

回调函数是一种作为参数被传递到另一个函数的函数。

如果您的网站中有多个 AJAX 任务,那么您应该创建一个执行 XMLHttpRequest 对象的函数,以及一个供每个 AJAX 任务的回调函数。

该函数应当包含 URL 以及当响应就绪时调用的函数。

实例

loadDoc("url-1", myFunction1);loadDoc("url-2", myFunction2);function loadDoc(url, cFunction) {  var xhttp;  xhttp = new XMLHttpRequest();  xhttp.onreadystatechange = function() {    if (this.readyState == 4 && this.status == 200) {      cFunction(this);    }  };  xhttp.open("GET", url, true);  xhttp.send();}function myFunction1(xhttp) {  // action goes here } function myFunction2(xhttp) {  // action goes here } 

亲自试一试

服务器响应属性

属性描述
responseText获取字符串形式的响应数据
responseXML获取 XML 数据形式的响应数据

服务器响应方法

方法描述
getResponseHeader()从服务器返回特定的头部信息
getAllResponseHeaders()从服务器返回所有头部信息

responseText 属性

responseText 属性以 JavaScript 字符串的形式返回服务器响应,因此您可以这样使用它:

实例

document.getElementById("demo").innerHTML = xhttp.responseText;

亲自试一试

responseXML 属性

XML HttpRequest 对象有一个內建的 XML 解析器。

ResponseXML 属性以 XML DOM 对象返回服务器响应。

使用此属性,您可以把响应解析为 XML DOM 对象:

实例

请求文件 music_list.xml,并对响应进行解析:

xmlDoc = xhttp.responseXML;txt = "";x = xmlDoc.getElementsByTagName("ARTIST");for (i = 0; i < x.length; i++) {  txt += x[i].childNodes[0].nodeValue + "<br>";  }document.getElementById("demo").innerHTML = txt;xhttp.open("GET",  "music_list.xml", true);xhttp.send();

亲自试一试

您将在本教程的 DOM 章节学到更多有关 XML DOM 的知识。

getAllResponseHeaders() 方法

getAllResponseHeaders() 方法返回所有来自服务器响应的头部信息。

实例

var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {  if (this.readyState == 4 && this.status == 200) {    document.getElementById("demo").innerHTML = this.getAllResponseHeaders();  }};

亲自试一试

getResponseHeader() 方法

getResponseHeader() 方法返回来自服务器响应的特定头部信息。

实例

var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {  if (this.readyState == 4 && this.status == 200) {    document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");  }};xhttp.open("GET", "ajax_info.txt", true);xhttp.send(); 

亲自试一试



相关评论
广告联系QQ:45157718 点击这里给我发消息 电话:13516821613 杭州余杭东港路118号雷恩国际科技创新园  网站技术支持:黄菊华互联网工作室 浙ICP备06056032号