Ajax基础

ajax是什么

ajax简介

链接
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
Ajax是浏览器提供的一套方法，主要作用就是在不刷新页面的情况下向服务器端发请求与服务器端进行交互从而更改客户端页面的数据或状态，主要目的就是为了提高用户体验。

应用场景

situation1：比如浏览网页的时候浏览到底部有一个‘加载更多’按钮，之后跟多的数据就会在页面中渲染出来，在呈现数据的过程中页面是没有刷新的只是在原有数据的后面加上了数据，在不刷新页面的情况下向服务器发送请求，然后服务器向客户端返回数据。

situation2： 另外一个场景大家更熟悉了，比如某些手游新人注册的时候，当你输入一个用户名的时候会立马弹出该用户名已注册，然后不得不更换一个用户名直到用户名没有被其他人注册过。
如果用户名没有被注册就提示可用。大家应该能想到注册页面是表单form。这样的好处是避免用户填完所有的注册信息发送到浏览器后再返回错误，避免页面跳转，避免用户重新填写表单的情况。

ajax的作用

ajax的原理

ajax引擎中间人，ajax帮浏览器去发送请求，ajax接收服务器端的响应。当ajax接收到服务器端的数据后我们再使用dom方法将内容添加到页面当中。这样就可无刷新更新数据以及用户可进行其他操作。

	<script type="text/javascript">
	// 向服务器发送请求
		// 1.创建ajax对象
		var xhr = new XMLHttpRequest();
		// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
		// 1)请求方式 2)请求地址
		xhr.open('get', 'http://localhost:3000/first');
		// 3.发送请求
		xhr.send();
		// 4.获取服务器端响应到客户端的数据
		xhr.onload = function (){
			console.log(xhr.responseText)
		}
	</script>

ajax获取服务端响应数据的另一种方式
ajax状态码与http状态码（不知道http状态码可以自己查）不同。ajax状态码是创建一个ajax对象，配置ajax对象，发送请求，以及接收完服务端响应数据的过程中对应的一个数值。这个数值就是ajax状态码。通过状态码我们知道当前请求进行到了哪一步。
ajax状态码主要有以下五种：

0：未初始化 – 尚未调用.open()方法；
1：启动 – 已经调用.open()方法，但尚未调用.send()方法；
2：发送 – 已经调用.send()方法，但尚未接收到响应；
3：接收 – 已经接收到部分响应数据；
4：完成 – 已经接收到全部响应数据，而且已经可以在客户端使用了

	<script type="text/javascript">
		var xhr = new XMLHttpRequest();
		//状态码一共五个
		// 0 已经创建了ajax对象 但是还没有对ajax对象进行配置
		console.log(xhr.readyState);
		xhr.open('get', 'http://localhost:3000/readystate');
		// 1 已经对ajax对象进行配置 但是还没有发送请求
		console.log(xhr.readyState);
		// xhr.send();
		// 当ajax状态码发生变化的时候出发
		xhr.onreadystatechange = function() {
			// 2 请求已经发送了
			// 3 已经接收到服务器端的部分数据了
			// 4 服务器端的响应数据已经接收完成
			console.log(xhr.readyState);
			// 对ajax状态码进行判断 如果状态码的值为4就代表数据已经接收完成了
			if (xhr.readyState == 4) {
				console.log(xhr.responseText);
			}
		} 

		xhr.send();
		
	</script>

基于promise 发送ajax请求

  <script type="text/javascript">
    /*
      基于Promise发送Ajax请求
    */
    function queryData(url) {
      var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
    // queryData('http://localhost:3000/data')
    //   .then(function(data){
    //     console.log(data);
    //   },function(info){
    //     console.log(info)
    //   });
    // ============================
    // 发送多个ajax请求并且保证顺序
    queryData('http://localhost:3000/data')
      .then(function(data){
        console.log(data)
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
        console.log(data);
        return queryData('http://localhost:3000/data2');
      })
      .then(function(data){
        console.log(data)
      });
  </script>
}

如何实现ajax

二级目录

三级目录