AJAX学习

最新推荐文章于 2024-11-09 09:31:27 发布

wjfhhh

最新推荐文章于 2024-11-09 09:31:27 发布

阅读量68

点赞数

文章标签： ajax javascript

本文链接：https://blog.csdn.net/wjfhq/article/details/129581305

版权

AJAX允许不刷新页面更新内容，通过XMLHttpRequest对象实现后台与服务器的数据交换。它包括新建对象、定义状态变化处理函数、open方法设置请求类型和URL以及send方法发送请求。示例中展示了如何使用AJAX获取并显示本地文本文件的内容。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

`AJAX的四大好处：`

不刷新页面更新网页

在页面加载后从服务器请求数据

在页面加载后从服务器接收数据

在后台向服务器发送数据

一、AJAX是什么？

AJAX = Asynchronous JavaScript And XML.

二、AJAX的概述

Ajax 的核心是 XMLHttpRequest 对象

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

例：

（1）新建一个XMLHttpRequest的对象。

（2）定义当 readyState 属性发生变化时被调用的函数

（3）readystate的属性有四种，分别保存XMLHttpRequest的状态，每当 readyState 发生变化时就会调用 onreadystatechange 函数，如下面代码函数被触发五次（0-4）

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

（4）status：返回请求状态号

200: "OK"
403: "Forbidden"
404: "Not Found"

<!DOCTYPE html>
<html>
<body>

<h1>XMLHttpRequest 对象</h1>

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

<p>单击该按钮显示本地文件内容</p>

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

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest(); //(1)
  xhttp.onreadystatechange=function() { //(2)
    if (this.readyState == 4 /*(3)*/&& this.status == 200/*(4)*/) {
      document.getElementById("demo").innerHTML = this.responseText/*(5)*/;
    }
  };
  xhttp.open("GET", "./demo_get.asp.txt", true);/*(6)*/
  xhttp.send();
}
</script>

</body>
</html>

（5）responseText：以字符串返回响应数据

除此之外还有responseXML：以 XML 数据返回响应数据

（6）open：规定发送的请求

--method：GET，POST

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

--async：true为异步 false为同步

异步：

JavaScript 不必等待服务器响应，而是可以：在等待服务器响应时执行其他脚本，当响应就绪时处理响应。

同步：

不推荐使用，因为会占用响应时间，一般用于测试

--user ：可忽略，用于传递用户信息

--psw