AJAX入門這一篇就夠了

来源:https://www.cnblogs.com/Java3y/archive/2018/02/13/8447014.html
-Advertisement-
Play Games

什麼是Ajax Ajax(Asynchronous JavaScript and XML) 非同步JavaScript和XML Ajax實際上是下麵這幾種技術的融合： (1)XHTML和CSS的基於標準的表示技術 (2)DOM進行動態顯示和交互 (3)XML和XSLT進行數據交換和處理 (4)XMLH ...


什麼是Ajax

Ajax(Asynchronous JavaScript and XML) 非同步JavaScript和XML

Ajax實際上是下麵這幾種技術的融合：

  • (1)XHTML和CSS的基於標準的表示技術
  • (2)DOM進行動態顯示和交互
  • (3)XML和XSLT進行數據交換和處理
  • (4)XMLHttpRequest進行非同步數據檢索
  • (5)Javascript將以上技術融合在一起

客戶端與伺服器，可以在【不必刷新整個瀏覽器】的情況下，與伺服器進行非同步通訊的技術

為什麼我們需要Ajax？

在我們之前的開發，每當用戶向伺服器發送請求，哪怕只是需要更新一點點的局部內容，伺服器都會將整個頁面進行刷新。

  • 性能會有所降低(一點內容，刷新整個頁面！)
  • 用戶的操作頁面會中斷(整個頁面被刷新了)

Ajax就是能夠做到局部刷新！

這裡寫圖片描述

XMLHttpRequest

XMLHttpRequest對象是Ajax中最重要的一個對象。使用Ajax更多的是編寫客戶端代碼，而不是服務端的代碼。

XMLHttpRequest 工作原理

傳統的web前端與後端的交互中，瀏覽器直接訪問Tomcat的Servlet來獲取數據。Servlet通過轉發把數據發送給瀏覽器。

當我們使用AJAX之後，瀏覽器是先把請求發送到XMLHttpRequest非同步對象之中，非同步對象對請求進行封裝，然後再與發送給伺服器。伺服器並不是以轉發的方式響應，而是以流的方式把數據返回給瀏覽器

XMLHttpRequest非同步對象會不停監聽伺服器狀態的變化，得到伺服器返回的數據，就寫到瀏覽器上【因為不是轉發的方式，所以是無刷新就能夠獲取伺服器端的數據】

這裡寫圖片描述

創建XMLHttpRequest對象

要創建XMLHttpRequest對象是要分兩種情況考慮的：

  • 在IE6以下的版本
  • 在IE6以上的版本以及其他內核的瀏覽器(Mozilla)等

    <script type="text/javascript">

        var httpRequest;

        if(window.XMLHttpRequest) {

            //在IE6以上的版本以及其他內核的瀏覽器(Mozilla)等
            httpRequest = new XMLHttpRequest();
        }else if(window.ActiveXObject) {

            //在IE6以下的版本
            httpRequest = new ActiveXObject();
        }


    </script>

瞭解XMLHttpRequest對象的屬性和方法

方法

  • open()(String method,String url,boolean asynch,String username,String password)
  • send(content)
  • setRequestHeader(String header,String value)
  • getAllResponseHeaders()
  • getResponseHeader(String header)
  • abort()

常用的方法就是黑色粗體的前三個

  • open()：該方法創建http請求
    • 第一個參數是指定提交方式(post、get)
    • 第二個參數是指定要提交的地址是哪
    • 第三個參數是指定是非同步還是同步(true表示非同步，false表示同步)
    • 第四和第五參數在http認證的時候會用到。是可選的
  • setRequestHeader(String header,String value)：設置消息頭（使用post方式才會使用到，get方法並不需要調用該方法）
    • xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  • send(content)：發送請求給伺服器
    • 如果是get方式，並不需要填寫參數，或填寫null
    • 如果是post方式，把要提交的參數寫上去

屬性

  • onreadystatechange：請求狀態改變的事件觸發器（readyState變化時會調用此方法），一般用於指定回調函數
  • readyState：請求狀態readyState一改變，回調函數被調用，它有5個狀態
    • 0：未初始化
    • 1：open方法成功調用以後
    • 2：伺服器已經應答客戶端的請求
    • 3：交互中。Http頭信息已經接收，響應數據尚未接收。
    • 4：完成。數據接收完成

這裡寫圖片描述

  • responseText：伺服器返回的文本內容
  • responseXML：伺服器返回的相容DOM的XML內容
  • status：伺服器返回的狀態碼
  • statusText：伺服器返回狀態碼的文本信息

上面有兩個地方都提及了回調函數，回調函數是什麼？？

回調函數就是接收伺服器返回的內容！

這裡寫圖片描述

編寫第一個Ajax程式

檢測用戶輸入的用戶名是否為"zhongfucheng"，只要不是zhongfucheng，就可以使用！

html代碼

  • 創建的div只要用於顯示伺服器返回的數據
  • 當用戶點擊按鈕的時候，就觸發事件。

    <input type="text" id="username">
    <input type="button" onclick="checkUsername()" value="檢測用戶名是否合法">
    <div id="result">
    
    </div>

JavaScript代碼

  • 創建XMLHttpRequest對象
  • 創建http請求
  • 把文本框的數據發送給http請求的目標
  • 指定回調函數
  • 編寫回調函數
  • 發送http請求
  • 回調函數得到http返回的內容，把內容寫在div上


    <script type="text/javascript">

        var httpRequest;
        function checkUsername() {

            if(window.XMLHttpRequest) {

                //在IE6以上的版本以及其他內核的瀏覽器(Mozilla)等
                httpRequest = new XMLHttpRequest();
            }else if(window.ActiveXObject) {

                //在IE6以下的版本
                httpRequest = new ActiveXObject();
            }


            //創建http請求
            httpRequest.open("POST", "Servlet1", true);

            //因為我使用的是post方式，所以需要設置消息頭
            httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            //指定回調函數
            httpRequest.onreadystatechange = response22;

            //得到文本框的數據
            var name = document.getElementById("username").value;

            //發送http請求，把要檢測的用戶名傳遞進去
            httpRequest.send("username=" + name);

        }

        function response22() {

            //判斷請求狀態碼是否是4【數據接收完成】
            if(httpRequest.readyState==4) {

                //再判斷狀態碼是否為200【200是成功的】
                if(httpRequest.status==200) {

                    //得到服務端返回的文本數據
                    var text = httpRequest.responseText;

                    //把服務端返回的數據寫在div上
                    var div = document.getElementById("result");
                    div.innerText = text;
                }

            }
        }
    </script>

效果

實現了局部更新，不需要刷新整一個頁面

這裡寫圖片描述

XMLHttpRequest解決中文亂碼

在傳統的Web中我們已經解決過中文亂碼問題了。

  • 伺服器傳送給瀏覽器數據發生亂碼：response設置編碼的時候和瀏覽器頁面的編碼一致便可以解決
  • 瀏覽器傳送給伺服器數據發生亂碼：如果是post方式，request設置編碼便可以解決。如果是get方式，Tomcat下，使用ISO8859-1編碼得到原本的二進位數組，再使用UTF-8編碼便可以解決

接下來，要介紹的是：我們可以屏蔽任何瀏覽器和任何伺服器的編碼格式，瀏覽器發送給伺服器的數據不造成亂碼問題！

具體我們是這樣做的：

  • 發送數據給伺服器的時候，JavaScript使用兩次EncodeURI()
  • 伺服器得到數據，使用URLEncode.decode(數據,"utf-8")進行解碼

為啥我能說這種方式屏蔽任何瀏覽器和伺服器的編碼格式，都不會亂碼呢？？

這裡寫圖片描述

XMLHttpRequest解決緩存問題

在傳統的Web中我們也解決過緩存的問題，通過設置response的頭信息，返回給瀏覽器就可以實現不緩存頁面了。

但是呢，現在我們使用XMLHttpRequest，拿到的不是全新的頁面，僅僅是伺服器端發送過來的數據！！

那我們要怎麼解決緩存的問題呢？？產生緩存的原因就是：我們請求了同一個地址，做了相同的操作。服務端認為我的操作並沒有什麼變化，就直接把緩存的信息給我了。這樣的話，我就不能更換驗證碼圖片了(等等應用)。

我們可以這樣做：

  • 在每次請求url中加入一個時間戳參數【每次url就不一樣了】
  • 加入時間戳參數到url時，也分兩種情況
    • url本身就帶有參數了，也就是說有"?"號了，那麼添加時間戳的時候就需要用"&"號
    • [x] url沒有參數，直接使用"?"號來添加時間戳

    if(url.indexOf("?") >= 0){
    url = url + "&t=" + (new Date()).valueOf();
    } else{
    url = url + "?t=" + (new Date()).valueOf();
    }

XMLHttpRequest跨域訪問

使用XMLHttpRequest去跨域訪問是會出現錯誤的。

這裡寫圖片描述

我們要怎麼解決呢？？這時候就要用代理思想了

  • XMLHttpRequest先把請求提交給同域的Servlet處理
  • 同域Servlet再將XMLHttpRequest的請求提交給跨域的伺服器
  • 同域Servlet得到跨域伺服器的返回值，再返回給XMLHttpRequest

這裡寫圖片描述

這個時候，XMLHttpRequest跨域訪問就分兩種(GET和POST)情況了，因為這兩種提交數據的方式是不一樣的！

瀏覽器代碼

  • 我們需要在調用open方法之前判斷一下要連接的地址是不是以http開頭的，如果是則認為要訪問的是跨域的資源
  • 首先將當前url中的”?”變成”&”，這是因為將要連接的地址改為”Proxy?url=” + url以後，如果原來url地址中有參數的話，新的url地址中就會有兩個“?”這會導致伺服器端解析參數錯誤，”url=”之後的內容表示本來要訪問的跨域資源的地址。

GET方式

GET方式是直接把參數的信息都放在url地址上，所以處理起來會相對簡單。

步驟：

  • 使用StringBuilder裝載著getParameter("url")【獲取得到地址，呆會要做拼接，所以用StringBuilder】
  • 得到其他參數的時候，做URLEncode.encode()，因為我們進入Servlet的時候已經被decode了一次【我們要儘可能保留原始請求】(參照解決中文亂碼)
  • **遍歷所有的請求參數，只要名字不是"url"，就添加到StringBuilder中【第一個參數為"?",其他的參數為"&"】(http://localhost:8080/url?aa=bb&cc=dd)**
  • 創建URL對象，把拼接成的StringBuilder傳遞進去
  • 使用BufferReader讀取遠程伺服器返回的數據，要指定輸入流編碼格式，否則會亂碼

    BufferedReader reader = new BufferedReader(new InputStreamReader(URL對象.openSteam(),"UTF-8"));
  • 最後，把遠程伺服器讀取到的數據再返回給XMLHttpRequest

POST方式

POST方式把參數的信息都封裝到HTTP請求中，在URL進行連接的時候，需要把數據寫給遠程伺服器

步驟：

  • 得到url參數，創建StringBuilder
  • 得到其他參數的時候，做URLEncode.encode()，因為我們進入Servlet的時候已經被decode了一次【我們要儘可能保留原始請求】(參照解決中文亂碼)
  • 遍歷所有的請求參數，只要名字不是"url"，就添加到StringBuilder中【第一個參數直接給出,其他的參數為"&"】(aa=bb&cc=dd&ee=ff)
  • 創建URL對象，創建URL連接器，允許寫數據到遠程伺服器上
    URL url = new URL(url);
    URLConnection connection = url.openConnection;
    connection.setDoOutPut(true);
  • 得到寫數據流

    OutputSteamWriter writer = new OutputSteamWriter(conncetion.getOutputSteam)
  • 把StringBuilder的數據寫到遠程伺服器上，並flush
  • 使用BufferReader讀取遠程伺服器返回的數據

    BufferedReader reader =  new BufferedReader(new InputSteamReader(conncetion.inputSteamReader,"UTF-8"));

AJAX二級下拉聯動案例【XML版】

我們在購物的時候，常常需要我們來選擇自己的收貨地址，先選擇省份，再選擇城市...

有沒有發現：當我們選擇完省份的時候，出現的城市全部都是根據省份來給我們選擇的。這是怎麼做到的呢？？？其實就是通過AJAX來完成的。使用AJAX技術讓我們看起來網頁非常“智能”，會根據省份來給出對應的城市信息。

這裡寫圖片描述

我們這裡就不讀取資料庫了，直接在Servlet寫死數據來進行模擬測試。

分析

我們知道AJAX與伺服器之間的交互常用的傳輸載體格式有三種：

  • HTML
  • XML
  • JSON

由於省份與城市是有層級關係的，因此我們只能用XML或者JSON。

我們這裡首先就用XML來進行，後面會使用JSON，來看看他倆有什麼不同的地方。。

前臺分析

當用戶選擇了某個省份之後，就使用AJAX與伺服器進行交互，那麼在選擇城市的時候就出現對應的城市信息。

  • 監聽下拉框值變化事件
  • 只要下拉框值變化了，就與伺服器進行交互
  • 得到伺服器返回的值，解析XML
  • 使用DOM把數據寫到城市下拉框列表中

後臺分析

  • 得到前臺帶過來的數據
  • 判斷該數據是什麼，返回對應的的XML文件

寫JSP頁面


<%--
  Created by IntelliJ IDEA.
  User: ozc
  Date: 2017/5/17
  Time: 19:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>多級聯動</title>
    <script type="text/javascript" src="js/ajax.js"></script>
</head>
<body>

<%--############前臺頁面###################--%>
<select name="province" id="provinceId">
    <option value="-1">請選擇省份</option>
    <option>廣東</option>
    <option>湖南</option>
</select>
<select name="city" id="cityId">
    <option>請選擇城市</option>
</select>

<%--############AJAX###################--%>

<script type="text/javascript">

    document.getElementById("provinceId").onchange = function () {


        /**********定位到下拉框，獲取下拉框的值***************/
        // 獲取選中的下拉框索引值
        var index = this.selectedIndex;
        // 得到下拉框的值
        var province = this.options[index].innerHTML;

        //下拉框的值要是“請選擇”，那麼我們是不會訪問伺服器的
        if ("請選擇省份" != province) {

            /********由於每次都會自動添加，因此每次在調用的時候清除***********/
            var citySelect = document.getElementById("cityId");

            //每次都將option變成長度只有1的
            citySelect.options.length = 1;

            /*************ajax代碼*********************/
            //創建AJAX對象
            var ajax = createAJAX();
            //準備發送請求
            var method = "post";
            var url = "${pageContext.request.contextPath}/ProvinceServlet?time=" + new Date().getTime();
            ajax.open(method, url);
            //由於是POST方式，因此要設置頭
            ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");

            ajax.send("province=" + province);

            /************ajax回調函數*********************/
            ajax.onreadystatechange = function () {

                if (ajax.readyState == 4) {
                    if (ajax.status == 200) {

                        //得到伺服器端帶過來的XML
                        var XMLDocument = ajax.responseXML;

                        /**********解析XML文檔，使用DOM寫到下拉框中****************/
                        var cities = XMLDocument.getElementsByTagName("city");

                        //得到每一個cities節點的值，動態生成下拉框，添加到下拉框中
                        for (var i = 0; i < cities.length; i++) {
                            var value = cities[i].firstChild.nodeValue;
                            //動態生成下拉框
                            var optionElement = document.createElement("option");
                            optionElement.innerHTML = value;

                            //添加到下拉框中
                            citySelect.appendChild(optionElement);

                        }
                    }
                }
            };

        }

    };

</script>


</body>
</html>

Servlet


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

/**
 * Created by ozc on 2017/5/17.
 */
@javax.servlet.annotation.WebServlet(name = "ProvinceServlet",urlPatterns = "/ProvinceServlet")
public class ProvinceServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        //設置中文編碼
        request.setCharacterEncoding("UTF-8");
        String province = request.getParameter("province");

        //這裡是返回的是XML，因此指定XML數據！
        response.setContentType("text/xml;charset=UTF-8");

        PrintWriter printWriter = response.getWriter();

        /****************返回XML文件給前臺**************/
        printWriter.write("<?xml version='1.0' encoding='UTF-8'?>");
        printWriter.write("<root>");
        if("廣東".equals(province)){
            printWriter.write("<city>廣州</city>");
            printWriter.write("<city>深圳</city>");
            printWriter.write("<city>中山</city>");
        }else if("湖南".equals(province)){
            printWriter.write("<city>長沙</city>");
            printWriter.write("<city>株洲</city>");
            printWriter.write("<city>湘潭</city>");
            printWriter.write("<city>岳陽</city>");
        }
        printWriter.write("</root>");

        System.out.println("1111");


        /*******事後操作*******/
        printWriter.flush();
        printWriter.close();


    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        this.doPost(request, response);
    }
}

效果：

這裡寫圖片描述

XML方式總結

  • 監聽下拉框的變化，如果變化了，那麼就使用非同步操作去訪問伺服器，得到對應的數據返回給非同步對象
  • 非同步對象解析伺服器帶過來的數據，使用DOM編程把數據動態添加到頁面上
    • 在Servlet上記得要指定返回的是XML的數據！
    • 在前臺解析XML文檔的時候，不能直接使用innerHtml來得到節點的值，只能通過firstChild.nodeValue的方式獲取。
    • 由於每次append到下拉框都會連續append，因此在響應事件的時候，把下拉框清零
    • 把下拉框options的長度賦值為1，那麼就是清零的操作了。

AJAX二級下拉聯動案例【JSON版】

前面我們已經使用過了XML作為數據載體在AJAX中與伺服器進行交互。當時候我們的案例是二級聯動，使用Servlet進行控制

這次我們使用JSON作為數據載體在AJAX與伺服器交互，使用三級聯動，使用Action進行控制....

  • 省份-城市-區域三級聯動【Struts2 + JSON版】

分析

與上次是一樣的，只不過這次換了用JSON，使用Action控制罷了...

監聽下拉框的變動，使用非同步對象與伺服器進行交互。

前臺分析

  • 監聽下拉框的變動
  • 得到伺服器返回的JSON數據
  • 使用eval()進行解析，得到具體的對象
  • 使用DOM編程把數據填充到對應的下拉框上

後臺分析

  • 得到前臺發送過來的數據
  • 判斷具體的數據是什麼，給出對應的數據
  • 使用Struts2提供的組件把數據封裝成JSON
  • 返回給瀏覽器

監聽省份JSP頁面


<%--
  Created by IntelliJ IDEA.
  User: ozc
  Date: 2017/5/18
  Time: 13:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>使用JSON數據載體與伺服器進行交互</title>

      <script type="text/javascript" src="js/ajax.js"></script>
  </head>
  <body>


  <%--############前臺頁面##############################--%>
  <select name="province" id="provinceId">
    <option>請選擇省份</option>
    <option>廣東</option>
    <option>北京</option>
  </select>

  <select name="city" id="cityId">
    <option>請選擇城市</option>
  </select>


  <select name="area" id="areaId">
    <option>請選擇區域</option>
  </select>

  <%--############監聽省份##############################--%>
  <script type="text/javascript">

      document.getElementById("provinceId").onchange= function () {

          // 得到選中的下拉框的值
          var provinceValue = this.options[this.selectedIndex].innerHTML;


          /***************ajax代碼*************************/
          if("請選擇省份" != provinceValue) {

              //每次訪問的時候，都要清空select的值
              var citySelect = document.getElementById("cityId");
              citySelect.options.length = 1;

              var ajax = createAJAX();
              var method = "post";
              var url = "${pageContext.request.contextPath}/province_findCityByProvince?time=" + new Date().getTime();
              ajax.open(method, url);
              ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");

              //顧及到發送的key、value值有很多，於是我們使用對象吧。
              ajax.send("bean.name=" + provinceValue);

              /***************等待伺服器的響應，得到伺服器返回的數據************************/
              ajax.onreadystatechange = function () {

                  if(ajax.readyState==4) {
                      if(ajax.status==200) {
                        var jsonJava = ajax.responseText;

                        //解析成是JS類型的JSON
                        var json = eval("(" + jsonJava + ")");

                        //得到每個城市的值
                        for(var i=0;i<json.city.length;i++) {
                          var city = json.city[i];

                          //動態創建option控制項
                          var option = document.createElement("option");
                          option.innerHTML = city;

                          citySelect.appendChild(option);
                        }
                      }
                  }
              };

          }

      };
    
  </script>

  </body>
</html>

監聽省份Action

要想Struts2能夠把Action的數據封裝成JSON，就需要導入Struts2的開發包

  • struts2-json-plugin-2.3.4.1.jar

這裡寫圖片描述

在Action中對應的成員屬性需要給getter方法


import com.opensymphony.xwork2.ActionSupport;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by ozc on 2017/5/18.
 */
public class ProvinceAction  extends ActionSupport{

    //自動封裝數據
    private Bean bean;
    public Bean getBean() {
        return bean;
    }
    public void setBean(Bean bean) {
        this.bean = bean;
    }

    //封裝城市的集合
    private List<String> city = new ArrayList<>();
    public List<String> getCity() {
        return city;
    }

    public String findCityByProvince() throws Exception {

        if ("廣東".equals(bean.getName())) {
            city.add("廣州");
            city.add("珠海");
            city.add("從化");
        } else if ("北京".equals(bean.getName())) {
            city.add("一環");
            city.add("二環");
            city.add("三環");
            city.add("四環");

        } else {
            System.out.println("沒有你選擇的地區");

        }
        return "ok";
    }
}

返回給前端的時候，數據是這樣子的：

這裡寫圖片描述

效果

這裡寫圖片描述

監聽城市JSP


  <%--############監聽城市##############################--%>

  <script type="text/javascript">
      document.getElementById("cityId").onchange = function () {

          //清空值
          var areaSelect = document.getElementById("areaId");
          areaSelect.options.length = 1;

          //得到選擇選中的下拉框的值
          var cityValue = this.options[this.selectedIndex].innerHTML;
          if(cityValue!="請選擇城市"){

              var ajax = createAJAX();
              var method = "post";
              var url = "${pageContext.request.contextPath}/province_findAreaByCity?time=" + new Date().getTime();
              ajax.open(method, url);
              ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");

              //顧及到發送的key、value值有很多，於是我們使用對象吧。
              ajax.send("bean.name=" + cityValue);

              /***************等待伺服器的響應，得到伺服器返回的數據************************/
              ajax.onreadystatechange = function () {

                  if(ajax.readyState==4) {
                      if(ajax.status==200) {

                          var jsonJava = ajax.responseText;

                          var json = eval("(" + jsonJava + ")");

                          //得到每個地區的值
                          for(var i=0;i<json.area.length;i++) {
                              var area = json.area[i];

                              //動態創建option控制項
                              var option = document.createElement("option");
                              option.innerHTML = area;

                              areaSelect.appendChild(option);
                          }

                      }
                  }
              }

          };
      };

  </script>

Action頁面


    public String findAreaByCity() throws Exception {

        if ("廣州".equals(bean.getName())) {
            area.add("白雲區");
            area.add("黃浦區");
            area.add("蘿崗區");
        } else if ("珠海".equals(bean.getName())) {
            area.add("香江");
            area.add("拱北");
            area.add("EE");
            area.add("xx");
        } else {
            System.out.println("沒有你選擇的地區");

        }
        return "ok";
    }

最終效果：

這裡寫圖片描述

總結

這次使用的是JSON作為數據載體與伺服器進行交互，和XML本質上是沒有區別的。

只不過JSON是更加輕量級文本數據，在JavaScript能夠方便地獲取返回的數據

  • 在Struts2中把Action數據封裝成JSON格式，返回給非同步對象
    • 需要導入jar包
    • 在配置文件中配置繼承json包
    • 返回的類型是json
  • 如果使用POST時，發送的key、vaulue太多的話，我們可以使用bean進行封裝
  • 當選中省份時，把城市和區域的下拉框清空，當選擇城市時，把區域的下拉框清空

總結圖

這裡寫圖片描述

如果文章有錯的地方歡迎指正，大家互相交流。習慣在微信看技術文章的同學，可以關註微信公眾號:Java3y


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 實現memcpy()函數及過程總結
    1.為什麼會寫memcpy 在之前的應聘筆試上遇到一道筆試題，題目要求實現一個my_memcpy函數。函數原型：void * my_memcpy(void *dst, const void *src, int n); 之前使用的記憶體拷貝函數是標準庫memcpy函數，拿來就用，真沒有對這個函數做過多了 ...
  • Python+Selenium筆記（七）：WebDriver和WebElement
    （一） WebDriver WebDriver提供許多用來與瀏覽器交互的功能和設置，通過WebDriver的功能和一些方法，來實現與瀏覽器視窗、警告、框架和彈出視窗的交互，它也提供了自動化操作瀏覽器導航欄、設置cookies、截屏等方便我們測試的特性。 （二） WebDriver功能及方法 功能/屬 ...
  • Hibernate_06、hibernate的多對多映射相關操作
    一、Hibernate的多對多環境搭建 1.1需求分析 在日常生活中，其實不僅僅是一對多的關係，更多的還是多對多的映射關係。比如今天我們要介紹的用戶和角色之間的關係，用戶可以擁有很多角色，同樣的同一個角色可以有很多用戶擔任。這裡我們的需求就是，給使用系統的用戶分配不同的角色，比如業務員，管理員等等的 ...
  • PATB 1032 挖掘機技術哪家強(20)
    #include #include using namespace std; const int N = 100001; vector school[N];//玩玩vector int sum[N]; int main() { int n,id,score; scanf("%d",&n); for(... ...
  • PATA 1011 World Cup Betting (20)
    1011. World Cup Betting (20) 時間限制 400 ms 記憶體限制 65536 kB 代碼長度限制 16000 B 判題程式 Standard 作者 CHEN, Yue 時間限制 400 ms 時間限制 400 ms 記憶體限制 65536 kB 記憶體限制 65536 kB 代 ...
  • 用python給html里的css及js文件鏈接自動添加版本號
    傳統的給文件鏈接添加版本號的方法是使用gulp-rev，這裡提出的解決方案是使用python來替代gulp-rev。 將以上代碼另存成auto_version.py文件後，新建auto_version.bat文件，寫入以下內容： 修改好.bat文件里的路徑後，雙擊運行即可。 ...
  • Android之使用枚舉利弊及替代方案
    Android上不應該使用枚舉，占記憶體，應該使用@XXXDef註解來替代 使用 Enum 的缺點 每一個枚舉值都是一個對象,在使用它時會增加額外的記憶體消耗,所以枚舉相比與 Integer 和 String 會占用更多的記憶體。 較多的使用 Enum 會增加 DEX 文件的大小,會造成運行時更多的開銷, ...
  • python迴圈嵌套——九九乘法表
    #用for 迴圈for i in range(1,10): #print(i) # print(i*'*') for j in range(1,i+1): print('%d * %d = %d'%(j,i,i*j),end=' ') print('\n')#用while 迴圈 i = 1while ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類