AJAX基本使用

AJAX

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

一、全局刷新和局部刷新

全局刷新：浏览器在得到服务端返回的数据后，只能展示得到数据不能同时展示浏览器之前的内容
局部刷新：浏览器在得到服务端返回的数据后，同时展示原有的数据和得到的新数据

二、全局刷新与局部刷新的工作原理

全局刷新工作原理：
- 必须由浏览器负责将【请求协议包】推送到服务端
- 导致服务端将【响应协议包】直接推送到浏览器的内存
- 导致浏览器内存中原有的数据被覆盖
- 导致此时浏览器在展示数据时，只能展示得到响应数据无法展示原有数据
局部刷新工作原理：
- 必须禁止由浏览器向服务端发送请求【此时不能使用超链接、form、window.location】
- 由浏览器内存中一个【脚本对象】代替浏览器将【请求协议包】发送到服务端
- 导致服务端返回的【相应包】直接推送到这个【脚本对象】上
- 导致脚本对象内容被覆盖，但是此时浏览器内存中绝大多数内容没有受到影响
- 开发人员从【脚本对象】上取出【响应数据】更新到浏览器中指定的标签上
- 此时浏览器在展示数据时，就可以既展示响应结果同时又可以展示原有的内容

三、AJAX：

AJAX帮助开发人员管理浏览器中【异步请求对象】

命令【异步请求对象】向服务端发送请求协议包
读取【异步请求对象】接收的响应数据

AJAX名词：Asynchronous Javascript And XML

四、AJAX开发步骤

在浏览器内存中，创建一个脚本对象，这个脚本对象就是【异步请求对象】
为【异步请求对象】添加【工作状态监听器】帮助开发人员确认何时从【异步请求对象】身上得到服务端返回响应数据
初始化【异步请求对象】
- 通知【异步请求对象】采用何种方式发送【请求协议包】 POST/GET
- 通知【异步请求对象】本次要访问的资源文件地址
- 通知【异步请求对象】在其工作期间，浏览器是否会等他【同步请求、异步请求】
命令通知【异步请求对象】代替浏览器发送请求

五、同步请求与异步请求区别

同步请求：在当前异步请求对象工作期间，浏览器只能处于等待状态，直到当前异步请求对象工作完毕，浏览器才可以委派其他异步请求对象发送请求

异步请求：在当前异步请求对象工作期间，浏览器可以继续委派其他的异步请求对象发送其他请求

六、AJAX命令

1、如何创建一个【异步请求对象】 var xmlHttp = new XMLHttpRequest(); 2、如何为【异步请求对象】绑定【工作状态监听器】 xmlHttp.onreadystatechange = function(){}; 3、如何初始化【异步请求对象】,请求方式、请求路径、浏览器是否等待 xmlHttp.open("post/get","/myweb/oneServlet?uname=smith",true) 4、如何命令【异步请求对象】代替浏览器发送请求 xmlHttp.send()

七、异步请求对象工作状态：5种

readyState属性：存储当前的工作状态

含义：xmlHttp.readyState

状态发生位置

0 异步请求对象已经被创建完毕 var xmlHttp = new XMLHttpRequest();

1 异步请求对象已经被初始化完毕 xmlHttp.open("get","/myweb/oneServlet?uname=smith",true)

2 异步请求对象已经发送了请求协议包，如果正常情况，此时服务端应该正在处理这个请求 xmlHttp.send()

3 异步请求对象已经得到了服务端返回的响应包，此时异步请求对象正在解析响应包中响应体内容

4 异步请求对象已经解析数据完毕，此时数据是符合脚本规范的数据，开发人员可以提取响应数据

八、如何从异步请求对象身上得到响应数据，进行局部刷新

function fun1(){
    //1、创建异步请求对象
    var xmlHttp = new XMLHttpRequest();
    //2、为【异步请求对象】绑定【工作状态监听器】
    xmlHttp.onreadystatechange = function(){
        //每当事件处理函数被调用时，都需要询问异步请求对象当前工作状态
        if(xmlHttp.readyState==4&&xmlHttp.status==200){
           //读取响应数据
           var data = xmlHttp.responseText;
           callBack(data);
        }
    };
    //3、初始化异步请求对象
    var param = document.getElementById("dname").value;
    xmlHttp.open("get","/myweb/dep/add.doo?dname="+param,true);
    //4、通知异步请求对象代替浏览器发送请求协议包
    xmlHttp.send()
}

//局部刷新实现函数
function callBack(param){
    $("div").text(param);
}

九、如何将服务端【高级类型对象】交给异步请求对象处理

1、异步请求对象和浏览器无法解析服务端返回的高级类型对象

2、异步请求对象和浏览器只能接受来自于服务端发送的基本类型数据（int,String）

3、只能将高级类型对象转变为标准的JSON格式字符串交给异步请求对象

@WebServlet("/OneServlet")
public class OneServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public OneServlet() {
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String jsonStr = "{'deptNo':10,'dname':'金融事业部','loc':'上海'}";
        response.setCharacterEncoding("utf-8");
        response.getWriter().write(jsonStr);
    }

}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function fun1(){
      //1、创建异步请求对象
      var xmlHttp = new XMLHttpRequest();
      //2、为【异步请求对象】绑定【工作状态监听器】
      xmlHttp.onreadystatechange = function(){
          //每当事件处理函数被调用时，都需要询问异步请求对象当前工作状态
          if(xmlHttp.readyState==4&&xmlHttp.status==200){
             //读取响应数据
             var data = xmlHttp.responseText;
             //javaScript eval函数可以将【JSON格式字符串】转变为JSON对象
             var json =  eval("("+data+")");
             alert(json.dname);
          }
      };
      //3、初始化异步请求对象
      xmlHttp.open("post","/ajax/One.do",true);
      //4、通知异步请求对象代替浏览器发送请求协议包
      xmlHttp.send()
    }
    
    /* //局部刷新实现函数
    function callBack(param){
      $("div").text(param);
    } */
</script>
</head>
<body>
    <input type="button" value="接收服务端返回对象" onclick="fun1()">
</body>
</html>

十、jquery对ajax开发步骤的封装版

体现思路：不需要开发人员亲自实现AJAX的四个步骤，只需要开发人员提供AJAX开发步骤需要参数，可以让开发人员专注【局部刷新函数实现】

十一、$.ajax() 是jquery为ajax开发提供的标准简化版

//ajax()只接受一个json对象作为参数，开发人员可以将ajax实现需要参数在json对象中进行声明
var option ={
    //[作用]通知异步请求对象采用何种方式发送请求协议包（post/get）
    //[注意]type属性可以不声明，此时异步请求对象使用GET方式发送请求协议包
    type:'get',
    //[作用]本次要访问资源文件地址，要求异步请求对象将这个地址写入到请求协议包中的请求行上
    //[注意]url属性不能省略，url属性不能携带请求参数
    url:'/ajax/One.do',
    //[作用]通知异步请求对象本次携带的请求参数
    //[赋值]data属性可以接收以字符串形式拼接的参数 data:"uname=mike&password=123"
    //[赋值]data属性可以接收json格式描述参数 data:{"uanem":"mike","password":"123"}
    //[注意]data属性如果没有需要携带发送的参数可以不声明
    data:{"uanem":"mike","password":"123"},
    //[作用]设置同步请求与异步请求
    //[赋值]async:true 异步请求
    //[赋值]async:false 同步请求
    //[注意]绝大多数情况下，都是使用异步请求，此时这个属性可以不用声明
    async:true,
    //[作用]指定异步请求对象工作完毕后需要调用的【局部刷新函数名】
    //[注意]success属性不能省略，只能写局部刷新函数名，不能带括号。
    success:callBack,
    //[作用]通知异步请求对象在接收到【404、405、500】等状态码时需要调用的方法名
    //[赋值]error:errorFun
    //[注意]error属性开发测试时会写，上线不需要写。
    error:errorFun,
    //[作用]通知jquery将异步对象中读取数据转变为何种数据类型
    //[赋值]dataType:‘text’
    //[赋值]dataType:‘json’
    //[注意]dataType属性可以不声明，默认将异步请求对象取得的内容作为一个字符串输出到局部刷新函数中
    dataType:'json'
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 动态获取项目名称 -->
<base href="${pageContext.request.contextPath}/">
<script type="text/javascript" src="/ajax/js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    function fun1(){
       $.ajax({
         type:'post',
         url:'/One.do',
         success:callBack,
         //浏览器显示200状态码，并且响应头为json格式，ajax不认为它是json，所以一直执行错误方法
         //dataType:'json',
         error:errorFun
       });
    }
    
     //局部刷新实现函数
    function callBack(param){
      alert(param);
    } 
    function errorFun(param){
      alert("服务器繁忙！");
    } 
</script>
</head>
<body>
    <input type="button" value="接收服务端返回对象" onclick="fun1()">
</body>
</html>

十二、$.get()与$.post()

介绍：

$.get()：通知异步请求对象采用GET方式发送请求
$.post()：通知异步请求对象采用POST方式发送请求

$.get()使用：

$.get(请求地址，请求参数，局部刷新函数名，需要得到的数据类型)

如果只需要得到字符串类型数据就可以

$.get(请求地址，请求参数，局部刷新函数名)

如果只需要得到字符串类型数据就可以，同时没有需要携带的请求参数

$.get(请求地址，局部刷新函数名)