JavaScript--AJAX学习笔记（详解）

最新推荐文章于 2024-09-11 15:33:18 发布

马上就实现财富自由！！

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量104

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_67986791/article/details/129004662

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

AJAX的作用

不刷新页面更新网页

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

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

在后台向服务器发送数据

AJAX是什么

AJAX = Asynchronous JavaScript And XML.

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

代表了异步JavaScript和XML；

AJAX如何工作

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

由JavaScript创建XMLHttpRequest对象

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

服务器处理该请求

服务器将响应发送回网页

由JavaScript读取响应

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

AJAX实例解释

<!DOCTYPE html>
<html>
<body>

<div id='demo'>
    <h2>更新这段文本</h2>
    <button type='button' onclick='loadText()'>点击更新</button>   
</div>
<script>
function loadText(){
    var xhttp = new XMLHttpRqequest();
    xhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
            document.getElementByld("demo").innerHTML = 
            this.responseText;
        }
};
xhttp.open('GET',"../../..",true)
xhttp.send();
}
</script>

AJAX 的核心XMLHttpRequest对象

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

创建XMLHttpRequest对象

语法

variable = new XMLHttpRequest()

跨域访问

处于安全问题，现代游览器不允许跨域访问

因此尝试加载的网页和XML文件都必须位于相同服务器上

老版本的 Internet Explorer（IE5 和 IE6）

老版本的 Internet Explorer（IE5 和 IE6）不支持 XMLHttpRequest 对象。

为了对付 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象，亦或创建 ActiveXObject 对象

<!DOCTYPE html>
<html>
<body>
<h1>XMLHttpRequest 对象</h1>
<p id="demo">让 AJAX 改变这段文本。</p>
<button type="button" onclick="loadDoc()">更改内容</button>
<script>
function loadDoc() {
  var xhttp;
  if (window.XMLHttpRequest) {
    // 针对现代浏览器的代码
    xhttp = new XMLHttpRequest();
  } else {
    // 针对 IE6、IE5 的代码
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
//每当 readyState 发生变化时就会调用 onreadystatechange 函数,当 readyState 为 4，status 为 200 时，响应就绪
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/demo/js/ajax_info.txt", true);
  xhttp.send();
}
</script>
</body>
</html>

XMLHttpRequest 对象方法

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

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请求

如需向服务器发送请求，使用XMLHttpRequest对象的open()和send()

xhttp.open('GET','....',true)
xhhtp.send()

方法	描述
open(method,url,adync)	规定请求类型 method:请求的类型GET（）、POST（） url:服务器（文件）位置 async:true(异步)、flase(同步)
send()	向服务器发送请求GET
send(string)	向服务器发送请求给POST

GET和POST区别

GET比POST更快简单

POST情况：

缓存文件不是选项（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 无大小限制）

发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

异步--true还是false

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

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

在等待服务器响应时执行其他脚本

当响应就绪时处理响应

同步请求

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

参考链接：https://www.w3school.com.cn/js/js_ajax_php.asp

马上就实现财富自由！！

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript--AJAX学习笔记（详解）

不推荐同步的 XMLHttpRequest (async = false)，因为 JavaScript 将停止执行直到服务器响应就绪。为了对付 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象，亦或创建 ActiveXObject 对象。老版本的 Internet Explorer（IE5 和 IE6）不支持 XMLHttpRequest 对象。如需异步发送请求，open()的async参数必须设置为true。method:请求的类型GET（）、POST（）
复制链接

扫一扫

专栏目录