原生AJAX

最新推荐文章于 2024-04-16 21:02:01 发布

小姜思

最新推荐文章于 2024-04-16 21:02:01 发布

阅读量70

点赞数

文章标签： ajax javascript servlet

本文链接：https://blog.csdn.net/weixin_45813597/article/details/126590663

版权

什么是AJAX？

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

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

AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求）

XMLHttpRequest使用方法

1.创建XMLHttpRequest对象

var request = new XMLHttpRequest();

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

open()

参数：

1. .指定HTTP方法或动作，这个字符串不区分大小写，通常大家用大写字母来匹配HTTP协议取值可以为：GET/POST/HEAD/DELETE/OPTIONS/PUT

GET:用于常规请求，适用于URL完全指定请求资源，请求对服务器没有任何副作用，服务器的响应是可缓存的

POST:用于HTML表单，它在请求主体中包含额外数据，且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。

2. URL,请求的主体，是相对于文档的URL。跨域请求会报错

3. Boolean类型的值，如果值为false代表同步请求，send()方法将阻塞直到请求完成。如果这个参数是 true 或省略，请求是异步的。

request.open('get','https://api.muxiaoguo.cn/api/lishijr?api_key=0b0c3893a95d6987')

3. 设置requestHeader()

如果是POST请求，则需要设置请求头。然后在 send() 方法中规定需要希望发送的数据：setRequestHeader()方法需要在open()和send()方法之间调用。

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');

4. 发送请求

send()

参数：

请求主体内容，如果没有，为null，或者省略。

request.send(); //调用send()之后,请求就会发送到服务器

5. 获得响应

发送请求后，会收到响应，收到响应后，XHR对象的以下属性会被填充上数据。

1. responseText：作为响应体返回的文本。

2. responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档。

3. status：响应的 HTTP 状态。

4. statusText：响应的 HTTP 状态描述。

5. readyState：返回HTTP请求状态 0 open()尚未调用 UNSENT 1 open()已调用 OPENED 2 接收到头信息 HEADERS_RECEIVED 3 接收到响应主体 LOADING 4 响应完成 DONE

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

实例：

// get有参请求   

<body>
  <!-- 输入框 -->
  <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>
</body>

// post有参请求
<body>
  <button onclick="toLogin()">登录</button>
  <script>
    function toLogin() {
      var request = new XMLHttpRequest()
      request.open('post','http://121.4.83.32:7004/user/login')
      // 配置参数
      var params = {
        username: 'admin1',
        password: '123321'
      }
      // 设置请求头
      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);
        }
      }
    }
  </script>
</body>