JS的原生的Ajax(一)

古语有云: 万恶淫为首，百善孝为先。 我们后辈当自勉。

这是最下面的一章,没有了，​​跳转到主页​​

一. Ajax

Ajax, 全称是 Asynchronous JavaScript And XML, 异步JavaScript 和XML.

可以在不更新整个页面的情况下，刷新数据，通俗来讲，可以局部刷新页面。 以前的web开发时，前台哪怕进行一个小小的交互，如验证用户名是否重复时，也会往服务器端发送一个请求，服务器端接收响应之后，重新渲染页面，导致新展示的页面并不是原先的那个填写的页面， 所以，常常要把所有的验证都放置在提交的时候进行验证，并不能随时填写，随时验证。 现在前后端分离，就用的是Ajax和JSON来进行传递数据。

但Ajax破坏了浏览器的后退和加入收藏书签的功能。 老蝴蝶认为， Ajax的优点是远远大于缺点的，应该提倡使用的。 浏览器的后退和加入收藏书签可以通过其他方式来达到类似的功能效果。

二. Ajax 的对象 XMLHttpRequest

原生的JavaScript 的Ajax, 是通过 XMLHttpRequest 对象来进行处理的， 所以要学习原生的Ajax ,就必须要对XMLHttpRequest 对象进行详细的了解。 现在的JQuery 已经封装了 Ajax。

二.一 XMLHttpRequest 对象的属性

二.二 XMLHttpRequest 的处理函数

二.三 XMLHttpRequest 的方法

其中， readyStatus 的数字所代表的意义是这样的

二.四 readyStatus 数字代表意义

其中，可知，当状态是4时，表示发送ajax 成功，并且接收到后端传递过来的数据。 成功不成功不能确定。

二.五 status 常见的状态码

二.六 创建 XmlHttpRequest 对象

在创建HttpRequest对象时， 要注意兼容性 ，特指的是IE6版本， IE的往上版本没有这些问题。

function createHttpRequest(){
  var httpRequest;
  if(window.XMLHttpRequest){
    httpRequest=new XMLHttpRequest();
  }else{  //如果是IE6, 用这个构建
    httpRequest=new ActiveXObject("Microsoft.XMLHTTP");
  }
  return httpRequest;
}

三. 原先Ajax 小例子测试

三.一 原生的 Ajax的步骤

步骤很简单的。

1 . 创建 XMLHttpRequest 对象

2 . 调用open() 打开网址，可通过 setRequestHeader 设置头部信息

3 . 调用send() 方法发送

4 .通过 readyState=4 和 status=200 来判断请求成功

5 . 成功之后，通过responseText来得到后端的返回数据，前端进行处理数据

三.二 前端页面展示

<div>
  <span id="respSpan"></span> <br/>
  <button id="btn" onClick="getAjaxRequest()">原生的ajax</button>
</div>
<script type="text/javascript" src="/SpringMVC09/js/calc.js"></script>

三.三 JS的Ajax处理

function getAjaxRequest(){
  //1. 创建XmlHttpRequest对象
  var xmlHttpRequest=createHttpRequest();
  
  //2 . 设置请求的路径和地址
  xmlHttpRequest.open("GET","voidJson",true);

  //3 .设置请求的头部，来设定类型
  xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");
  
  //4. 发送
  xmlHttpRequest.send();
  //5. 进行判断后处理
  xmlHttpRequest.onreadystatechange=function(){
    if(xmlHttpRequest.readyState==4){ //状态数字是4 
      if(xmlHttpRequest.status==200){ //响应码是: 200,正常的
        responseEffect(xmlHttpRequest); //响应生效,单独写个响应的方法
      }else if(xmlHttpRequest.status==404){ //是404,错误的url
        alert("错误的url地址");
      }
      //... status 可判断多个
    }
    //... readyState 可判断多个
  }
  
}
//创建 对象
function createHttpRequest(){
  var httpRequest;
  if(window.XMLHttpRequest){
    httpRequest=new XMLHttpRequest();
  }else{
    httpRequest=new ActiveXObject("Microsoft.XMLHTTP");
  }
  return httpRequest;
}
//响应结果
function responseEffect(xmlHttpRequest){
  //获取值后进行显示 
  var text=xmlHttpRequest.responseText;
  var span=document.getElementById("respSpan");
  span.innerHTML=text;
}

三.四 测试运行

之前：

点击按钮，进行查看