Ajax知识点及前端发送请求

1. 什么是Ajax

Ajax是一个技术方案，不是一个新的技术。是一种用于创建动态Web应用程序的技术，也称为“异步JavaScript和XML”。它利用JavaScript和XML来在不刷新整个Web页面的情况下更新部分页面内容，并实现更加快速、流畅的用户交互体验。其核心思想是通过使用XMLHttp请求对象在后台与服务器进行交互，实现异步数据的请求和响应处理，从而更新当前页面的部分内容，而不需要整个页面的刷新。Ajax技术广泛应用于Web前端开发、移动Web应用、HTML5游戏等领域。

2. Ajax优缺点

特点：异步请求，局部刷新。

优点：

• 局部刷新页面。而不是整个页面刷新。
• 异步请求。
• 减轻服务器压力，只返回当前请求的内容。 
• 对于客户端节省宽带占用。   

缺点：

• 没有back破坏了浏览器机制。
• 安全问题。
• 对搜索引擎不友好。

3. 原生Ajax请求步骤

//1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

//2.准备发送open()
xhr.open("get","www.baidu.com",true);//xhr.open("请求方式","URL",Boolean),默认为true，异步请求

//3.发送请求send()
xhr.send();

//4.监听函数--监听ajax的状态，回调函数--返回数据
xhr.onreadystatechange = function() {
    if (xhr.readyState==4) { //响应数据
        if (xhr.status ==200) {//http协议状态 200表示成功 此外还有400 500 404等
            console.log(xhr.responseText);//返回的数据字符串格式
        }
    }
} 

4. xhr.readyState

• 0: 初始化 xhr 对象 未请求
• 1: 发送请求服务器
• 2: 服务器接受请求
• 3: 服务器处理请求
• 4: 服务器处理完毕，响应数据

 注意：request 请求 response 响应

  http 协议状态码：

• xhr.status 表示当前的 http 请求协议 知否请求成功
• 2xx 表示成功 200
• 3xx 重定向 304 307 jd.com --->www.jd.com
• 4xx 资源不存在 404
• 5xx 服务器错误 500 505

5.Ajax请求传递参数

5.1 get 传递参数

get 传递参数在 url 地址栏传递参数
open()参数中，需要对 URL 使用问号缀参数，send()参数是 null

var xhr = new XMLHttpRequest();
var url = "wwww.baidu.com?username=sunn&password=123456";
xhr.open('get',url,true);
xhr.send();
xhr.onreadyStatechange = function() {
    if(xhr.readyState==4) {
        if (xhr.status==200) {
            console.log(xhr.response);
        }
    }
}

5.2 post传递参数

post 请求参数在请求体中传递,send(发送参数) 不是 url 地址拼接
需要设置请求头信息
setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8");

• application/x-www-form-urlencoded (默认值) 表单传输编码
• multipart/form-data 非文本内容 比如：图片 mp3
• text/plain 纯文本

var xhr = new XMLHttpRequest();
xhr.open('post','www.baidu.com',true);
var data = "username=sunn";
xhr.setRequestHeader("Content-type","application/x-www-form-urlencided;charset=utf-8");
xhr.send(data);

xhr.onreadystaatechange = function() {
    if (xhr.readyState==4) {
        if (xhr.status==200) {
            console.log(xhr.response);
        }
    }
}

6. 进阶Ajax，fetch

Fetch是一种用于发送HTTP请求的现代API，可替代XMLHttpRequest (XHR)对象。它使用Promise，是一种更简单和更干净的API设计。Fetch基于JavaScript的原生Promise和Response对象，提供一种简单、灵活和强大的方式来获取资源或页面数据。

使用fetch时，我们需要指定需要请求的URL，并且可以传递一些可选的配置选项以控制请求的详细行为，例如请求头、请求方法、请求体等。

以下是使用fetch的基本例子：

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

上面这段代码使用fetch方法请求http://example.com/movies.json的数据。它返回一个Promise，我们可以使用then方法来处理这个Promise，从中解析出响应对象的数据。

fetch方法接受一个请求URL作为参数，可选的第二个参数是一个配置对象，可以用于请求类型、请求头、请求体等。

下面是传递配置对象、使用POST方法发送请求以及处理错误的例子：

fetch('http://example.com/movies', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'Star Wars',
    director: 'George Lucas'
  })
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.catch(error => console.error('Error:', error))
.then(data => console.log('Success:', data));

如上所述，fetch执行后返回一个Promise。我们可以使用.then()方法和.catch()方法处理Promise的状态。

通过传递配置对象，我们可以定义请求的HTTP方法、请求头、请求体（例如POST请求中的参数）等信息。

在.then()中，如果响应返回状态码不是200 OK，我们可以使用 throw new Error()语句抛出异常。在.catch()中，我们可以捕捉到异步调用的错误，以便进行处理。

7.XMLHttpRequest和fetch配置的不同

在使用 Fetch 和 XHR 发送请求时，最常用到的配置选项包括：

Fetch 的配置选项：

1. method：指定请求使用的HTTP方法，如 GET、POST、PUT 等。
2. headers：指定请求头信息，如 Content-Type、Authorization 等。
3. body：指定请求体（请求参数）的内容，可以是字符串或者 FormData 等类型。
4. mode：指定 Fetch 的运行模式，如 cors、same-origin 等。
5. cache：指定 Fetch 是否使用缓存，默认为 default。
6. redirect：指定 Fetch 是否应自动执行重定向，如 follow、error、manual 等。
7. signal：指定 Fetch 中止控制器的AbortController信号。

XHR 的配置选项：

1. method：指定请求使用的HTTP方法，如 GET、POST、PUT 等。
2. headers：指定请求头信息，如 Content-Type、Authorization 等。
3. withCredentials：指定该请求是否携带cookie和HTTP认证信息等。
4. responseType：指定响应数据的类型，如 text、json、arrayBuffer 等。
5. timeout：指定请求的超时时间，单位是毫秒。
6. onreadystatechange：指定请求响应状态变化时，调用的回调函数。
7. upload：上传数据的相关配置，如 progress、abort、load 等。

总的来说，Fetch 和 XHR 的配置选项类似，除了存在一些差异，例如 Fetch 中的 signal 和 XHR 中的 responseType，以及 Fetch 中自动处理重定向，XHR 需要手动实现等。根据使用场景和需求，可以对这些配置选项进行适当的设置，以实现对HTTP请求的定制化控制。

8. 封装的Ajax-axios

axios的参考文档地址为：起步 | Axios 中文文档 | Axios 中文网 (axios-http.cn)

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

特性

• 从浏览器创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

axios的简单使用示例，具体更详细的可以参考文档

import axios from 'axios';

// 发送 GET 请求
axios.get('/api/data')
  .then(function (response) {
    // 处理响应数据
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误
    console.log(error);
  });
  
// 发送 POST 请求
axios.post('/api/data', { name: "sunn", age: 30 })
  .then(function (response) {
    // 处理响应数据
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误
    console.log(error);
  });

在这个示例中，通过引入Axios模块来发送HTTP请求。使用Axios发送请求是非常容易的：只需要调用相关的HTTP动词（如 get、post等），且根据需要设置请求参数即可。在Axios使用过程中，您还可以使用拦截器来对请求进行更细粒度的定制化处理，比如添加对请求进行加密、认证等功能。