ajax技术知识总结

简述

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

创建对象

创建XMLHttpRequest对象

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)

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

  • method:请求的类型,值为GETPOST
  • 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);
  }
}

jQuery中的Ajax

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

$.get()

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

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

参数详解

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

$.post()

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

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

参数详解

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

$.ajax()

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

$.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)
  }
})

axios

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

优势:

  1. 相比于原生的 XMLHttpRequest 对象,axios简单易用;
  2. 相比于 JQueryaxios 更加轻量化,只专注于网络数据请求。

axios 发起 GET 请求

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

axios 发起 POST 请求

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)
})

这些信息可能会帮助到你: 关于我们 | 饿了么返钱 | 捐赠支持

文章名称:ajax技术知识总结
文章链接:https://www.bysjb.cn/ajax.html
THE END
分享
二维码
打赏
< <上一篇
下一篇>>