http之发送Ajax 请求

发送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':''
                // }
            }
        }

    }