AJAX详解_js ajax open-CSDN博客

本文链接：https://blog.csdn.net/m0_52704461/article/details/126607785

1：什么是ajax？

AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。

对AJAX的印象：
AJAX是异步的JavaScript和XML;
AJAX是一种用于创建更好更快以及交互性更强的Web应用程序的技术;
AJAX是一种独立于Web服务器软件的浏览器技术;
AJAX不是一种新的编程语言，而是一种技术;
AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据（前端后端交互）;
AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求）。

2：AJAX同步请求与异步请求

2.1：ajax同步请求

同步请求即是当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码，相当于是排队，也就是说，当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载，页面处于一个假死状态，当这个ajax执行完毕后才会继续运行其他代码页面解除假死状态。

2.2：ajax异步请求

异步请求就当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。一般默认值为true。异步请求可以完全不影响用户的体验效果，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

3：AJAX的使用

1.创建XMLHttpRequest对象

  var request = new XMLHttpRequest()

2.使用open方法设置和服务器的交互信息

  // 1.创建XMLHttpRequest对象
      var request = new XMLHttpRequest()
      // 2.配置请求方式，设置请求接口地址
      // 使用open方法设置和服务器的交互信息
      request.open('get', 'http://121.4.83.32:7004/carousel/findAll')

3:设置requestHeader()

request.setRequestHeader(属性名称, 属性值);

发送json格式数据

request.setRequestHeader('Content-type', 'application/json; charset=utf-8');

发送表单数据

request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');

发送纯文本(不指定Content-type时，此是默认值)

request.setRequestHeader('Content-type', 'text/plain; charset=utf-8');

发送html文本

request.setRequestHeader('Content-type', 'text/html; charset=utf-8');

 // 1.创建XMLHttpRequest对象
      var request = new XMLHttpRequest()
      // 2.配置请求方式，设置请求接口地址
      // 使用open方法设置和服务器的交互信息
      request.open('get', 'http://121.4.83.32:7004/carousel/findAll')
      // 3.设置请求头的格式
      // 设置requestHeader()

4:发送请求

    // 1.创建XMLHttpRequest对象
      var request = new XMLHttpRequest()
      // 2.配置请求方式，设置请求接口地址
      // 使用open方法设置和服务器的交互信息
      request.open('get', 'http://121.4.83.32:7004/carousel/findAll')
      // 3.设置请求头的格式
      // 设置requestHeader()
      // 4.发送请求
      request.send()

5.获取网络请求返回的数据

readystatechange 请求状态改变事件

当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件

function getData() {
      // 1.创建XMLHttpRequest对象
      var request = new XMLHttpRequest()
      // 2.配置请求方式，设置请求接口地址
      // 使用open方法设置和服务器的交互信息
      request.open('get', 'http://121.4.83.32:7004/carousel/findAll')
      // 3.设置请求头的格式
      // 设置requestHeader()
      // 4.发送请求
      request.send()
      // 5.获取网络请求返回的数据
      request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
          console.log(JSON.parse(request.responseText));
          var res = JSON.parse(request.responseText)
          // DOM
          // 创建节点
          for (var index in res.data) {
            var div = document.createElement('div')
            // 数据赋值
            // 将节点添加到DOM结构中
            div.innerHTML = res.data[index].introduce
            document.body.appendChild(div)
          }
        }
      }
    }

      readyStateChange 事件是专⻔用来监听 ajax 对象的 readyState 值改变的的行为
      简单来说就是只要当 readyState 的值发生变化了，那么就会触发该事件
      所以我们在readyStateChange 事件中来监听 ajax 的 readyState 是不是到 4 了

      //  readyState === 0 : 表示未初始化完成，这时候 open 方法还没有执行 
      //  readyState === 1 : 表示配置信息已经完成，表示执行完 open 之后 
      //  readyState === 2 : 表示 send 方法已经执行完成
      //  readyState === 3 : 表示正在解析响应内容
      //  readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了

JSON.stringify()用于从一个对象解析出字符串

  console.log(JSON.stringify({
            "a": "1",
            "b": "2"
        })); //{"a":"1","b":"2"}

parse用于从一个字符串中解析出json对象

 var str = '{"a":"1","b":"2"}';
        console.log(JSON.parse(str)); //{a: '1', b: '2'}

6：响应解码 MIME-TYPE

1.MIME类型为text/plain,text/html,text/css 文本类型时，可以使用responseText属性解析

2.MIME类型为XML文档类型时，使用responseXML属性解析

3.如果服务器发送对象，数组这样的结构化数据作为其响应，他应该传输JSON编码的字符串数据。通过responseText接受到它，可以把它传递给JSON.parse()方法来解析。

7：get有参请求

get 请求的参数就直接在 url 后面进行拼接就可以

 <!-- 引入qs -->
  <script src="./qs.js"></script>

<!-- 输入框 -->
  <input type="text" name="" id="inp">
  <!-- 获取数据的按钮 -->
  <button onclick="getWeatherData()">获取天气数据</button>

 <script>
    // 获取用户输入的值
    var inp = document.getElementById('inp')
    var cityName;
    inp.oninput = function () {
      cityName = this.value
    }
    // https://api.muxiaoguo.cn/api/tianqi?city=长沙&type=1&api_key=779d7e46708290a5
    function getWeatherData() {
      var request = new XMLHttpRequest()
      // 第一种方式 拼接字符串
      // request.open('get','https://api.muxiaoguo.cn/api/tianqi?city=' + cityName + '&type=1&api_key=779d7e46708290a5')
      // 第二种方式 封装参数对象
      var params = {
        city: cityName,
        type: 1,
        api_key:'779d7e46708290a5'
      }
      
      request.open('get','https://api.muxiaoguo.cn/api/tianqi?' + Qs.stringify(params))
      request.send()
      request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
          console.log(request.responseText);
          var res = JSON.parse(request.responseText)
          console.log(res);
          alert(`${cityName}的温度是${res.data.temp}`)
        }
      }
    }
  </script>

8：post有参请求

post 请求的参数是携带在请求体中的，所以不需要再 url 后面拼接

 <button onclick="toLogin()">登录</button>

 // http://121.4.83.32:7004/user/login
    function toLogin() {
      var request = new XMLHttpRequest()
      request.open('post', 'http://121.4.83.32:7004/user/login')


      // 配置参数
      var params = {
        username: 'admin1',
        password: '123321'
      }
      // 设置请求头
     //发送json格式数据
      request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
      request.send(JSON.stringify(params))
      request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
          console.log(request.responseText);
        }
      }
    }

9:AJAX的封装

<script src="./qs.js"></script>
  <script src="./util.js"></script>

<!-- 登录 -->
  <button onclick="toLogin()">登录</button>
  <!-- 获取轮播图的数据 -->
  <button onclick="getDate()">获取数据</button>

    // 登录
    function toLogin() {
      // 设置参数
      var params = {
        username:'admin1',
        password: '123321'
      }
      login(params)
    }
    // 获取数据
    function getDate() {
      myAjax.get('/carousel/findAll', function (res) {
        console.log(res);
      }, function (err) {
        console.log(err);
      })
    }