Ajax理解和使用

最新推荐文章于 2024-02-17 13:45:00 发布

snakeZix

最新推荐文章于 2024-02-17 13:45:00 发布

阅读量172

点赞数

分类专栏：前后端交互文章标签： ajax javascript

本文链接：https://blog.csdn.net/wucan111/article/details/112141815

版权

前后端交互专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Ajax理解和使用

资料和文档

MDN Ajax

还是那句话，推荐MDN，菜鸟教程对于新手或者急着使用的同学比较好，但是这也同样意味着失去了很多重要的细节

一、Ajax简介

(1) 什么是Ajax

AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。

(2) 为什么要Ajax

传统的数据网页都是通过SSR服务端渲染，来展示大量的数据（例如Php的模板引擎，Java的JSONP），但是有一个问题就是，每次在页面上要做一些增删改查都需要重新刷新页面或者跳转访问服务端对外暴露的资源路径再进行重定向，以获取最新的数据，这对于用户来说交互体验是非常差的（以现在的角度来看）
Ajax 最吸引人的就是它的**“异步”**特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。你可以使用AJAX最主要的两个特性做下列事：

在不重新加载页面的情况下发送请求给服务器
接受并使用从服务器发来的数据，通过返回的结果和用户进行交互

(3) 怎么使用Ajax

Ajax也是事件响应机制，类比DOM的事件响应：获取DOM对象，绑定响应函数，触发事件，回调响应函数获取事件信息

Ajax的核心是 XMLHttpRequest 类，它内部（原型）包含了发送Ajax的能力

创建一个中间对象， XMLHttpRequest 的实例

    const httpRequest = new XMLHttpRequest();

在真正发送请求之前，需要绑定响应函数 onreadystatechange ，也相当于监听事件 “readystatechange”，能够知道请求是否成功或者失败

httpRequest.onreadystatechange = function () {
    ...//请求的响应情况
}

接下来要真正的发出Ajax请求阶段，先指定发出请求的配置信息，再发出请求：

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();

参数类的就不细讲了，具体可以参考 文档最先声明的资料 ，就将一些容易出错的：

open的第一个参数表示请求方法，一定要注意大写；第二个参数是资源路径要注意同源策略；第三个表示发送的请求是否开启异步，如果同步 false的话，请求一旦发出，下面的代码停止执行，但是主线程仍然在执行JS只是被阻塞了，因此页面也被阻塞了无法进行操作，除非是测试需要，不然极其不建议使用 false （关闭异步）
send函数是真正触发发送请求的函数，它可接受一个参数作为请求数据传输也叫请求体，需要注意的是，"GET"方式的数据需要在open的URL中拼接，没有请求体
举一个发送POST，PUT，DELETE方法请求的例子

httpRequest.open('POST', 'http://www.example.org/user', true);
httpRequest.send('username=zix&email=220974511@qq.com&password=123456');

注意需要序列化参数

处理响应
在响应函数，它是会多次触发的，因此我们需要判断到底什么时候成功请求，什么时候失败，请求的结果是什么：
请求有多个状态，每个状态表示请求当前的进度：

0 (未初始化) or (请求还未初始化)
1 (正在加载) or (已建立服务器链接)
2 (加载成功) or (请求已接受)
3 (交互) or (正在处理请求)
4 (完成) or (请求已完成并且响应已准备好)

它被保存在 httpRequest.readyState 里，上面这些状态只有4才算成功接受并返回。还有一个HTTP响应码保存在 httpRequest.status 里，只有当其为 200 表示完美的返回数据，没有任何问题。

httpRequest.onreadystatechange = function () {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
    // Everything is good, the response was received.
    	if (httpRequest.status === 200) {
    		const { responseText ,  responseXML } = httpRequest
            // Perfect!
        } else {
            // There was a problem with the request.
            // For example, the response may have a 404 (Not Found)
            // or 500 (Internal Server Error) response code.
        }
    } else {
        // Not ready yet.
    }
}

接下来处理返回结果：

httpRequest.responseText – 服务器以文本字符的形式返回
httpRequest.responseXML – 以 XMLDocument 对象方式返回，之后就可以使用JavaScript来处理

如果你希望终止这次请求可以：

httpRequest.abort() //会中断这次请求

二、实践使用

上面只是简单的入门级别使用，但是如果你只想了解这么多的话，到这一段就可以了

(1) setRequestHeader 设置HTTP请求头部的方法

此方法必须在 open() 方法和 send() 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头
如果没有设置 Accept 属性，则此发送出send() 的值为此属性的默认值*/*
HTTP请求头的属性太多，我们只讲
1. Content-Type => WEB浏览器告诉服务器自己响应的请求体数据的类型（这也意味着GET方式不需要），常用有
- 表单 application/x-www-form-urlencoded 适合POST，PUT，DELETE等包含请求体方法类型
- 文件 multipart/form-data
- JSON application/json
  
  其后也可以加上编码格式如multipart/form-data;charset:UTF-8
1. cookie => 默认会自动的把cookie加上（不跨域的前提下），也可手动设置

httpRequest.setRequestHeader(header, value); //header属性的名称, value属性的值

(2) 几个 XMLHttpRequest 的实例的重要属性

httpRequest.upload 上传进度
httpRequest.timeout 请求建立链接并返回成功的最大时候，如果超时就舍弃这个请求
httpRequest.withCredentials 是否允许跨域 Access-Control 请求带有授权信息，如 cookie 或授权 header 头，这个请求只有在跨域的时候才有效，在同源请求中无效，无论设置什么值
httpRequest.responseType 属性是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串，它将使用默认的"text"类型
- "" responseType 为空字符串时，采用默认类型 DOMString，与设置为 text 相同
- arraybuffer response 是一个包含二进制数据的 JavaScript ArrayBuffer
- blob 包含二进制数据的的 Blob 对象
- document HTML Document 或者 XML XML Documnet
- **json ** 返回JSON对象，就不需要和什么都没设置一样需要JSON.parse处理
- text DOMString 对象表示的文本
- ms-stream 是下载流的一部分；此响应类型仅允许下载请求，并且仅受 Internet Explorer 支持

(3) 上传文件案例

const inputEle = document.get.... //获取input file 类型元素
inputEle.addEventListener('change', function(event){ //绑定选择文件之后的方法
	const files  = this.files //注意files是从this上拿，也就是 inputEle 上，并不是event
    const formdata = new FormData() //新创建一个FormData实例
    formdata.append('file', files[0]) //添加文件信息，默认上传单个文件
    formdata.append('...', ...) //添加其它信息
    const httpRequest = new XMLHttpRequest()
    httpRequest.onreadystatechange = function () {
        ...//请求的响应情况
    }
	httpRequest.open('POST', 'http://www.example.org/file', true)
	httpRequest.send(formdata) // formdata 直接传入，浏览器自动会处理FormData类型数据，并且设置对应的 Content-Type ，因此不要在手动设置Content-Type；如果你设置了 Content-Type为 multipart/form-data，那么请求就会被降级为普通的表单上传也就是application/x-www-form-urlencoded，后台无法获取到文件资源
})