http之发送Ajax 请求

61 篇文章 3 订阅
2 篇文章 0 订阅

发送Ajax 以为这可以进行异步操作;
这样会使执行的效率会更高

Ajax 的概念
在浏览器中,我们可以在不刷新页面的情况下,通过ajax的方式去获取一些新的内容。

Ajax:Asynchronous Javascript And XML(异步 JavaScript 和 XML)。它并不是凭空出现的新技术,而是对于现有技术的结合。
Ajax 的核心是 js 对象:XMLHttpRequest。


发送 Ajax 请求的五个步骤
其实也就是 使用 XMLHttpRequest 对象的五个步骤。

我们先回忆一下,一个完整的HTTP请求需要的是:

请求的网址、请求方法get/post。

提交请求的内容数据、请求主体等。

接收响应回来的内容。

发送 Ajax 请求的五个步骤:

(1)创建异步对象。即 XMLHttpRequest 对象。

(2)使用open方法设置请求的参数。open(method, url, async)。
参数解释:请求的方法、请求的url、是否异步。

(3)发送请求。

(4)注册事件。 注册onreadystatechange事件,状态改变时就会调用。

如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。

(5)获取返回的数据。


对于原生js的来说,如何发送Ajax请求呢?

  • get 请求;
<script type="text/javascript">
    // 绑定点击事件
    document.querySelector('#btnAjax').onclick = function () {
        // 发送ajax 请求 需要 五步

        // (1)创建异步对象
        var ajaxObj = new XMLHttpRequest();

        // (2)设置请求的参数。包括:请求的方法、请求的url。
        ajaxObj.open('get', '02-ajax.php');

        // (3)发送请求
        ajaxObj.send();

        //(4)注册事件。 onreadystatechange事件,状态改变时就会调用。
        //如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。
        ajaxObj.onreadystatechange = function () {
            // 为了保证 数据 完整返回,我们一般会判断 两个值
            if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                
                // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
                console.log('数据返回成功');

                // 数据是保存在 异步对象的 属性中
                console.log(ajaxObj.responseText);

                // 修改页面的显示
                document.querySelector('h1').innerHTML = ajaxObj.responseText;
            }
        }
    }
</script>
  • post 请求;
    这里多了一步, 需要设置 Content-type:
<script type="text/javascript">

    // 异步对象
    var xhr = new XMLHttpRequest();

    // 设置属性
    xhr.open('post', '02.post.php');

    // 如果想要使用post提交数据,必须添加此行
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    // 将数据通过send方法传递
    xhr.send('name=fox&age=18');

    // 发送并接受返回值
    xhr.onreadystatechange = function () {
        // 这步为判断服务器是否正确响应
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };
</script>

将这两者封装

后面引入这个js文件就可以使用了

// 方法:将 get 跟post 封装到一起
/*
	参数1:url
	参数2:数据
	参数3:请求的方法
	参数4:数据成功获取以后,调用的方法
*/
function ajax_tool(url,data,method,success) {
	// 异步对象
	var ajax = new XMLHttpRequest();

	// get 跟post  需要分别写不同的代码
	if (method=='get') {
		// get请求
		if (data) {
			// 如果有值
			url+='?';
			url+=data;
		}else{

		}
		// 设置 方法 以及 url
		ajax.open(method,url);

		// send即可
		ajax.send();
	}else{
		// post请求
		// post请求 url 是不需要改变
		ajax.open(method,url);

		// 需要设置请求报文
		ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

		// 判断data send发送数据
		if (data) {
			// 如果有值 从send发送
			ajax.send(data);
		}else{
			// 木有值 直接发送即可
			ajax.send();
		}
	}

	// 注册事件
	ajax.onreadystatechange = function () {
		// 在事件中 获取数据 并修改界面显示
		if (ajax.readyState==4&&ajax.status==200) {
			// console.log(ajax.responseText);

			// 将 数据 让 外面可以使用
			// return ajax.responseText;

			// 当 onreadystatechange 调用时 说明 数据回来了
			// ajax.responseText;

			// 数据成功获取以后,执行方法success()。
			//我们把获取的数据作为 success()的参数,意思是:
			//success方法是外面的,数据是里面给的。那数据就变相地传递到了外面去【重要】
			success(ajax.responseText);
		}
	}

}

使用jQuery 发送Ajax请求

这里的话,就没有post 与 get 之分了, 直接在type 类型中修改就可以了

$.ajax({
				url:"data.php",
				dataType:"text",
				type:"get",
				success:function(data){
					alert(data);
					//$("#showInfo").html(data);
				},
				error:function(e){
					console.log(e);
				}
			});

  $.ajax({
        type: "GET",
        url: "localhost:8080/travle/news/list",
        data: { page: $("#page").val(), limit: 5 },
        dataType: "JSON",
        success: function(result) {}
      });

这里的dataType设置为jsonp 就可以就行跨域操作了(但是只能发送get请求)


Vue 中发送Ajax请求
这是需要使用axios ,官方的vue-resouce ,这里不推荐使用,因为官方也不管了

通过 引用axios后, 可以直接
axios.get()/post()

axios.get('/api/ajax/detailmovie',{
  params:{
      movieId:341
  }
})
  .then(res=>{
      if(res.status===200){
          return res.data
      }else{
          return 'error'
      }
  })  
  .then(data=>{
      console.log(data)
  })

如果跨域的话,还要配置相关的信息才能使用;
需要在vue.config.js 中

 devServer:{
        proxy:{
            // 代理的
            'api/':{
                target:'http://xxx.xxx.xxx/',
                changeOrigin:true,
                // pathRewrite:{
                //     '/api':''
                // }
            }
        }

    }

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Spring Boot中发送Ajax请求,你可以按照以下步骤进行操作: 1. 首先,在前端页面中引入jQuery库,你可以使用如下方式引入:。 2. 接着,编写发送Ajax请求的JavaScript代码。你可以使用jQuery的`$.ajax()`方法或`$.post()`方法来发送请求。以下是一个示例代码: ```javascript $.ajax({ url: "your-url", // 替换为你的请求地址 type: "POST", // 请求方法,可以是GET、POST等 data: { // 请求参数,如果有的话 key1: value1, key2: value2 }, success: function(response) { // 请求成功后的处理逻辑 console.log(response); }, error: function(xhr, status, error) { // 请求失败后的处理逻辑 console.log(error); } }); ``` 或者使用`$.post()`方法: ```javascript $.post("your-url", { key1: value1, key2: value2 }) .done(function(response) { // 请求成功后的处理逻辑 console.log(response); }) .fail(function(xhr, status, error) { // 请求失败后的处理逻辑 console.log(error); }); ``` 3. 在Spring Boot后端,编写对应的Controller来处理Ajax请求。你可以使用`@RestController`注解来标识一个Controller类,并使用`@RequestMapping`注解指定请求的URL路径。以下是一个示例代码: ```java @RestController public class AjaxController { @RequestMapping(value = "/your-url", method = RequestMethod.POST) public String handleAjaxRequest(@RequestParam("key1") String value1, @RequestParam("key2") String value2) { // 处理Ajax请求的业务逻辑 // 返回响应结果 return "Response"; } } ``` 4. 最后,你可以根据具体的业务需求进行处理Ajax请求的逻辑。在Controller中,你可以根据请求参数进行相应的处理,并返回响应结果。 请注意,为了解决Ajax发送跨域请求的问题,你可能还需要在后台添加相应的配置。根据引用提供的信息,你可以在前端Ajax请求中添加如下代码:`xhrFields: {withCredentials: true}`。此外,在后台服务器中,你还需要设置相关的跨域配置。 希望以上信息对你有帮助!如有更多问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值