九、ajax技术

1.Ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

1.1.为什么会出现Ajax技术?

因为传统的网页技术，存在诸多不足，每次页面要进行刷新时，需要重新加载整个页面，这样会导致浏览器需要重新解析所有的页面数据，页面中原有的数据，不需要重新解析渲染的也会丢失，服务器，也需要构建整个页面的数据。这样增加了服务器，带宽，浏览器的压力，且用户体验比较差，因为数据的更新是无差别的，需要更新的或者不需要更新的，整个网页数据都会更新。这样可能导致用户的某些不需要更新的行为数据，没重置了，用户需要重新输入且用户不知道被刷新的原因。基于这点，需要根据需求，可选的改变网页上的数据.这种改变网页上的数据，是只改变网页上的部分数据，这样做，服务器需要构建的数据，相对少，传输的数据也少，浏览重新解析渲染的压力也小。这种方法就被称之为局部刷新。

传统网页交互的不足.png

1.2.Ajax技术的原理

为了弥补传统的不足，需要可选的改变网页部分数据，而改变网页的数据的依据需要从服务器获取，那么浏览器就需要与服务器交互。就是浏览器需要发送请求给服务器，但是浏览器没办法可选的修改网页数据，网页数据属于DOM元素，需要使用网页脚本语言进行修改。所以基于这点，开发者让浏览器厂商提供了发送请求的API，通过Javascript，利用浏览器向服务器发送请求，且接收服务器的响应数据，然后根据响应作为更新页面的依据。从而实现了页面局部刷新的效果，这种技术就是Ajax技术。由于，此时浏览器与服务器的交互是在后台的进行交互的，所以这种交互方式也被称之为异步交互。Ajax技术就是一种异步交互。其原理，本质上就是Javascript利用浏览器，在后台与服务交互数据，然后根据，利用Javascript的DOM的API，进行页面更新。

1.3.如何使用Ajax技术?

一般Ajax技术分为原生的Ajax技术或者第三方封装的Ajax技术。

原生的Ajax是指使用Javascript最原始的API与服务器进行交互。

原生Ajax:

XMLHttpRequest:是浏览器内置用于发送请求的对象，用于在后台与服务器交换数据。

注意：

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

使用：new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

使用： new ActiveXObject("Microsoft.XMLHTTP");

以上说明XMLHttpRequest对象存在浏览器的兼容性问题.

核心方法：

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。string：仅用于 POST 请求
setRequestHeader(header,value)	向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值

事件：

onreadystatechange : 当浏览器与服务器的通信状态发生变化时就会触发该事件。

属性:

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

响应属性：

根据以下属性，可以从请求中获取服务器响应的数据

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

注意：

ajax的响应数据只能是responseText或者responseXML，即Ajax的响应数据只能是字符串。

1.3.1.原生Ajax的使用

创建发送请求的对象
监听请求对象状态
1. 根据状态解析响应数据
准备发送请求信息
发送请求

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用Ajax与服务器交互</title>
</head>
<body>

<div id="divId"></div>
<button id="btn"  onclick="sendAjax()">按钮</button>
<script type="text/javascript">
//1. 创建请求对象
var reuqest = new XMLHttpRequest();

    //发送ajax请求
    function sendAjax() {
        //2. 为对象添加监听事件
        reuqest.onreadystatechange = function() {
            console.log("状态发生了变化");
            //接收响应数据 
            //当请求正常  且 响应完成时接收
            console.log(reuqest.readyState);
            //只有当请求响应完成 且请求正常时  才接收数据
            if (reuqest.readyState == 4 && reuqest.status == 200) {
                //获取响应中的字符串数据
                var msg = reuqest.responseText;
                console.log(msg);
                document.getElementById("divId").innerText = msg;
            }
        }
        var param = "name=张三&age=18"
        //3. 准备发送请求 建立连接
        //reuqest.open("get","ajax.do?"+param,true);
        //reuqest.send(param);
        reuqest.open("post", "ajax.do?" + param, true);
        //4. 发送请求
        reuqest.send(param);
    }
</script>
</body>
</html>

package com.sxt.controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ajax.do")
public class AjaxController extends HttpServlet {

    private static final long serialVersionUID = -116354998836682953L;

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置编码避免汉字乱码
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("charset=UTF-8");
        //接收ajax 参数
        String name = req.getParameter("name");
        String age = req.getParameter("age");
        System.out.println(name+"   "+age);
        System.out.println("有人请求了!!");
        //向ajax返回数据
        PrintWriter writer = resp.getWriter();
        //注意  使用print  不要使用println
        writer.print("请求成功");
        writer.flush();
    }
    
}

1.3.2.jquery中的ajax

由于原生ajax的API使用相对繁琐，且对浏览器的兼容性相对较差。基于这个原因，jquery插件，对原生ajax的API进行了二次封装，降低了ajax使用的难度，简化了ajax开发的步骤。

在jquery中，ajax提供如下核心方法：

方法名	说明
ajax(option)	就是进行ajax请求，最接近原生ajax的方法
post(option)	只支持post请求的ajax方法
get(option)	只支持get请求的ajax方法
load(option)	将ajax请求的数据加载到dom中

jquery中Ajax相关函数：

函数	描述
jQuery.ajax()	执行异步 HTTP (Ajax) 请求。
.ajaxComplete()	当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。与具体的ajax中complete一致
.ajaxError()	当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。与具体的error一致
.ajaxSend()	在 Ajax 请求发送之前显示一条消息。与具体的ajax请求中beforeSend一致
jQuery.ajaxSetup()	设置将来的 Ajax 请求的默认值。进行全局设置，所有ajax的操作，都会遵循该设置
.ajaxStart()	当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()	当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()	当 Ajax 请求成功完成时显示一条消息。
jQuery.get()	使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript()	使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load()	从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param()	创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post()	使用 HTTP POST 请求从服务器加载数据。
.serialize()	将表单内容序列化为字符串。
.serializeArray()	序列化表单元素，返回 JSON 数据结构数据。

option:ajax请求的相关参数

参数名	值类型	说明
async	Boolean	默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
beforeSend	Function	发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。
cache	Boolean	默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
complete	Function	请求完成后回调函数 (请求成功或失败之后均调用)。
contentType	String	默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
context	Object	这个对象用于设置 Ajax 相关回调函数的上下文。
data	String	发送到服务器的数据。
dataFilter	Function	给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
dataType	String	预期服务器返回的数据类型. "xml": 返回 XML 文档 "html": 返回纯文本 HTML 信息 "script": 返回纯文本 JavaScript 代码。 "json": 返回 JSON 数据。 "jsonp": JSONP 格式。 "text": 返回纯文本字符串
error	Function	有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。当ajax发生错误时调用
global	Boolean	是否触发全局 AJAX 事件。默认值: true。
success	Function	请求成功后的回调函数。参数：由服务器返回，并根据 dataType 参数进行处理后的数据；
timeout	Number	设置请求超时时间（毫秒）。
type	String	提交方式 GET POST DELETE PUT 等等
url	String	默认值: 当前页地址。发送请求的地址。

API示例1：ajax基本请求参数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery-ajax配置项API</title>
</head>
<body>

<button id="btn1">jquery最基本的ajax请求</button>

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    //为按钮绑定事件
    $("#btn1").click(function(){
        //请求的配置项   请求的参数
        var option = {
            url:"ajax.do",//请求的URL地址
            type:"get",//请求方法
            data:{'name':'韩梅梅','age':18}, //请求参数
            timeout:5000, //请求超时时间  单位毫秒 如果超出这个时间 则终止请求 触发error函数
            error:function(req,msg,exception){//请求出现异常时调用的方法
                console.log(req);
                console.log(msg);
                console.log(exception);
            },
            success:function(rs){//请求成功时调用的方法   响应码是  200
                console.log("返回的数据是:"+rs);
            },
            complete:function(req,msg){//每次请求完成都会调用  不论成功还是失败
                console.log("complete:"+req);
                console.log("complete:"+msg);
            }
        };
        //进行ajax请求
        $.ajax(option);
    });
</script>
</body>
</html>

AJax请求相关参数：非常用参数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery-ajax配置项API</title>
</head>
<body >

<button id="btn1">jquery最基本的ajax请求</button><br>
<button id="btn2">jquery最非常用属性介</button>


<img src="img/loading.gif" id="loading" style="width: 100px;height: 100px;display: none" />

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    //jquery ajax 非常用属性介绍
    $("#btn2").click(function(){
        var option = {
            url:"ajax.do",
            type:"get",
            async:true,// 是否进行异步请求  默认是 true 如果需要同步请求 则为false
            //如果ajax是异步请求,那么不管ajax相关代码是否执行完,ajax之后的代码都会执行
            //如果ajax是同步请求,那么只有当ajax相关代码执行完,ajax之后的代码才会执行
            //如果ajax相关数据 参与ajax之后的代码运算,建议使用同步请求
            beforeSend:function(XHR){//进行ajax请求前调用的函数 此时 只属于当前ajax请求
                //设置请求头
                $("#loading").show();
            },
            context:document.body,// 指定ajax中的this 对象
            dataType:"json",// ajax 期望的返回数据的格式类型  如果返回的数据  无法转化为期望格式类型,程序会报错 ,chrome看不到
            dataFilter:function(data,type){//为ajax 返回的原始数据进行预处理的函数  
                //根据 type 的值  将data 原始数据进行预处理
                //原始数据都默认普通字符串 将字符串转化为json对象
                //data  内容 : 请求成功    普通字符串
                console.log(data);
                console.log(type);
                var obj = new Object();
                if(type == "json"){
                    obj.msg = data;
                }
                //此时打印的是js 对象
                console.log(obj); //现在js 对象  根json 规范一样
                //转化为json 对象
                //将 js 对象转化为 json 对象
                var jsonObj = $.parseJSON('{"msg":"请求成功"}');
                //此时打印的json 对象
                //console.log(jsonObj);
                
                return  JSON.stringify(jsonObj); 
                // 拼接成了  json 字符串  jquery 对这个字符串进行转化
                //然后 转化后的结果 返回 success 方法 当做参数
                
            },
            success:function(rs){//请求成功时调用的方法   响应码是  200
                //rs.msg   ---- rs 是一个对象 
                
                
                console.log("返回的数据是:"+rs.msg);
                
            
            //例如: success 里面做了多个dom的操作   根据数据生成dom
                //而ajax 之后代码有相关关联的dom操作,则容易程序异常问题
                $(this).attr("bgcolor","red");
            },
            complete:function(req,msg){//每次请求完成都会调用  不论成功还是失败
                $("#loading").hide();
            }
        };
        //进行ajax请求
        $.ajax(option);
        //进行dom 相关操作    获取 success 生成的dom
    })
</script>
</body>
</html>

Ajax中的方法示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery ajax 中的方法介绍</title>
</head>
<body>
<form id="form1">
    名称:<input name="name"/><br>
    年龄:<input name="age" />
    <input type="button" id="subBtn1" value="提交" />
</form>
<img src="img/loading.gif" id="loading" style="width: 100px;height: 100px;display: none" />
<button id="btn1" >获取表单数据</button>
<button id="btn2" >get发送ajax请求</button>
<button id="btn3" >post发送ajax请求</button>
<button id="btn4" >getJSON</button>
<button id="btn5" >load</button><br>
<h1>ajax2.html中</h1>
<div id="content"></div>

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    //ajax 的全局设置
    //只要进行了全局设置  所有的 ajax 请求都会触发相关设置的方法
    /* $.ajaxSetup({
        beforeSend:function(req){
            // 在 前端后分离的项目中  此时可以在beforeSend中统一设置请求头
            console.log("请求前");
        },
        dataFilter:function(data,type){
            //统一进行数据拦截 
            //例如 : 如果数据不符合规范  则 进行某些业务处理
        },
        complete:function(req,rs){
            console.log("请求完成");
        }
    }); */
    //获取表单数据  便于 ajax 进行提交
    $("#btn1").click(function(){
        $(document).ajaxStart(function(){
            console.log("ajax 开始请求");
        });
        $(document).ajaxStop(function(){
            console.log("ajax 结束请求");
        });
        //获取表单中数据  序列化为表单格式的字符串
        var data = $("#form1").serialize();
        console.log(data);
        data = $("#form1").serializeArray();
        console.log(data);
        
        $.ajax({
            url:"ajax.do",
            success:function(rs){
                console.log(rs);
            }
        });
    });
    // ajax 中  get  和 post 
    //为了简化 ajax 开发  jquery 提供了  get 和 post 两个方法
    //这两个方法
    /*  
        url : 请求地址
        param : 请求参数
        function(rs){}: 请求成功后的回调函数
        $.get(url,param,function(rs){});
        
        $.post(url,param,function(rs){});
        get 和 post 方法中的ajax 配置都使用的是默认配置
        
        注意: 使用  get 和  post 获取的ajax 数据 是原始数据  数据类型由服务器决定  jquery 不会对数据做处理
    */
    //使用 get 方法 发送ajax 请求   
    $("#btn2").click(function(){
        $.get("ajax.do",{'name':'韩梅梅','age':18},function(rs){
            console.log(rs);
        });
    });
    //使用post 方法 发送ajax请求
    $("#btn3").click(function(){
        $.post("ajax.do",{'name':'李磊','age':18},function(rs){
            console.log(rs);
        });
    }); 
    //获取json 格式数据  getJSON 指定返回的数据类型是json类型
    $("#btn4").click(function(){
        $.getJSON("json.do",function(rs){
            console.log(rs);
        });
    }); 
    //.load() 从服务器加载数据，然后把返回到 HTML 放入匹配元素。
    $("#btn5").click(function(){
        $("#content").load("load.do");
    }); 

</script>
</body>
</html>