有关AJAX的知识点

恬淡如雪

已于 2022-08-29 20:26:41 修改

阅读量244

点赞数

文章标签： ajax javascript 前端

于 2022-08-25 19:55:00 首次发布

本文链接：https://blog.csdn.net/qq_48639265/article/details/126530462

版权

XMLHttpRequest

使用方法

1. 创建XMLHttpRequest对象

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

3.设置requestHeader()

4. 设置发送的数据，开始和服务器端交互

5. 取得响应，注册事件

6.如果请求完成，并且响完成，可以获取到响应数据

AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），异步的xml和javascript，是一种浏览器和服务器进行数据交互的网页技术。

XMLHttpRequest

XMLHttpRequest对象是AJAX的基础,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()

在AJAX中，如果需要像HTML表单那样POST数据，需要使用setRequestHeader() 方法来添加 HTTP 头。在send()方法中规定希望发送的数据，在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对象的以下属性会被填充上数据。

responseText：作为响应体返回的文本。
responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档。
status：响应的 HTTP 状态。
statusText：响应的 HTTP 状态描述。
readyState：返回HTTP请求状态

0 open()尚未调用 UNSENT

1 open()已调用 OPENED

2 接收到头信息 HEADERS_RECEIVED

3 接收到响应主体 LOADING

4 响应完成 DONE

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

6.如果请求完成，并且响完成，可以获取到响应数据

 <button onclick="getData()">获取数据</button>
  <script>
    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));
          // 转换为JSON对象
          var res = JSON.stringify(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)
          }
        }
      }
    }
  </script>

7.响应解码 MIME-TYPE

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

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

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

常用请求使用

使用get发送有参请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入qs -->
    <script src="./qs.js"></script>
</head>

<body>
    <!-- 输入框 -->
    <input type="text" id="inp">
    <!-- 获取数据的按钮 -->
    <button onclick="getWeatherData()">获取天气数据</button>
    <script>
        // 获取用户输入的值
        var inp = document.getElementById('inp');
        var cityName;
        inp.oninput = function () {
            cityName = this.value;
        }
        function getWeatherData() {
            var request = new XMLHttpRequest();
            // 第一种方式 拼接字符串
            // request.open('get', 'https://api.muxiaoguo.cn/api/tianqi?city=' + cityName + '&type=1&api_key=779d7e46708290a5');
            // request.send();
            // 第二种方式 封装参数对象
            var params = {
                city: cityName,
                type: 1,
                api_key: '779d7e46708290a5'
            }

            //  参数序列化 要先引入QS序列化工具
            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>

</html>

使用post发送无参请求

<!-- https://api.muxiaoguo.cn/api/Gushici -->
<button onclick="postNo()">post无参</button>
<script>
  function postNo() {
    var request = new XMLHttpRequest()
    request.open('post','https://api.muxiaoguo.cn/api/tianqi?city=长沙&type=1&api_key=779d7e46708290a5');
    request.send();
    request.onreadystatechange = function () {
      if (request.readyState === 4 && request.status === 200) {
        console.log(request);
      }
    }
  }
</script>

使用post发送有参请求

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

js单线程

   非阻塞IO(input/output)单线程语言;
   console.log(1)
   setTimeout(()=>{
       console.log(2)
   },0)
   console.log(3) ;// 1 3 2

1. js会优先执行主线程任务，遇到异步请求或者是遇到宏任务，不会立即执行而是放到任务栈中；
2. 如果立即执行，主线程崩溃；
3. 如果异步一天不回来，主线程无法往下执行，要将异步宏任务放到任务栈。

案例

运用接口，进行登录操作和获得更新咨询信息操作。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!-- 引入在线的qs -->
	<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
	<script>
		window.onload = function () {
			// 点击登录按钮 获取token 存储到会话 
			// 携带token去更新一条数据
			function login1() {
				// 登录请求 token post 后台需要数据 json
				// 1.创建一个实例对象
				var xhr = new XMLHttpRequest();
				// 2.打开一个连接
				// 需要传递json 
				var obj = {
					username: "admin",
					password: 123456
				};
				xhr.open('post', 'http://123.112.7.35:8998/user/login');
				// 设置请求头
				xhr.setRequestHeader('Content-Type', 'application/json');
				// 3.发送请求
				// 二、给后端发送json数据
				xhr.send(JSON.stringify(obj));
				// 4.接收响应
				xhr.onreadystatechange = function () {
					if (xhr.readyState === 4 && xhr.status === 200) {
						// console.log(xhr.responseText);//json格式数据 
						var res = JSON.parse(xhr.responseText);
						console.log(res);//{data:{token:""}}
						// setItem 会话存储方法 参数:属性名 属性值
						sessionStorage.setItem('token', res.data.token)
					}
				}
			}
			// 更新数据方法
			function saveOrUpdate() {
				// 登录请求 token post 后台需要数据 json
				// 1.创建一个实例对象
				var xhr = new XMLHttpRequest();
				// 2.打开一个连接
				// 需要传递json 
				var obj = {
					name: "test",
					description: '跪求网络号'
				};
				// 将数据转成表单格式

				xhr.open('post', 'http://123.112.7.35:8998/category/saveOrUpdate');
				// 设置请求头
				xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
				// sessionStorage.getItem('token') 获取会话存储 geiItem 参数:属性名
				xhr.setRequestHeader('Authorization', sessionStorage.getItem('token'));
				// 3.发送请求
				// 二、给后端发送表单格式数据
				xhr.send(Qs.stringify(obj));
				// 4.接收响应
				xhr.onreadystatechange = function () {
					if (xhr.readyState === 4 && xhr.status === 200) {
						console.log(xhr.responseText);//json格式数据 
					}
				}
			}
			// 获取登录按钮和更新按钮
			var login = document.getElementById('login');
			var save = document.getElementById('save');
			//绑定事件
			login.onclick = function () {
				login1()
			}
			// post两种数据格式 

			// 绑定更新按钮事件
			save.onclick = function () {
				saveOrUpdate()
			}
		}
	</script>
</head>

<body>
	<button id="login">登录</button>
	<button id="save">更新资讯信息</button>
</body>

</html>

恬淡如雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有关AJAX的知识点

XMLHttpRequest使用方法1. 创建XMLHttpRequest对象2. 使用open方法设置和服务器的交互信息3.设置requestHeader()4. 设置发送的数据，开始和服务器端交互5.取得响应，注册事件6.如果请求完成，并且响完成，可以获取到响应数据7.响应解码 MIME-TYPE常用请求使用............
复制链接

扫一扫