原生Ajax介绍

---

一、Ajax简介

Ajax是一种异步、无刷新 (或者说局部页面刷新) 技术。

作用： 实现异步请求，在不加载页面的情况下刷新页面数据
传统方式：jsp刷新页面时，需要重新加载整个页面

二、同步与异步

2.1 同步

现在的大部分请求都是基于同步，所谓同步就是说必须等待请求之后给我返回结果了我才能继续往下操作。好比你要烧水，切菜，做饭。现在是同步，你必须等水烧开再去干其他事情。

2.2 异步

异步就是，请求发送之后，不管你是否返回结果，我继续往下操作。比如，你烧水的同时，不管水烧没烧开，你继续你其他的工作，去切菜。

2.3 同步与异步的区别

同步方式发送请求： 发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会处于一直等待过程中。(卡死)
异步方式发送请求： 发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。

三、Ajax使用

3.1 创建Ajax请求对象

XMLHttpRequest 是 AJAX 的基础：XMLHttpRequest 用于在后台与服务器交换数据。

//封装创建请求对象函数
function createXMLHttpRequest(){
	  //新版本浏览器创建请求对象
     if (window.XMLHttpRequest){
         return new XMLHttpRequest();
     } else{     
         //IE5,IE6老版本浏览器
         return  new ActiveXObject("Microsoft.XMLHTTP");
     }
 }

3.2 发送请求信息

GET方式：

xmtHttp.open("GET","/day_web_Filter/LoginServlet.do?username="+username+"&password="+password,true);
xmtHttp.send(null);

POST方式：

xmtHttp.open("POST","/day_web_Filter/LoginServlet.do",true);
//POST设置请求头(千万别丢了)
xmtHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmtHttp.send("username="+username+"&password="+password);

3.3 获取服务器响应

XMLHttpRequest获取数据：

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: “OK” 404: 未找到页面

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

 xmtHttp.onreadystatechange = function (){
     console.log(xmtHttp.readyState)
     if(xmtHttp.readyState == 4 && xmtHttp.status == 200){
          //1.获取文本数据
          let msg = xmtHttp.responseText;
          //2.获取XML数据
          //let data = xmlHttp.responseXML;
          document.getElementById("msg").innerHTML = msg;
          document.getElementById("msg").style.color="red";

     }
 }

四、Ajax的封装

4.1 封装ajax-util.js工具

//1.创建一个创建XMLHttpRequest对象函数
function createXMLHttpRequest(){
  if (window.XMLHttpRequest){
    //主流浏览器
    return new XMLHttpRequest();
  }
  else{   
    // code for IE6, IE5
    return  new ActiveXObject("Microsoft.XMLHTTP");
  }
}

//2.创建ajax请求函数
/*
* -请求方式:method
* -请求的URL地址: url
* -是否异步: aync
* -请求参数: data
* -响应数据类型: dataType
* -回调函数(处理响应数据的函数):callback
* */
function ajax(option){
  //1.创建请求对象
  let xmlHtpp = createXMLHttpRequest();
  if(option.method == undefined){
    //默认请求方式为GET
    option.method = "GET";
  }
  if(option.aync == undefined){
    //默认异步
    option.aync = true;
  }
  //2.发送请求
  xmlHtpp.open(option.method,option.url,option.aync);
  if(option.method == "POST"){
    xmlHtpp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  }
  xmlHtpp.send(option.data);
  //3.获取响应数据
  xmlHtpp.onreadystatechange = function(){
    if(xmlHtpp.readyState == 4 && xmlHtpp.status == 200){
      let data = null;
      if(option.dataType == "XML"){
        //默认响应的数据为字符串数据
        data = xmlHtpp.responseXML;
      }else if(option.dataType == "STRING"){
        data = xmlHtpp.responseText;
      }else if(option.dataType == "JSON"){
        data = JSON.parse(xmlHtpp.responseText);
        //data = eval('('+xmlHtpp.responseText+')');
      }else{
        data = xmlHtpp.responseText;
      }
      //调用回调函数
      option.callback(data);
    }
  }
}

4.2 ajax-util使用

 ajax({
     method:"POST",
     aync:true,
     url:"/day_web_Filter/LoginServlet.do",
     data:"username="+username+"&password="+password,
     dataType:"STRING",
     callback:function(data){
            let obj = document.getElementById("msg");
            obj.innerHTML = data;
            obj.style.color = "red";
     }
 });

---

总结

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
通过它可以向后端拿取数据，将该数据给到前端，再通过js实现页面数据渲染，是实现前后端数据的交互的桥梁。