AJAX学习

最新推荐文章于 2023-06-20 17:24:26 发布

嘧

最新推荐文章于 2023-06-20 17:24:26 发布

阅读量280

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qq_50748038/article/details/126528943

版权

1.什么是AJAX？

2.XMLHttpRequest

2.1.XMLHttpRequest使用方法

1.什么是AJAX？

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

2.XMLHttpRequest

浏览器在XMLHttpRequest类上定义了它们的HTTP API,这个类的每个实例都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和提取响应数据。XMLHttpRequest对象是AJAX的基础，用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2.1.XMLHttpRequest使用方法

发起ajax请求的步骤：

1.创建XMLHttpRequest对象

var xhr = new XMLHttpRequest()

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

配置请求方式，设置请求接口地址
open(请求方式,URL)

请求方式取值：GET/POST/HEAD/DELETE/OPTIONS/PUT 不区分大小写
GET:用于常规请求，适用于URL完全指定请求资源，
POST:用于HTML表单，它在请求主体中包含额外数据，且这些数据常存储到服务器上的数据库中。

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

3.设置请求头(需要在open方法和send方法之间调用)

json格式数据

xhr.setRequestHeader('Content-Type','application/json')

发送表单数据

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

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

xhr.setRequestHeader('Content-type', 'text/plain);

发送html文本

request.setRequestHeader('Content-type', 'text/html);

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

send() 参数：请求主体内容，如果没有，为null，或者省略。

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

5.接收响应，注册事件

xhr.onreadystatechange=function(){
		//如果请求发送完成 请求成功
		if(xhr.readyState===4&&xhr.status===200){
			console.log(xhr.responseText);//responseText：作为响应体返回的文本
			console.log(xhr.responseXML);//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或服务器的响应完成时，所有的浏览器都触发该事件

响应解码 MIME-TYPE

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

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

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

console.log(JSON.parse(xhr.responseText));

3.常用请求使用

1.使用get发送有参请求

<!-- 引入QS序列化工具 -->
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>

<!-- 查询城市天气请求 -->
<button onclick="getCity()">获取天气</button>
<script>
  function login() {
    var xhr = new XMLHttpRequest()
    //url序列化  ?city="suzhou"&type="1"
    // 第一种形式 拼接字符串
    //xhr.open('get','https://api.muxiaoguo.cn/api/tianqi?' + 'city=' + '苏州' + '&' + 'type=' + '1' + '&api_key=779d7e46708290a5');
    // 第二种形式 传递序列化后的参数
    var params = {
      city: '苏州',
      type: 1
    }
    // 参数序列化 要先引入QS序列化工具
    // Qs.stringify(params)
    xhr.open('get','https://api.muxiaoguo.cn/api/tianqi?' + Qs.stringify(params));
    xhr.send();// 没有要发送的数据
    console.log(Qs.stringify(params));
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
      }
    }
  }
</script>

2.使用post发送无参请求

<button onclick="postNo()">post无参</button>
<script>
  function postNo() {
    var xhr = new XMLHttpRequest()
    xhr.open('post','接口URL');
    xhr.send();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 响应成功做的事
      }
    }
  }
</script>

3.使用post发送有参请求

<button onclick="login()">登录</button>
<script>
  function login() {
    var xhr = new XMLHttpRequest();
    xhr.open('post','登录接口地址');
    var params = {
      password: "123321",
      username: "admin"
    }
    // 登录接口Content-type为json格式
    xhr.setRequestHeader('Content-type','application/json;charset=utf-8');
    // json格式  前端js对象转成json格式得对象
    xhr.send(JSON.stringify(params))
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
      }
    }
  }
</script>

4.JQuery中的Ajax

$.ajax({
请求路径url:"",
请求方式method:"",
请求头headers:{},
携带参数属性data:{}
请求成功回调success(res){},
请求失败回调error(err){}
   .....
});
配置ajax全局请求
$.ajaxSetup({
   headers:{
       "Authorization":token,
       "application":'json'
   },
})

具体应用案例：

<!-- 引入QS -->
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
    <!-- 引入jQuery -->
    <script src="../1-jquery.js"></script>
    <script>
        $(function(){
            // 声明全局ajax请求基础路径
            var baseURL = "http://http://43.142.188.209:8002";
            var obj={
                    page:1,
                    pageSize:15
                }
            // 登录按钮：点击登录 获取token,存储起来 配置到ajax全局
            $('.login').click(function(){
                var obj = {
                    username:'admin1',
                    password:123321
                }
                // 发送登录请求
                $.ajax({
                    // 请求路径
                    url:baseURL+'/user/login',
                    // 请求方式
                    method:'post',
                    // 请求头
                    headers:{
                        "Content-Type":"application/json"
                    },
                    // 携带参数
                    data:JSON.stringify(obj),
                    // 成功回调
                    success(res){
                        // 存储token
                        sessionStorage.setItem('token',res.data.token);
                        // 全局配置请求全部携带token 除登录外 写在登录中的
                        $.ajaxSetup({
                            headers:{
                                "Authorization":sessionStorage.getItem('token'),
                            }
                        })
                    },
                    // 失败回调
                    error(res){}
                })
            })
        })
    </script>
    <button class="login">登录</button>