【Javascript基础】Ajax初识

在之前的开发中，一直使用Jquery的$.ajax完成异步请求的任务，一直对底层没有深入的了解，今天看到mdn上面一篇文章介绍浏览器原生AJAX请求的知识，这里稍微整理一下自己学的内容.

mdn原文地址是:https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

1.什么是AJAX?

AJAX的全称是Asynchronous Javascript and XML，中文对应名称异步JavaScript和XML,它主要通过是XMLHttpRequest对象来和服务器端完成数据的通信.

它可以接收多种信息格式，其中包括json, xml, html甚至是文本文件，AJAX最令人称赞的特性就是它的异步性，它可以在不刷新页面的情况下，更新页面部分的内容（一般都是用户触发的事件）.

总而言之，AJAX的特点可以概括为以下两类:
1. 在不重新刷新页面的条件下，向服务器发送请求；
2. 可以从服务器获取数据；

2. 一个简单的例子

2.1 创建AJAX请求的对象

AJAX请求对象主要是通过XMLHttpRequest对象来完成;

  var httpRequest;
  if(window.XMLHttpRequest) {
     httpRequest = new XMLHttpRequest();
  } else if (window.ActiveXObject) {//为了兼容老的IE浏览器
       httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
  }

2.2 设置如何处理AJAX的Response数据

说明: 设置XMLHttpRequest对象的onreadystatechange来设置一旦接受AJAX的Response后的处理操作.

httpRequest.onreadystatechange = function() {
    //这里需要判断当前的AJAX请求的Response可以处理了，通过readyState判断
    if(httpRequest.readyState == XMLHttpRequest.DONE) {
            if(httpRequest.status === 200) {
                alert(httpRequest.responseText);
                 //perfect.
            } else {
                    //状态码不是200,表明发生了错误
                    //TODO:
            }
    }else {
         //表示当前的请求的response还没有接收完成
    }
};

2.3 是时候发送请求了…

上面两个步骤，定义好请求对象，已经请求接收到response后的处理方式，接下来就是发送请求了，

httpRequest.open('GET', 'http://localhost:3000/rest', true);
//httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 httpRequest.send(null);

解释:
1. open方法: 它接收三个参数，第一个是http 请求的方法，可以是”GET”,”POST”, “DELETE”等其他HTTP协议中定义的方法，这里要注意，这个参数必须大写，不能写成”get”; 第二个参数用来设置请求的资源路径，第三个参数用来表示当前请求是“异步”还是“同步”，默认是异步(true);
2. setRequestHeader方法: 这个方法用来设置请求的报头，在发送POST的表单请求时，需要设置Content-Type;
3. send方法: 这个方法发送请求，它接收一个参数，这个参数就是请求body里面的内容.