JS AJAX

最新推荐文章于 2022-12-15 11:24:01 发布

Kedaya_7017

最新推荐文章于 2022-12-15 11:24:01 发布

阅读量144

点赞数

文章标签： ajax html

本文链接：https://blog.csdn.net/Kedaya_7017/article/details/120554306

版权

一、简介

1.功能：

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

2.AJAX 仅仅组合了：

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

3.工作原理：

网页中发生一个事件（页面加载、按钮点击）

由 JavaScript 创建 XMLHttpRequest 对象

XMLHttpRequest 对象向 web 服务器发送请求

服务器处理该请求

服务器将响应发送回网页

由 JavaScript 读取响应

由 JavaScript 执行正确的动作（比如更新页面）

二、XMLHttpRequest 对象（核心）

1.XMLHttpRequest 对象

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

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

2.创建 XMLHttpRequest 对象

variable = new XMLHttpRequest();

3.XMLHttpRequest 对象方法

方法	描述
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method, url, async, user, psw)	规定请求 method：请求类型 GET 或 POST url：文件位置 async：true（异步）或 false（同步） user：可选的用户名称 psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对

4.XMLHttpRequest 对象属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found" 如需完整列表请访问
statusText	返回状态文本（比如 "OK" 或 "Not Found"）

三、Ajax请求

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

方法	描述
open(method, url, async)	规定请求的类型 method：请求的类型：GET 还是 POST url：服务器（文件）位置 async：true（异步）或 false（同步）
send()	向服务器发送请求（用于 GET）
send(string)	向服务器发送请求（用于 POST）

方法

描述

open(method, url, async)

规定请求的类型

method：请求的类型：GET 还是 POST
url：服务器（文件）位置
async：true（异步）或 false（同步）

send()

向服务器发送请求（用于 GET）

send(string)

向服务器发送请求（用于 POST）

1.get or post

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

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

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

2.GET请求

<!DOCTYPE html>
<html>
<body>

<h1>XMLHttpRequest 对象</h1>

<button type="button" onclick="loadDoc()">请求数据</button>

<p id="demo"></p>

<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", "/demo/demo_get2.asp?fname=Bill&lname=Gates", true);
  xhttp.send();
}
</script>
 
</body>
</html>

3.POST请求

<!DOCTYPE html>
<html>
<body>

<h1>XMLHttpRequest 对象</h1>

<button type="button" onclick="loadDoc()">请求数据</button>

<p id="demo"></p>
 
<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("POST", "/demo/demo_post2.asp", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("fname=Bill&lname=Gates");
}
</script>

</body>
</html>

4.url-服务器上的文件

open() 方法的 url 参数，是服务器上文件的地址：

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

5.异步 - ture 还是 false？

如需异步发送请求，open() 方法的 async 参数必须设置为 true：

xhttp.open("GET", "ajax_test.asp", true);

服务器上执行的许多任务都非常耗时。在 AJAX 之前，此操作可能会导致应用程序挂起或停止。

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

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

四、 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 函数。

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

注释：onreadystatechange 被触发五次（0-4），每次 readyState 都发生变化。

Kedaya_7017

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS AJAX

一、简介1.功能：不刷新页面更新网页在页面加载后从服务器请求数据在页面加载后从服务器接收数据在后台向服务器发送数据2.AJAX 仅仅组合了：浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据） JavaScript 和 HTML DOM（显示或使用数据）3.工作原理：网页中发生一个事件（页面加载、按钮点击）由 JavaScript 创建 XMLHttpRequest 对象 XMLHttpRequest 对象向 web 服务器发送请求.
复制链接

扫一扫