Ajax原理

什么是Ajax

AJAX全称(Async Javascript and XML) 即异步的JavaScript 和XML,是一种创建交互式网页应用的网页开发技术,可以在不重新加载整个网页的情况下,与服务器交换数据,并且更新部分网页。

为什么要用Ajax

  我的理解：在没有ajax的情况下，前端想要请求后端的数据，只能通过同步的方式请求，比如通过java中的HttpServlet请求。但是这样请求数据有个弊端，就是前端获取到数据后必须通过刷新页面的方式才能将数据渲染到页面中。
  因此我们想到了用异步的方式请求数据，在页面保持不动的情况下去请求数据，然后也不需要刷新页面就可以将数据直接显示到页面上。

怎么实现Ajax

Ajax的原理简单来说就是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面

具体实现过程

• 创建 Ajax的核心对象 XMLHttpRequest对象

• 通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接

• 构建请求所需的数据内容，并通过XMLHttpRequest 对象的 send() 方法发送给服务器端

• 通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态

• 接受并处理服务端向客户端响应的数据结果

• 将处理结果更新到 HTML页面中

代码实现

• 新建对象new XMLHttpRequest();

• 建立连接open(method, url, [async][, user][, password])

method：表示当前的请求方式，常见的有GET、POST
url：服务端地址
async：布尔值，表示是否异步执行操作，默认为true
user: 可选的用户名用于认证用途；默认为null
password: 可选的密码用于认证用途，默认为null

• 发送数据send([body])

body: 在 XHR 请求中要发送的数据体，如果不传递数据则为 null

        var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();

封装好方法

显然通过这种方式发送异步请求有些麻烦，所以我们一般都用第三方框架封装好的方法来使用Ajax

在JQuery中发送ajax

$("button").click(function(){
    $.ajax({url:"demo_test.txt",success:function(result){
        $("#div1").html(result);
    }});
});

在vue中发送ajax (axios)

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://www.runoob.com/try/ajax/json_demo.json')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})