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 对象的属性

属性名	描述
status	请求响应的状态码，如200,404,500等, 用这个属性来判断,只读，下面有常见的值
statusText	请求响应，以字符串的形式返回状态码，如OK, Not Found，只读
readyStatus	当前对象状态的数字，只读， 下面有专门的讲解数字的意义
responseText	响应过来的数据转换成字符串的形式，只读
responseXML	将响应信息格式化为Xml Document对象并返回，只读

二.二 XMLHttpRequest 的处理函数

接收函数名	描述
onreadystatuschange	readyStatus 改变时，调用的函数。 用这个事件，来接收对象的状态
onerror	ajax 执行错误时，用这个事件来接收
onprogress	内容加载 完成后，用这个事件来接收
onload	文档加载 完成后，用这个事件来接收

二.三 XMLHttpRequest 的方法

方法名	描述
abort()	取消请求
open(method,url,async)	打开网址，以get,post的方式， url为网址，true时表示 异步（默认），false表示同步
send(param)	发送请求,里面可以放置请求的参数(post提交时)，也可以在open()中的url里面带参数(get)
setRequestHeader(key,value)	在发送之前，以key,value键值对的形式设置参数,如文档类型content-type
getAllResponseHeaders()	响应成功之后，得到所有的响应头信息
getResponseHeader(key)	响应成功之后 ，得到key 的响应信息

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

二.四 readyStatus 数字代表意义

数字值	描述
0	已创建xmlHttpRequest 对象，未初始化信息，如未open()网址,setRequestHeader()头部信息
1	加载中，未调用send()方法
2	已加载，调用了send()方法，头部不可用
3	交互成功，已收到部分数据，但状态和响应头不可用
4	交互完成，所有数据都可以正常使用

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

二.五 status 常见的状态码

数字值	英文值	描述
200	OK	OK,服务器成功返回页面，未出错
400	Bad Request	语法错误，导致服务器不识别请求
401	Unauthorized	请求需要用户认证
404	Not Found	指定的url在服务器上未找到
500	Internal Server Error	服务器遇到意外错误，无法完成请求，是服务器内部代码的问题
503	Service Unavailable	由于服务器过载或者是维护，而无法处理请求

二.六 创建 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;
}

三.四 测试运行

之前：

点击按钮，进行查看