js教程（10） -- AJAX

2019-10-15:

学习内容：

一、What is AJAX？

　　AJAX 并不是编程语言。

　　AJAX 是一种从网页访问 Web 服务器的技术。

　　AJAX 代表异步 JavaScript 和 XML。

您能够：

不刷新页面更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据

原理：

　　AJAX 仅仅组合了：

　　浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
JavaScript 和 HTML DOM（显示或使用数据）

　　Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。

　　Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面

网页中发生一个事件（页面加载、按钮点击）
由 JavaScript 创建 XMLHttpRequest 对象（核心）
XMLHttpRequest 对象向 web 服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由 JavaScript 读取响应
由 JavaScript 执行正确的动作（比如更新页面）

🌰：

html的指令：

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>让 AJAX 更改这段文本</h2>
  <button type="button" onclick="loadDoc()">更改文本</button>
</div>

</body>
</html>

AJAX做的事情：

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);  // AJAX 内容
  xhttp.send();
}

二、XMLHttpRequest 对象：

　　所有现代浏览器都支持 XMLHttpRequest 对象。

　　XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。

（1）创建：

variable = new XMLHttpRequest();

（2）跨域访问

　　出于安全原因，现代浏览器不允许跨域访问。

　　这意味着尝试加载的网页和 XML 文件都必须位于相同服务器上。

（3）对象方法：

（4）对象属性：

i。onreadystatechange 属性：（async参数为true时才有效）

　　通过 XMLHttpRequest 对象，您可以定义当请求接收到应答时所执行的函数。

　　这个函数是在 XMLHttpResponse 对象的 onreadystatechange 属性中定义的

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }   // 4 200 是有原因的，请看四、服务器响应部分
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

三、向服务器发送请求：

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

（1）操作：

（2）GET or POST？

　　GET 比 POST 更简单更快，可用于大多数情况下。

　　不过，请在以下情况始终使用 POST：

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

（3） POST的配置：

　　如需像 HTML 表单那样 POST 数据，请通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定您需要发送的数据：

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

（4）open（GET, url, true）方法：

　　 url 参数，是服务器上文件的地址：

　　该文件可以是任何类型的文件，如 .txt 和 .xml，或服务器脚本文件，如 .asp 和 .php（它们可以在发送回响应之前在服务器执行操作）。

　　async参数：

　　异步请求时，必须为true：

　　发送异步请求对 web 开发人员来说是一个巨大的进步。服务器上执行的许多任务都非常耗时。在 AJAX 之前，此操作可能会导致应用程序挂起或停止。

　　通过异步发送，JavaScript 不必等待服务器响应，而是可以：

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

　　有时 async = false 用于快速测试。你也会在更老的 JavaScript 代码中看到同步请求。由于代码将等待服务器完成，所以不需要 onreadystatechange 函数：

　　不推荐同步的 XMLHttpRequest (async = false)，因为 JavaScript 将停止执行直到服务器响应就绪。如果服务器繁忙或缓慢，应用程序将挂起或停止。

四、服务器响应：（跟onreadystatechange 属性密切相关）：

　　readyState 属性存留 XMLHttpRequest 的状态。

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

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

　　当 readyState 为 4，status 为 200 时，响应就绪

（1）服务器的响应属性：

a) responseText 属性：从服务器返回特定的头部信息

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

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

b）responseXML 属性：从服务器返回所有头部信息

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

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

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

<script>
var xhttp, xmlDoc, txt, x, i;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    xmlDoc = this.responseXML;
    txt = "";
    x = xmlDoc.getElementsByTagName("ARTIST");
    for (i = 0; i < x.length; i++) {
      txt = txt + x[i].childNodes[0].nodeValue + "<br>";
    }
    document.getElementById("demo").innerHTML = txt;
  }
};
xhttp.open("GET", "/demo/music_list.xml", true);
xhttp.send();
</script>

（2）服务器响应方法：

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

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

b、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();

五、配合回调函数实现多个AJAX任务：

　　如果您的网站中有多个 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
 }

posted @ 2019-10-15 19:37 Marvin_Tang 阅读(308) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Marvin_Tang