喜迎
牛年

前端开发 - AJAX 的使用

Posted by 陈陈菌 on 2020-12-08
Estimated Reading Time 3 Minutes
Words 891 In Total
Viewed Times

AJAX,是前端开发的 “艺术”。它能够让 网页 实现浏览器不重新加载而更新网页内容,即 (Asynchronous JavaScript and XML) 异步 JavaScript 和 XML。

AJAX 不是一种新的编程语言,是一种 JavaScript 和 服务器数据交互的技术,只要你的浏览器能够支持 JavaScript,就可以使用 AJAX 这种技术。当然(排除 IE5 或 IE6 较老的浏览器) 这就需要用另一种方法.
这篇笔记中会说到兼容性的解决。

XMLHttpRequest

要想知道 AJAX 如何实现需要了解 XMLHttpRequest 对象,它的主要用途于服务器交换数据。
1.当我们需要将请求发送到服务器,我们需要建立一个 XMLHttpRequest 对象

1
var xmlhttp = new XMLHttpRequest();

2.设置请求方式和请求地址

1
xmlhttp.open(method, url, async);

其中:method 为请求类型(GET或POST) url 为请求地址 async 为异步(false)或同步(false)

3.发送请求

1
xmlhttp.send();

4.监听请求状态的变化

1
2
3
4
5
6
7
8
9
10
11
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
console.log("请求中");
// 处理返回的结果
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp == 304) {
console.log("请求成功");
} else {
console.log("请求失败");
}
}
}

readyState

状态 说明
0 请求未初始化
1 服务器连接已建立
2 请求已接受
3 请求处理中
4 请求已完成,并响应就绪

status

状态 说明
200 OK
404 未找到

(对于更多的 HTTP状态码可以看博主的这篇笔记:https://blog.glumi.cn/HTTP状态码整理/index.html)


jQuery 实现 Ajax 请求

因为原生 JavaScript 实现起来麻烦,这种技术还可以使用 jQuery 来实现。jQuery 给我们提供了很多 AJAX 的方便易用的写法。

load 加载
方法从服务器加载数据,并把返回的数据放入被选元素中。

1
$(DOM).load(URL,data,callback);

get 请求

1
$.get(URL,callback);

post 请求

1
$.post(URL,callback);
参数 说明
URL 必需的-请求的 URL
data 可选的-数据
callback 可选的-调用的函数

服务器响应

如果获得来自服务器的响应,原生 js 可以使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。下面将通过一个实例来演示 Ajax 请求后,服务器作出的响应.

html

1
<button>按钮</button>

php

1
<?php echo "后端 响应成功"; ?>

javaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.onload = function () {
var oBtn = document.querySelector("button");
oBtn.onclick = function () {
// 1.创建一个异步对象
var xmlhttp = new XMLHttpRequest();
// 2.设置请求方式和请求地址
xmlhttp.open("GET", "index.php", true);
// 3.发送请求
xmlhttp.send();
// 4.监听状态的变化
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
// 5.处理返回的结果
console.log("接受服务器返回信息");
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp == 304) {
alert(xmlhttp.responseText);
} else {
alert("请求失败");
}
}
}
}
}

1

兼容性的解决

最后。还是得讲一下关于 IE5、IE6 等较老浏览器兼容问题。可以使用以下这种方法来解决兼容性问题。

1
2
3
4
5
6
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

对于请求类型

Get 请求比 Post 请求简单、快。

  • 简单易用,速度快
  • 不可发送大量数据
  • 无法使用缓存
  • 发送包没 Post 稳定
  • 不安全

Post 请求比 Get 请求稳定可靠。

  • 使用麻烦,速度慢
  • 可发送大量数据
  • 可使用缓存
  • 发送包比 Get 稳定
  • 对比Get相对安全

应用场景

  • Get :用于提交非敏感数据和小数据
  • Post:用于提交敏感数据和大数据