Ajax (前端必看之AJAX功能原理详解)

本文链接：https://blog.csdn.net/xuemen11/article/details/136592848

一.Ajax是什么

ajax 是一种快速创建动态网页的技术（网络请求的技术）。这种技术的特点是异步请求，局部刷新

二.Ajax有什么作用？

1）异步请求，局部更新页面

2）读取文档内容

3）在同源策略环境下使用（协议://IP:端口），否则就是后端程序员做了资源跨域共享(cors)

4）在跨域的环境下是不能直接使用ajax

三.为什么要使用Ajax ?

异步通信：Ajax采用异步通信模式，允许在不重新加载整个页面的情况下，与服务器进行数据交换并更新部分网页内容。这种局部刷新的方式极大地减少了用户等待时间，提高了应用的响应速度。
优化资源利用：通过减少不必要的数据传输和服务器请求，Ajax降低了网络带宽的占用，从而优化了资源的利用。这对于减少服务器负载、提高系统性能至关重要。
提升用户体验：由于Ajax可以实现无刷新更新，用户在操作网页时无需等待页面重载，从而获得了更流畅、更自然的体验。这种即时反馈的交互方式增强了用户的参与感和满意度。
跨浏览器和跨平台兼容性：Ajax技术基于JavaScript和多种Web标准，因此具有良好的跨浏览器和跨平台兼容性。这使得开发者能够创建在各种设备和浏览器上都能良好运行的Web应用。
与后端技术的无缝集成：Ajax可以与后端的各种技术（如RESTful API、Web服务等）无缝集成，实现前后端数据的实时交互。这种灵活性使得Ajax成为构建现代Web应用的重要工具。

四.怎么使用Ajax ?

1.创建XMLHttpRequest对象：
Ajax的核心是XMLHttpRequest对象，它用于与服务器进行异步通信.

var xhr=new XMLHttpRequest();

2.设置请求方式和URL

xhr.open("GET", "your_url_here", true);

3.设置请求头（如果需要）：

在发送请求之前，你可以使用setRequestHeader()方法来设置HTTP请求头。这通常用于发送自定义头部或设置内容类型等。

4.发送请求：

使用send()方法发送请求。对于GET请求，通常不需要传递任何数据；对于POST请求，你可以传递需要发送到服务器的数据。

当然我们可以使用 jQuery已经封装好的Ajax方法直接调用，就不用自己苦苦封装啦！！

1.使用Ajax

$.ajax({
        url: "", // 接口地址
        type: "", // 请求方式  GET  POST
        // get: "get", //读取本地文档
        async: true, // true 表示异步
        data: {}, //  是否传参 填写参数的地方
        // 遇到跨域设置   dataType: "jsonp"
        dataType: "jsonp", // 1）响应数据的格式 2） 是否跨域 【jsonp】
        beforeSend: function () {}, // 请求之前的回调
        success: function () {}, // 请求成功的回调
        error: function () {}, // 请求失败的回调
        complete: function () {}, // 请求完成
      });

2.使用原生js编写

  // 1.创建XMLHttpRequest构造函数的实例(xhr)
      var xhr = new XMLHttpRequest();
      // 2.监听网络请求和响应状态
      xhr.onreadystatechange = function () {
        // 4.处理数据
        // 请求完成（固定）xhr.readyState === 4
        if (xhr.readyState === 4) {
          // 响应成功   xhr.status === 200
          if (xhr.status === 200) {
            var content = xhr.responseText;
            console.log(typeof content);
            var obj=JSON.parse(content)
            console.log(obj);
            // 渲染
            $('.msg').html(obj.message)

          }
        }
      };
      // 3.发起请求、发送请求
      // xhr.open(true,url,async)
      xhr.open('get','03.txt',true)
      // 接受请求
      xhr.send()

3.封装一个简单的ajax方法

 var $$={};//对象
      // 添加方法，参数中传递对象
      $$.ajax = function (option) {
        // 对象用于创建 HTTP 请求。这些请求可以是 GET、POST 或其他 HTTP 方法。一旦请求被发送，
        // XMLHttpRequest 对象会收集关于响应的信息，包括状态、响应头以及响应体
        var xhr = new XMLHttpRequest();
        // 监听请求和响应， onreadystatechange事件处理器
        xhr.onreadystatechange = function () {
          // 请求成功
          if (xhr.readyState === 4) {
            // 响应成功
            if (xhr.status === 200) {
              // 获取文档内容
              var content = xhr.responseText;//responseText用于获取从服务器返回的响应数据
              // 这个属性返回的是一个字符串，可以根据需要进行处理和解析
              // 判断是否存在success回调函数
              option.success && option.success(content);
            } else {
              // 请求失败
              option.error && option.erroe(xhr.responseText);
            }
          }
        };
        //  发起请求，发送请求
        xhr.open(option.type, option.url, true);
        // open 方法初始化请求，HTTP 方法（GET）、URL 和是否异步（true 表示异步）
        xhr.send();
      };

使用封装的ajax

 $$.ajax({
        // 传入本地同源的文档
        url: "03.txt",  //数据地址/接口文档/接口地址
        type: "get",  //请求方式
        success: function (content) {
          console.log(typeof content);
          var obj=JSON.parse(content)
          console.log(obj);
          // 渲染数据
          document.querySelector('.msg').innerHTML=obj.message
        },
        error: function (err) {
          console.log(err);
        },
      });