AJAX(原生—介绍及使用)

什么是ajax

asynchronous javascript and xml（异步的js和xml）-->异步的js与json(当下主流)
是一种改善用户体验度的技术，实质上是利用浏览器内置的ajax对象(数据类型是XMLHttpRequest)向服务器发送异步(ajax向服务器发送请求时，不会打断用户当前的操作)的请求，服务器将处理之后的结果返回给ajax，通过脚本获取服务器返回的数据更新页面，整个过程当中，页面不会被销毁。
​
优点:
1.页面不会刷新，用户体验度较好(表单验证)
2.减少了浏览器与服务器的数据交互量，提高了响应速度
3.是一个标准的技术，不需要安装任何插件就可以直接使用

获取ajax对象

ActiveXObject   XMLHttpRequest
var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    //低版本的IE浏览器
    xhr = new ActiveXObject('Microsoft.XMLHttp');
}

ajax对象相关属性

onreadystatechange:给ajax对象绑定一个事件函数(注册监听器)
readyState:ajax对象与服务器通讯的状态 0 1 2 3 4，当状态发生改变时，事件函数会被触发
           0(未初始化):对象已创建，但是尚未调用open方法
           1(已初始化):对象已创建，但是尚未调用send方法
           2(发送数据):已调用send方法
           3(数据传送中):ajax已接收部分返回数据
           4(响应结束)：ajax已接收了全部数据
responseText:服务器返回的是文本数据类型
responseXML：服务器返回的是xml数据类型
status:服务器响应的状态码(200 500 404)

ajax向服务器发送请求

--get请求
step1.获取ajax对象
step2.初始化，建立连接
      xhr.open("get","check.do?username=zs",true/false);
      true：ajax向服务器发送异步请求，请求过程中，不会打断用户操作
      false:ajax向服务器发送同步请求，请求过程中，页面会被锁住，用户做不了其他操作
step3.给ajax绑定事件函数
      xhr.onreadystatechange = function(){
          
      }    
step4.发送请求
      xhr.send();
--post请求
step1.同上
step2.初始化
      xhr.open("post","check.do",true/false);
      xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
step3.同上
step4.发送请求
      xhr.send("username=zs&password=1234");