ajax技术知识总结

宋小羽 • 2022年6月20日 pm7:42 • JavaScript • 457 阅读

简述

ajax（Asynchronous JavaScript and XML）是一种异步的JavaScript和XML技术。可以使网页实现异步更新，即在不重新加载整个页面的情况下，与服务端进行少量数据交换，对网页的某部分内容进行更新。

创建对象

创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

1	var xhr = new XMLHttpRequest();

XMLHttpRequest对象属性

属性	描述
onreadystatechange	存储函数名，每当readyState的状态发生变化时，都会调用该函数。
readyState	一个完整的请求，XMLHttpRequest的状态会从0到4发生变化。 0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成，且响应已就绪
responsText	以文本形式返回响应。
responsXML	以XML格式返回响应
status	以数字返回状态（如成功200）
statusText	以字符串形式返回状态

XMLHttpRequest对象方法

方法	描述
abort()	取消当前请求。
getAllResponseHeaders()	以字符串形式返回完整的HTTP标头集。
getResponseHeader(headerName)	返回指定HTTP标头的值。
open(method, url, async, [username], [password]）	打开指定获取的方法和请求地址。
send(content)	发送获取请求。
setRequestHeader(label, value)	将标签/值对添加到要发送的HTTP标头中。

请求

xhr.open('GET', 'http://127.0.0.1:3000/', true)

1	xhr.open('GET', 'http://127.0.0.1:3000/', true)

open()方法参数详解如下：

method：请求的类型，值为GET或POST
url：文件在服务器上的位置
async：设置请求方式，true同步，false异步

GET请求速度较快，但以下场景建议使用POST请求：

向服务器发送大量的数据（POST请求没有长度限制）
发送用户输入的字符场景

响应

发送请求后，需要等待服务器处理并返回数据。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

基本使用

// 1. 创建xhr对象
var xhr = new XMLHttpRequest();
// 2. 获取请求信息
xhr.open('GET', 'http://127.0.0.1:3000/', true)
// 3. 发送请求
xhr.send();

// 4. 获取响应结果
xhr.onreadystatechange = function () {
  // 只有当readyState为4，且status等于200 才是成功的响应结果
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 响应成功
    console.log('res', xhr.responseText);
  }
}

// 1. 创建xhr对象

var xhr = new XMLHttpRequest();

// 2. 获取请求信息

xhr.open('GET', 'http://127.0.0.1:3000/', true)

// 3. 发送请求

xhr.send();

// 4. 获取响应结果

xhr.onreadystatechange = function () {

// 只有当readyState为4，且status等于200 才是成功的响应结果

if (xhr.readyState === 4 && xhr.status === 200) {

// 响应成功

console.log('res', xhr.responseText);

}

jQuery中的Ajax

浏览器提供的 XMLHttpRequest 用法比较复杂，所以jQuery对其进行了封装，提供一系列 Ajax 的函数，极大的降低了 Ajax 的使用难度。

$.get()

功能单一，只能发起 get 请求，从而将服务器上的资源请求到客户端上来使用。

$.get(url, [data], [callback])

1	$.get(url, [data], [callback])

参数详解

url string，必选，要请求的资源地址
data object，否，请求资源时携带的参数
callback function，否，请求成功时的回调函数

$.post()

功能单一，只能发起 post 请求，从而向服务器提交数据。

$.post(url, [data], [callback])

1	$.post(url, [data], [callback])

参数详解

url string，必选，提交数据的地址
data object，否，要提交的数据
callback function，否，请数据提交成功的回调函数

$.ajax()

功能综合，允许对 Ajax 请求进行更详细的配置。

$.ajax({
  type: '', // 请求的方式，例如 GET 或 POST
  url: '', // 请求的 URL 地址
  data: { }, // 请求携带的参数
  success: function(res) { } // 请求成功之后的回调函数
})

$.ajax({

type: '', // 请求的方式，例如 GET 或 POST

url: '', // 请求的 URL 地址

data: { }, // 请求携带的参数

success: function(res) { } // 请求成功之后的回调函数

})

示例如下：

// $.get请求不携带参数的情况
$.get('https://api.thecatapi.com/v1/images/search', function (res) {
  console.log(res)
})
// $.get请求携带参数的情况
$.get('https://api.thecatapi.com/v1/images/search', { limit: 10 }, function (res) {
  console.log(res)
})

// $.ajax发送get请求
$.ajax({
  type: 'GET',
  url: 'https://api.thecatapi.com/v1/images/search',
  data: { limit: 10 },
  success: function (res) {
    console.log(res)
  }
})

// $.ajax发送post请求
$.ajax({
  type: 'post',
  url: 'https://jsonplaceholder.typicode.com/posts',
  data: {
    title: 'foo',
    body: 'bar',
    userId: 1,
  },
  success: function (res) {
    console.log(res)
  }
})

// $.get请求不携带参数的情况

$.get('https://api.thecatapi.com/v1/images/search', function (res) {

console.log(res)

})

// $.get请求携带参数的情况

$.get('https://api.thecatapi.com/v1/images/search', { limit: 10 }, function (res) {

console.log(res)

})

// $.ajax发送get请求

$.ajax({

type: 'GET',

url: 'https://api.thecatapi.com/v1/images/search',

data: { limit: 10 },

success: function (res) {

console.log(res)

}

})

// $.ajax发送post请求

$.ajax({

type: 'post',

url: 'https://jsonplaceholder.typicode.com/posts',

data: {

title: 'foo',

body: 'bar',

userId: 1,

success: function (res) {

console.log(res)

}

})

axios

专注于网络数据请求的库。

优势：

相比于原生的 XMLHttpRequest 对象，axios简单易用；
相比于 JQuery，axios 更加轻量化，只专注于网络数据请求。

axios 发起 GET 请求

axios.get('url', { params: { 参数 } }).then( callback )

1	axios.get('url', { params: { 参数 } }).then( callback )

axios 发起 POST 请求

axios.post('url', { params: { 参数 } }).then( callback )

1	axios.post('url', { params: { 参数 } }).then( callback )

直接使用 axios 发起请求

post数据需要通过data属性提供

// 直接使用axios发送请求
// 1. 发送GET请求
axios({
  method: 'get',
  url: 'https://api.thecatapi.com/v1/images/search',
  params: {
    limit: 3,
  }
}).then(function (res) {
  console.log(res)
})

// 2. 发送post请求
axios({
  method: 'post',
  url: 'https://jsonplaceholder.typicode.com/posts',
  data: {
    title: '中国',
    body: 'bar',
    userId: 1,
  }
}).then(function (res) {
  console.log(res.data)
})

// 直接使用axios发送请求

// 1. 发送GET请求

axios({

method: 'get',

url: 'https://api.thecatapi.com/v1/images/search',

params: {

limit: 3,

}

}).then(function (res) {

console.log(res)

})

// 2. 发送post请求

axios({

method: 'post',

url: 'https://jsonplaceholder.typicode.com/posts',

data: {

title: '中国',

body: 'bar',

userId: 1,

}

}).then(function (res) {

console.log(res.data)

})

这些信息可能会帮助到你：外卖红包 | 侵权删除 | 进站必看

文章名称：ajax技术知识总结
文章链接：https://www.bysjb.cn/ajax.html

THE END

二维码

打赏

JS基础知识之流程控制

< <上一篇

Git教程学习笔记

下一篇>>

搜索内容

ajax技术知识总结

简述

创建对象

创建XMLHttpRequest对象

XMLHttpRequest对象属性

XMLHttpRequest对象方法

请求

响应

基本使用

jQuery中的Ajax

$.get()

$.post()

$.ajax()

axios

axios 发起 GET 请求

axios 发起 POST 请求

直接使用 axios 发起请求

取消回复

共有 0 条评论

搜索

目录