原生Ajax的使用，四种请求方法示例（前后端代码）

目录

原生Ajax是什么

原生Ajax的优点

Ajax应用环境

Ajax的使用

基本使用步骤

AJAX请求状态和HTTP状态码

AJAX 请求状态

HTTP 状态码

XHR对象的方法

各种请求方式和数据获取

post请求

post 请求完整代码

get 请求

服务端

put 请求

服务端

delete 请求

服务端代码

终止请求

回调函数

---

原生Ajax是什么

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。是指使用原生的 JavaScript 代码来进行 Ajax 请求和处理。它是一种异步请求的实现方式，可以在不刷新整个页面的情况下向服务器发送请求、获取数据并更新页面内容。

AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

XML（可扩展标记语言）是一种用于描述数据的标记语言。它被设计用于传输和存储数据，并且具有可扩展性和自我描述性。

XML 使用标签来标识数据的结构和内容，类似于 HTML。不同的是，XML 不是针对特定的领域或用于呈现页面，而是作为通用的数据格式。它可以被用于各种目的，如数据交换、配置文件、存储复杂数据结构等。

XML 的基本语法规则包括：

• 所有 XML 文档必须包含一个根元素（root element）。
• 所有元素必须正确嵌套，即一个元素必须包含在另一个元素的内部，不能交叉或重叠。
• 所有元素必须正确关闭，即有一个开始标签和一个匹配的结束标签。
• 标签名称区分大小写。
• 元素可以拥有属性，用于提供元素的附加信息。
• 内容可以是文本或其他嵌套的元素。

以下是一个简单的 XML 示例：

  John Doe
  30
  [email protected]

原生Ajax的优点

1. 轻量级和灵活性：原生 Ajax 不依赖额外的库或框架，代码较为精简，只需要使用浏览器提供的 XMLHttpRequest 对象即可完成异步请求。这减少了额外的依赖和文件大小，使得页面加载更快，并且更加灵活，可以根据具体需求进行定制。

2. 原生支持：原生 Ajax 是由浏览器原生支持的技术，无需引入额外的库或框架，可以直接使用浏览器提供的 API。这意味着原生 Ajax 在所有支持 JavaScript 的现代浏览器上都可以运行，不需要额外的兼容性处理。

3. 低级别的控制：原生 Ajax 可以提供更低级别的控制，开发人员可以直接处理请求和响应的状态、头部信息、错误处理等。这种灵活性使得开发人员可以根据具体需求来定制请求和响应的处理逻辑。

4. 完全自定义的处理逻辑：原生 Ajax 允许开发人员完全自定义请求和响应的处理逻辑。通过设置回调函数或添加事件监听器，可以在请求发送、状态变化等不同阶段执行自定义的操作。这样开发人员可以更好地控制请求的结果和页面的行为。

5. 可直接操作响应数据：原生 Ajax 允许直接操作响应数据，通过 responseText 或 responseXML 属性可以获取服务器响应的文本或 XML 数据。这样可以更方便地处理和展示服务器返回的数据。

由于Ajax存在同源问题(同源策略)，所以要使用跨域。

跨越解决文章：https://blog.csdn.net/kkkys_kkk/article/details/135577403?spm=1001.2014.3001.5501

Ajax应用环境

原生 Ajax 在许多应用场景中都可以使用，包括但不限于以下几个方面：

1. 动态内容更新：原生 Ajax 可以用于动态地更新网页的内容，而无需刷新整个页面。例如，可以使用原生 Ajax 在用户点击按钮或链接时加载新的数据，然后将数据动态地插入到已有的页面中，实现无刷新的内容更新。

2. 表单提交和验证：原生 Ajax 可以用于异步提交表单，将表单数据发送到服务器并接收服务器的响应结果。这样可以避免整个页面的刷新，提高用户体验。同时，还可以使用原生 Ajax 对用户输入的表单数据进行实时验证，例如检查用户名是否已存在、验证电子邮件格式等。

3. 异步加载数据：原生 Ajax 可以用于异步加载数据，例如从服务器获取 JSON、XML 或纯文本数据，并用于更新页面的内容。这对于加载大量数据或需要根据用户交互实时更新数据的应用程序非常有用，如社交媒体的新闻流、聊天消息的实时推送等。

4. 实时搜索和自动完成：原生 Ajax 可以在用户输入关键词时，通过与服务器交互，实时搜索相关结果并动态显示。例如，在搜索引擎或电子商务网站上，可以使用原生 Ajax 在用户输入时快速提供搜索建议或自动完成的功能。

5. 异步文件上传：原生 Ajax 提供了通过异步请求上传文件的能力。这使得可以在后台进行文件上传，而不会中断用户的其他操作或等待整个页面刷新。通过使用 FormData 对象和原生 Ajax，可以实现无刷新的异步文件上传操作。

6. Web API 调用：原生 Ajax 可以用于与各种 Web API 进行通信。例如，可以使用原生 Ajax 与服务器上的 REST API 进行交互，请求资源、发送数据或执行其他操作。

请注意，原生 Ajax 需要开发人员手动处理低级别的细节和兼容性问题。对于一些高级的功能，例如处理异步请求的回调地狱、安全性等问题，可能需要更加细致的处理和实施。

Ajax的使用

基本使用步骤

1. 创建一个 XMLHttpRequest 对象，该对象是进行 Ajax 请求的核心对象，可以通过 XMLHttpRequest() 构造函数创建。

   var xhr = new XMLHttpRequest();

2. 调用 open() 方法，设置异步请求的 HTTP 方法、请求 URL 和是否异步。

   xhr.open(method, url);
   
   //可以设置请求头，一般不设置
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   

3. 设置回调函数（可以通过 onreadystatechange 属性或 addEventListener 方法设置）来监听请求状态的变化，并在请求完成后处理响应数据。

   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成并且响应状态为 200 OK
       var data = JSON.parse(xhr.responseText); // 解析服务器返回的数据
       // 在此处进行数据处理或页面更新操作
     }
   

4. 调用 send() 方法发送异步请求。

   xhr.send(body)	//get 请求不传 body 参数，只有 post 请求使用
   
   

AJAX请求状态和HTTP状态码

AJAX 请求状态

xhr.readyState 可以用来查看请求当前的状态
0:  表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
1:  表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。
2:  表示 send()方法已经执行，并且头信息和状态码已经收到。
3: 表示正在接收服务器传来的 body 部分的数据。
4: 表示服务器数据已经完全接收，或者本次接收已经失败了

HTTP 状态码

由三个十进制数字组成，第一个十进制数字定义了状态码的类型。响应分为五类：信息响应(100–199)，成功响应(200–299)，重定向(300–399)，客户端错误(400–499)和服务器错误 (500–599)：

分类	分类描述
1**	信息，服务器收到请求，需要请求者继续执行操作
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

XHR对象的方法

• open(method,url,async) :建立和服务器的连接

• send(主体)：发送请求消息

  • get:send(null)

  • post:send('name=xxx&age=xxx')

• setRequestHeader(name,value):设置请求消息头部

• getRequestHeader(name):获取响应消息头部

• responseType：设置响应体数据的类型

各种请求方式和数据获取

post请求

表示新增，post请求之前需要先设置请求头

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

send 方法参数中放置传递给服务端的数据

const params='id=1&name=yhb&age=18'
xhr.send(params)

服务端通过 request.POST 获取以 post 方式传递的数据

class GoodsView(View):
    # 接收以 post 方法发送的 ajax 请求
    def post(self, request):
        id = request.POST.get('id')
        name = request.POST.get('name')
        age = request.POST.get('age')
        return JsonResponse({
            "id": id,
            "name": name,
            "age": age
        })

post 请求完整代码

// 1、创建 XMLHttpRespopnse 对象
            const xhr= new XMLHttpRequest()
            // 2、配置请求方式和请求地址
            xhr.open('post','http://127.0.0.1:8000/app/goods/')
            // 3、监听服务器的返回
            xhr.onreadystatechange=function(){
                // 1、服务端返回的文本会赋值给 XMLHttpRequest 对象的 responseText 属性
                // readyState =4 只能证明服务端已经返回响应了，很可能是错误的响应，只要当
                // status 值也为 200 时，才能证明服务端返回了正确的响应
                if(xhr.readyState == 4 && xhr.status == 200){
                    console.log(xhr.responseText);
                }
            }
            // 4、如果请求方式为 post ，需要配置请求头
                xhr.setRequestHeader('Content-Type', 'application/json');
             // 5、发送请求，发送给服务端的数据，需要放到 send  方法的参数中
            xhr.send(JSON.stringify({ data: 'some data' }));
            

get 请求

get 主要用来从服务端获取数据，也可以向服务端发送少量数据

与 post 相比

• 不需要设置请求头

• 发送给服务端的数据附着到请求地址的后面，以问号分割

 // 1、创建 XMLHttpRespopnse 对象
const xhr= new XMLHttpRequest()
// 2、配置请求方式和请求地址
​
xhr.open('get','http://127.0.0.1:8000/app/goods/?id=1&name=yhb&age=18')
// 3、监听服务器的返回
xhr.onreadystatechange=function(){             
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText);
    }
}          
​
xhr.send()

服务端

通过 request.GET 获取客户端以 get 方式提交的数据

def my_view(request):
    # 获取查询字符串参数
    action = request.GET.get('action')
    name = request.GET.get('name')

    # 进行业务逻辑处理
    # ...

    # 返回 JSON 格式数据
    response_data = { "result": "success" }
    return JsonResponse(response_data)

put 请求

put 请求用于修改数据

与 post 相比，不用设置请求头

 // 1、创建 XMLHttpRespopnse 对象
    const xhr = new XMLHttpRequest()
    // 2、配置请求方式和请求地址
​
    xhr.open('put', 'http://127.0.0.1:8000/app/goods/')
    // 3、监听服务器的返回
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
    }
    const params=`id=1&name=yhb&age=18`
    xhr.send(params)

服务端

通过 QueryDict 从 request.body中将数据提取出来，并放到字典中

  def put(self, request):
        query_dict = QueryDict(request.body)
        id = query_dict.get('id')
        name = query_dict.get('name')
        age = query_dict.get('age')
​
        return JsonResponse({
            "id": id,
            "name": name,
            "age": age
        })

delete 请求

delete 方式主要用于删除数据

与 put 请求方式一样

 // 1、创建 XMLHttpRespopnse 对象
const xhr = new XMLHttpRequest()
// 2、配置请求方式和请求地址
​
xhr.open('delete', 'http://127.0.0.1:8000/app/goods/')
// 3、监听服务器的返回
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
}
const params=`id=1&name=yhb&age=18`
xhr.send(params)

服务端代码

def delete(self,request):
    query_dict = QueryDict(request.body)
    id = query_dict.get('id')
    name = query_dict.get('name')
    age = query_dict.get('age')
​
    return JsonResponse({
        "id": id,
        "name": name,
        "age": age
    })

终止请求

调用xhr.abort()即可随时终止请求；

xhr.abort()

它会触发 abort 事件，且 xhr.status 变为 0。

回调函数

function ajaxGet(method, url, callback) { // callback: 为一个回调函数
     // 创建ajax 对象
    let ajax = new XMLHttpRequest();
    // 建立与服务器连接 
    ajax.open(method, url);
    // 发送数据
    ajax.send();
    ajax.onreadystatechange = function() {
        // onreadystatechange: 数据改变事件 
        if(ajax.readyState === 4 && ajax.status === 200){
            callback(ajax.responseText)
        }
    }
}
function handelAdd() {
    ajaxGet(`url`, (res)=>{
        alert(JSON.parse(res).message)
        location.href = './index.html'
    })
}