JavaScript的原生ajax_ajax方法是javascript的原生方法么-优快云博客

本文链接：https://blog.youkuaiyun.com/a814131847/article/details/103617901

本文详细介绍了Ajax技术的概念，包括其核心组件XMLHttpRequest的工作原理，以及如何通过GET和POST请求与服务器进行异步通信。同时，文章探讨了Ajax的优缺点，如改善用户体验和减轻服务器压力等优势，以及可能破坏浏览器回退机制和对搜索引擎支持较弱等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX

一、什么是Ajax

Ajax（Asynchronous JavaScript And XML）异步 JavaScript 和 XML，是只刷新局部页面的技术。
XML：一般用于请求数据和相应数据的封装
现在的ajax技术已经开始使用JSON字符串进行数据交互

二、Ajax的优缺点

优点

页面无刷新，用户体验好
使用异步的方式与服务器通信，响应更加迅速
减轻服务器的压力，节约带宽
基于标准化并被广泛支持的技术

缺点

破坏了浏览器的回退机制
暴露了更多的数据和服务器逻辑
对搜索引擎的支持比较弱
违背了 URL 与资源定位的初衷

三、XMLHttpRequest 对象

XMLHttpRequest对象：发送请求到服务器并获得返回结果，是ajax技术的核心

XMLHttpRequest 对象可以让我们使用 JavaScript 向服务器发起请求并处理响应，而不阻塞用户。通过 XMLHttpRequest 对象，Web 开发人员可以在页面加载后对页面进行局部更新。该对象是一种支持异步请求的技术。

四、Ajax实现的流程

创建一个 XMLHttpRequest 对象
创建一个新的 HTTP 请求，并指定该请求的方法、URL 以及是否为异步请求
设置响应 HTTP 请求状态变化的函数
发送 HTTP 请求
对异步返回的数据进行处理

// 创建 XMLHttpRequest 对象
var xhr
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest()
} else if (window.ActiveXObject) {
    xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
// 创建一个新的请求
xhr.open('GET', 'http://www.example.com', true)
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 监听 HTTP 请求状态变化
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var res = xhr.responseText
    }
}
// 发送 HTTP 请求
xhr.send()

五、POST请求设置

发送方式为post时，需要手动设置消息头

//发送json格式
xhr.setRequestHeader("Content-type","application/json;charset = utf-8");
//发送表单数据格式
xhr.setRequestHeader("Content-type","application/x-www-form-urlencode;charset = utf-8");
//发送纯文本格式
xhr.setRequestHeader("Content-type","text/plain;charset = utf-8"); //默认值
//发送html文本设置
xhr.setRequestHeader("Content-type","text/html;charset = utf-8");