ajax 返回js

1、使用XMLHttpRequest对象

创建XMLHttpRequest对象：在JavaScript中，可以通过new XMLHttpRequest()来创建一个XMLHttpRequest对象。

配置请求参数：使用open方法配置请求的类型（如"GET"或"POST"）和URL。

发送请求：对于GET请求，可以直接调用send()方法；对于POST请求，需要在调用send()方法前设置请求体（如通过setRequestHeader设置请求头，以及传入要发送的数据）。

处理响应：当服务器返回数据后，会触发onreadystatechange事件，在该事件的回调函数中，可以检查readyState属性是否为4（表示请求已完成），以及status属性是否为200（表示请求成功），如果条件满足，就可以通过responseText（对于文本响应）、responseXML（对于XML响应）等属性获取服务器返回的数据。

2、使用jQuery库的$.ajax()方法

基本语法：jQuery提供了简洁的$.ajax()方法来发起Ajax请求，其基本语法如下：

参数说明：

url：请求的URL地址。

type：请求类型，如"GET"、"POST"等，默认为"GET"。

data：发送到服务器的数据，可以是对象、字符串等格式，如果是GET请求，数据会被附加到URL后面；如果是POST请求，数据会被作为请求体发送。

success：请求成功时的回调函数，该函数会接收服务器返回的数据作为参数。

error：请求失败时的回调函数。

示例代码：

3、使用Fetch API

基本用法：Fetch API是现代浏览器提供的用于进行网络请求的接口，其基本用法如下：

参数说明：

url：请求的URL地址。

options：可选的配置对象，可以包含请求的方法（如"GET"、"POST"等）、请求头、请求体等信息。

处理响应：Fetch API返回的是一个Promise对象，因此可以使用then方法来处理成功的响应，使用catch方法来处理错误的响应。

4、处理不同类型的响应数据

JSON数据：如果服务器返回的是JSON格式的数据，通常需要在回调函数或then方法中将响应体解析为JSON对象，在使用Fetch API时：

文本数据：如果服务器返回的是纯文本数据，可以直接使用响应体的text方法获取文本内容。

二进制数据：如果服务器返回的是二进制数据（如图片、文件等），可以使用响应体的arrayBuffer或blob方法获取二进制数据，并进行处理。

5、优雅地处理错误

网络错误：在进行Ajax请求时，可能会遇到网络错误（如网络中断、服务器无响应等），为了优雅地处理这些错误，可以在回调函数或catch方法中添加错误处理的逻辑。

服务器返回的错误状态码：除了网络错误外，服务器还可能返回错误的状态码（如404、500等），可以在回调函数中检查status属性的值，并根据不同的状态码进行相应的处理。

JSON解析错误：如果服务器返回的数据不是有效的JSON格式，在解析JSON时会抛出错误，可以在解析JSON时使用try...catch语句来捕获并处理这种错误。

上述步骤和代码示例展示了如何在JavaScript中使用AJAX发起网络请求并处理返回结果，包括使用原生XMLHttpRequest对象、jQuery库的$.ajax()方法以及现代的Fetch API，也介绍了如何处理不同类型的响应数据（如JSON、文本、二进制数据）以及如何优雅地处理可能出现的错误情况（如网络错误、服务器返回的错误状态码、JSON解析错误）。