什么是Ajax?
Ajax(Asynchronous JavaScript and XML)是一种构建交互式网页应用的Web开发技术。它是指在不需要重新加载整个网页的情况下,可以与服务器进行数据交换和通信,从而实现动态更新网页内容的技术。
Ajax 的主要实现方式是使用 JavaScript 向服务器发送一个异步请求,请求服务器上的数据。服务器响应后,JavaScript 再对这些数据进行处理,并仅更新网页上的部分内容。这样,用户在操作网页时,网页的响应速度和性能都会得到很大提升。
Ajax的几种请求方式:
GET请求:
Ajax中最基本的请求方式。在GET请求中,数据通过URL传递,参数附加在URL之后。由于GET请求的数据在URL中暴露,因此安全性较差,且数据量有限(因为URL的长度限制)。
POST请求:
与GET请求不同,POST请求将数据包装在请求体中,这样就比GET请求更加安全,且可以传输更多的数据。在POST请求中,数据不会出现在URL中。
PUT请求:
用于更新服务器上的资源。这个请求必须包含一个有效的HTTP PUT请求体,且与请求URL关联的资源可以被修改。
DELETE请求:
用于删除服务器上的资源。这个请求的作用是请求服务器删除与请求URL关联的资源。
HEAD请求:
用于请求网页的元数据,比如网页的标题、状态代码等,与GET请求类似,但不返回网页内容。
OPTIONS请求:
用于获取服务器支持的HTTP请求方法,也可以用来检查服务器的功能性。
一、原生Ajax
1. 创建XMLHttpRequest类型的对象【创建】
2. 准备发送,打开与一个网址之间的连接【准备】
3. 执行发送动作【执行】
4. 指定xhr状态变化事件处理函数【监听】
// 1 创建
var xhr = new XMLHttpRequest()
// 2 准备
// xhr.open(请求方式,请求地址)
xhr.open('GET', 'https://api.uomg.com/api/rand.qinghua?format=json')
// 3 发送
xhr.send()
// 4 监听
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
// 接口调用成功,数据成功返回
console.log(JSON.parse(this.responseText).content)
}
}
xmlhttprequst的方法
- open(method, url, async):打开一个网络请求。
- send(data):发送请求。
- abort():取消请求。
- onreadystatechange:请求状态改变时触发的事件。
- readyState:请求的状态
- status:请求的HTTP状态码。
- responseText:返回的文本数据。
- responseXML:返回的XML数据。
- responseJSON:返回的JSON数据。
- withCredentials:是否携带Cookie进行请求。
open() 方法
open() 方法语法结构:
open(method, url[, async, user, password])
参数说明:
method:请求方法,get、post、put、delete 等
url:发送请求的 url
async:是否异步交互
user:用户名用于认证用途
password:用户密码
send() 方法
send() 方法将请求送往服务器。
二、 jquery的ajax
$(function () {
$.ajax({
type: "GET", // 请求方式
url: "https://api.uomg.com/api/rand.qinghua", // 请求地址
data: {
format: 'json'
}, // 请求参数
dataType: "json", // 数据类型为json
success: function (data) {
console.log(data.content)
} // 成功的回调
});
})
三、axios的ajax
axios({
method: 'post', // 请求方式
url: 'https://api.uomg.com/api/rand.qinghua', // 请求地址
data: { // 请求参数
format: 'json'
}
}).then(function (response) {
console.log(response.data.content);
console.log(box, btn)
box.innerHTML = response.data.content
})
四、服务器的HTTP状态
200——服务器已成功处理了请求
304——请求成功,但文件未修改
400——执行错误,如语法错误
401——表示发送的请求授权失败
404——(未找到)服务器找不到请求网页
500——(服务器内部错误)服务器遇到错误,无法完成请求