欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AJAX亂碼與異步同步以及封裝jQuery庫(kù)實(shí)現(xiàn)步驟詳解

 更新時(shí)間：2023年01月13日 10:14:27   作者：@每天都要敲代碼  
這篇文章主要介紹了異步通信技術(shù)AJAX亂碼問題、異步與同步、手動(dòng)封裝一個(gè)jQuery庫(kù)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

1、AJAX亂碼問題

（1）發(fā)送ajax get 或者 ajax post請(qǐng)求時(shí)下面兩種情況？

①發(fā)送數(shù)據(jù)到服務(wù)器，服務(wù)器獲取的數(shù)據(jù)是否亂碼？

②服務(wù)器響應(yīng)給前端的中文，會(huì)不會(huì)亂碼？

（2）以Tomcat9為例：

①前端代碼：填數(shù)據(jù)，發(fā)送到服務(wù)器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測(cè)試AJAX亂碼問題</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function(){
        // -----------------------------------------------ajax get
        document.getElementById("btn1").onclick = function(){
            // 創(chuàng)建對(duì)象
            var xhr = new XMLHttpRequest();
            // 注冊(cè)回調(diào)函數(shù)
            xhr.onreadystatechange = function (){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        document.getElementById("mydiv").innerHTML = this.responseText
                    }
                }
            }
            // 打開通道
            var username = document.getElementById("username").value
            xhr.open("GET", "/ajax/ajaxrequest7?username="+username+"&t=" + new Date().getTime(), true)
            // 發(fā)送請(qǐng)求
            xhr.send()
        }
        // -----------------------------------------------ajax post
        document.getElementById("btn2").onclick = function(){
            // 創(chuàng)建對(duì)象
            var xhr = new XMLHttpRequest();
            // 注冊(cè)回調(diào)函數(shù)
            xhr.onreadystatechange = function (){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        document.getElementById("mydiv").innerHTML = this.responseText
                    }
                }
            }
            // 打開通道
            xhr.open("POST", "/ajax/ajaxrequest7", true)
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            var username = document.getElementById("username").value
            // 發(fā)送請(qǐng)求
            xhr.send("username=" + username)
        }
    }
</script>
<input type="text" id="username"><br>
<button id="btn1">發(fā)送ajax get請(qǐng)求，測(cè)試亂碼問題</button><br>
<button id="btn2">發(fā)送ajax post請(qǐng)求，測(cè)試亂碼問題</button><br>
<div id="mydiv"></div>
</body>
</html>

②后端代碼：先獲取數(shù)據(jù)，然后在把數(shù)據(jù)響應(yīng)給服務(wù)器

package com.bjpowernode.javaweb.ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
 * @program: 代碼
 * @ClassName: AjaxRequest7Servlet
 * @version: 1.0
 * @description: 測(cè)試ajax亂碼問題
 **/
@WebServlet("/ajaxrequest7")
public class AjaxRequest7Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 接收的中文會(huì)不會(huì)亂碼----不會(huì)
        String username = request.getParameter("username");
        System.out.println(username);
        // 響應(yīng)中文會(huì)有亂碼嗎？----會(huì)
         response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.print(username);
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 接收的中文會(huì)不會(huì)亂碼----會(huì)
        request.setCharacterEncoding("UTF-8");
        String username = request.getParameter("username");
        System.out.println(username);
        // 響應(yīng)中文會(huì)有亂碼嗎？---會(huì)
         response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.print(username);
    }
}

（3）測(cè)試結(jié)果：

對(duì)于tomcat10來說，關(guān)于字符集，我們程序員不需要干涉，不會(huì)出現(xiàn)亂碼。

對(duì)于tomcat9和之前的版本來說：

①對(duì)于GET請(qǐng)求：接收前端的數(shù)據(jù)輸出到控制臺(tái)不會(huì)亂碼；把接收到的數(shù)據(jù)重新發(fā)給瀏覽器，輸出打印到瀏覽器會(huì)亂碼！

②對(duì)于POST請(qǐng)求：接收前端的數(shù)據(jù)輸出到控制臺(tái)和把接收到的數(shù)據(jù)重新發(fā)給瀏覽器進(jìn)行輸出兩者都會(huì)亂碼！

??發(fā)送給服務(wù)器的數(shù)據(jù)，服務(wù)器接收之后在控制臺(tái)打印亂碼解決

request.setCharacterEncoding("UTF-8");

??把接收到的數(shù)據(jù)響應(yīng)給瀏覽器亂碼解決

response.setContentType("text/html;charset=UTF-8");

2、AJAX的異步與同步

（1）什么是異步？什么是同步？

①ajax請(qǐng)求1和ajax請(qǐng)求2，同時(shí)并發(fā)，誰(shuí)也不用等誰(shuí)，這就是異步。（a不等b，b也不等a）

②如果ajax請(qǐng)求1在發(fā)送的時(shí)候需要等待ajax請(qǐng)求2結(jié)束之后才能發(fā)送，那么這就是同步。（a等待b，或者b等待a，只要發(fā)生等待，就是同步）

（2）異步和同步在代碼上如何實(shí)現(xiàn)？

同步：如果第三個(gè)參數(shù)是false，這個(gè)就表示“ajax請(qǐng)求1”不支持異步，也就是說ajax請(qǐng)求1發(fā)送之后，會(huì)影響其他ajax請(qǐng)求的發(fā)送，只有當(dāng)我這個(gè)請(qǐng)求結(jié)束之后，你們其他的ajax請(qǐng)求才能發(fā)送。

xhr1.open("請(qǐng)求方式", "URL", false)

異步：如果第三個(gè)參數(shù)是true，這個(gè)就表示“ajax請(qǐng)求2”支持異步請(qǐng)求，也就是說ajax請(qǐng)求2發(fā)送之后，不影響其他ajax請(qǐng)求的發(fā)送。

xhr.open("請(qǐng)求方式", "URL", true)

（3）演示異步和同步

①前端代碼：編寫兩個(gè)ajax請(qǐng)求，發(fā)送的都是GET請(qǐng)求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示ajax同步和異步</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function(){
        // --ajax請(qǐng)求1
        document.getElementById("btn1").onclick = function (){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function (){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        document.getElementById("div1").innerHTML = this.responseText
                    }else{
                        alert(this.status)
                    }
                }
            }
            xhr.open("GET", "/ajax/ajaxrequest8?t=" + new Date().getTime(), true)
            xhr.send()
        }
        // --ajax請(qǐng)求2
        document.getElementById("btn2").onclick = function (){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function (){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        document.getElementById("div2").innerHTML = this.responseText
                    }else{
                        alert(this.status)
                    }
                }
            }
            xhr.open("GET", "/ajax/ajaxrequest9?t=" + new Date().getTime(), true)
            xhr.send()
        }
    }
</script>
<button id="btn1">ajax請(qǐng)求1</button>
<div id="div1"></div>
<button id="btn2">ajax請(qǐng)求2</button>
<div id="div2"></div>
</body>
</html>

②后端代碼：根據(jù)兩個(gè)ajax發(fā)送不同的請(qǐng)求編寫

ajax1的請(qǐng)求

package com.bjpowernode.javaweb.ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
 * @program: 代碼
 * @ClassName: AjaxRequest8Servlet
 * @version: 1.0
 * @description: 測(cè)試ajax同步和異步
 **/
@WebServlet("/ajaxrequest8")
public class AjaxRequest8Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try {
            // 睡眠10秒
            Thread.sleep(10 * 1000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().print("ajax請(qǐng)求1");
    }
}

ajax2的請(qǐng)求

package com.bjpowernode.javaweb.ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
 * @program: 代碼
 * @ClassName: AjaxRequest8Servlet
 * @version: 1.0
 * @description: 測(cè)試ajax同步和異步
 **/
@WebServlet("/ajaxrequest9")
public class AjaxRequest9Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().print("ajax請(qǐng)求2");
    }
}

③運(yùn)行效果

??為了方便測(cè)試展示效果，給第一個(gè)ajax1請(qǐng)求睡眠了10秒

??ajax1的請(qǐng)求是true，說明支持異步，在睡眠10秒之內(nèi)，也能發(fā)送ajax2請(qǐng)求，互不影響！

??ajax1的請(qǐng)求是false，說明是同步，在睡眠10秒之內(nèi)整個(gè)屏幕相當(dāng)于是鎖死的，不能發(fā)送ajax2請(qǐng)求！只能等待睡眠結(jié)束，ajax1請(qǐng)求結(jié)束，才能發(fā)送ajax2請(qǐng)求！

（4）什么情況下用同步？ （大部分情況下我們都是使用ajax異步方式，同步很少用）

例如：用戶注冊(cè)

①用戶名需要發(fā)送ajax請(qǐng)求進(jìn)行校驗(yàn)。

②郵箱地址也需要發(fā)送ajax請(qǐng)求校驗(yàn)。

③其他的也可能需要發(fā)送ajax請(qǐng)求...............

④并且最終注冊(cè)按鈕的時(shí)候，也是發(fā)送ajax請(qǐng)求進(jìn)行注冊(cè)。

⑤那么顯然，注冊(cè)的Ajax請(qǐng)求和校驗(yàn)的ajax請(qǐng)求不能異步，必須等待所有的校驗(yàn)ajax請(qǐng)求結(jié)束之后，注冊(cè)的ajax請(qǐng)求才能發(fā)！

3、AJAX代碼封裝

JQuery庫(kù)的初次封裝：根據(jù)id獲取元素！

（1）AJAX請(qǐng)求相關(guān)的代碼都是類似的，有很多重復(fù)的代碼，那么我們不妨把這些重復(fù)的代碼封裝一個(gè)工具類。要發(fā)送ajax請(qǐng)求的話，就直接調(diào)用這個(gè)工具類中的相關(guān)函數(shù)即可。

（2）接下來，手動(dòng)封裝一個(gè)工具類，這個(gè)工具類我們可以把它看做是一個(gè)JS的庫(kù)。我們把這個(gè)JS庫(kù)起一個(gè)名字，叫做jQuery。（封裝的jQuery只是一個(gè)前端的庫(kù)，和后端的java沒有關(guān)系，只是為了方便web前端代碼的編寫，提高WEB前端的開發(fā)效率）

①源碼原型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("mybtn").onclick = function () {
                document.getElementById("div").innerHTML = "<font color='red'>歡迎登陸</font>"
            }
        }
    </script>
<body>
    <button id="mybtn">顯示信息</button>
    <div id="div">
    </div>
</body>
</html>

②進(jìn)行優(yōu)化：優(yōu)化通過id獲取對(duì)象

（1）設(shè)計(jì)思路來自于CSS的語(yǔ)法：可以通過id選擇器 #id 獲取到這個(gè)元素 ，也可以通過類選擇器 .class獲取到這個(gè)元素。

（2）我們發(fā)現(xiàn)通過id獲取這個(gè)對(duì)象代碼太長(zhǎng)了，不妨封裝到一個(gè)函數(shù)里面！封裝一個(gè)函數(shù)代替原來的document.getElementById，封裝到一個(gè)函數(shù)里面然后返回這個(gè)對(duì)象即可。做一個(gè)標(biāo)記#，只有這個(gè)標(biāo)記的才會(huì)調(diào)用document.getElementById獲得這個(gè)對(duì)象；并且參數(shù)傳進(jìn)去時(shí)要調(diào)用substring函數(shù)進(jìn)行截串，把#截取掉！

（3）對(duì)于函數(shù)名嫌長(zhǎng)也可以賦值給一個(gè)符號(hào)：$ = jQuery。

<script type="text/javascript">      
        // 再次進(jìn)行更改
        function jQuery(selector) { // selector只是一個(gè)變量
            // 獲取到第一個(gè)字符是不是#
            if (selector.charAt(0) == "#") {
                // 定義變量獲得這個(gè)對(duì)象
                var domObj = document.getElementById(selector.substring(1));
                // 返回的dom對(duì)象
                return domObj
            }
        }
        // 給函數(shù)名賦值
        $ = jQuery
        window.onload = function () {
           $("#mybtn").onclick = function () {
                $("#div").innerHTML = "<font color='red'>歡迎登陸</font>"
            }
        }
    </script>

③再次進(jìn)行優(yōu)化：頁(yè)面加載

封裝函數(shù)，替代window.onload；封裝頁(yè)面加載完畢之后，執(zhí)行回調(diào)函數(shù)。

<script type="text/javascript">
        function jQuery(selector) { // selector只是一個(gè)變量
            // 如果傳過來的是一個(gè)字符串string
            if (typeof selector == "string") {
                // 獲取到第一個(gè)字符是不是#
                if (selector.charAt(0) == "#") {
                    // 直接使全局變量
                    var domObj = document.getElementById(selector.substring(1));
                    // 返回的dom對(duì)象
                    return domObj
                }
            }
            // 如果傳過來的是一個(gè)函數(shù)：頁(yè)面加載完畢，注冊(cè)回調(diào)函數(shù)
            if (typeof selector == "function") {
                window.onload = selector;
            }
        }
        // 給函數(shù)名賦值
        $ = jQuery
        // 把函數(shù)直接傳進(jìn)去
        // $(function(){})的作用是：頁(yè)面加載完畢，就執(zhí)行里面的回調(diào)函數(shù)
        // 把整個(gè)函數(shù)當(dāng)做參數(shù)直接傳進(jìn)去
        $(function () {
            $("#mybtn").onclick = function () {
                $("#div").innerHTML = "<font color='red'>歡迎登陸</font>"
            }
        })
    </script>

④繼續(xù)優(yōu)化

（1）首先回顧javascript中的類的定義，對(duì)象的創(chuàng)建，屬性的訪問，方法的訪問！

（2）對(duì)于類的創(chuàng)建實(shí)際上是和函數(shù)的定義是一樣的，如果使用new就表示這是一個(gè)類；如果沒有使用new表示這是一個(gè)函數(shù)。

（3）注意：最重要的就是prototype屬性，可以用來擴(kuò)展類的屬性或者方法，語(yǔ)法格式如下：類.prototype.屬性/方法 = function(){}

（4）注意：對(duì)于靜態(tài)方法的調(diào)用，雖然也是使用的 "類名.靜態(tài)方法" 但是前提還是要先new對(duì)象，不然還是會(huì)當(dāng)做普通函數(shù)的調(diào)用！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回顧javascript中的類的定義，對(duì)象的創(chuàng)建。屬性的訪問，方法的訪問。</title>
</head>
<body>
<script type="text/javascript">
    // 1、在JS當(dāng)中定義類
 /*   這種創(chuàng)建類的方式也可以
    User = function (usercode,username) {
    }*/
    function  User(usercode,username) {
        // 屬性
        this.usercode = usercode;
        this.username = username;
        // 實(shí)例方法
        this.doSome = function () {
            alert(username+"doSome......");
        }
        // 靜態(tài)方法
        User.doOther = function () {
            alert(username+"doOther......")
        }
    }
    //2、創(chuàng)建對(duì)象
    // User(); 直接這樣調(diào)用，你只是把它當(dāng)做一個(gè)普通的函數(shù)去執(zhí)行，不會(huì)創(chuàng)建對(duì)象，在堆中沒有這個(gè)對(duì)象。
    // new User(); 這樣調(diào)用的話，其實(shí)就是調(diào)用該類的構(gòu)造方法，創(chuàng)建對(duì)象，并且在堆中分配空間。
    var user = new User("111","zhangsan");
    // 訪問屬性
    alert(user.usercode+" , "+user.username);
    // 調(diào)用實(shí)例方法
    user.doSome();
    // 調(diào)用靜態(tài)方法
    User.doOther();
    //3、后期新增一個(gè)fly方法，使用prototype屬性
    User.prototype.fly = function () {
        alert("飛翔.............")
    }
    // 調(diào)用擴(kuò)展的方法
    user.fly();
</script>
</body>
</html>

繼續(xù)進(jìn)行改造：把onclick和innerHTML封裝成click()和html()函數(shù)，一定要封裝徹底！

先封裝innerHTML屬性

（1）把innerHTML屬性封裝成一個(gè)html方法，然后把參數(shù)傳進(jìn)去即可。

（2）要搞明白是哪個(gè)對(duì)象進(jìn)行條用，對(duì)于html方法，肯定還是封裝子啊jQuery對(duì)象里面，所以只能這個(gè)對(duì)象才能調(diào)用；而下面的$("#mydiv")我們?cè)瓉矸祷氐氖且粋€(gè)domobj對(duì)象；所以要進(jìn)行修改，返回一個(gè)new jQuery。

（3）并封裝好html方法，傳一個(gè)字符串，把這個(gè)字符串傳給domObj.innerHTML；但是問題又來了原來寫的domObj對(duì)象是局部變量，外面并不能調(diào)用，所以要把var去掉變成全局變量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    function jQuery(selector) {
        // 如果是字符串
        if (typeof selector == "string") {
            // 看開頭是不是#
            if (selector.charAt(0) == "#") {
                //截掉#，然后傳進(jìn)去
                // 去掉var改為全局變量
                domObj = document.getElementById(selector.substring(1));
                // 返回一個(gè)jQuery對(duì)象，下面才能正常調(diào)用html方法
                return new jQuery();
            }
        }
        // 如果是一個(gè)函數(shù)：頁(yè)面加載完畢，注冊(cè)回調(diào)函數(shù)
        if (typeof selector == "function") {
            window.onload = selector
        }
        // 封裝html方法，代替domObj.innerHTML = ""
        this.html = function (htmlStr) {
            domObj.innerHTML = htmlStr
        }
    }
    // 把函數(shù)名賦給一個(gè)變量
    $ = jQuery;
    $(function () {
        $("#mybtn").onclick = function () {
            // 此時(shí)會(huì)有一個(gè)問題，domObj下沒有html方法
            // 所以在jQuery中封裝一個(gè)html方法，返回一個(gè)jQuery即可
            $("#mydiv").html("<font color='red'>Hello</font>");
        }
    })
</script>
<button id="mybtn">顯示信息</button>
<div id="mydiv">
</div>
</body>
</html>

在封裝onclick屬性

既然我們返回的是jQuery屬性，所以$("#mybtn").onclick肯定會(huì)有問題，只有domObj這個(gè)對(duì)象才有onclick屬性，所以要對(duì)onclick屬性進(jìn)行封裝，封裝要徹底！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <script type="text/javascript">
        function jQuery(selector) {
        // 如果是字符串
        if (typeof selector == "string") {
            // 看開頭是不是#
            if (selector.charAt(0) == "#") {
                //截掉#，然后傳進(jìn)去
                // 去掉var改為全局變量
                domObj = document.getElementById(selector.substring(1));
                // 返回一個(gè)jQuery對(duì)象，下面才能正常調(diào)用html方法
                return new jQuery();
            }
        }
        // 如果是一個(gè)函數(shù)：頁(yè)面加載完畢，注冊(cè)回調(diào)函數(shù)
        if (typeof selector == "function") {
            window.onload = selector
        }
        // 封裝html方法，代替domObj.innerHTML = ""
        this.html = function (htmlStr) {
            domObj.innerHTML = htmlStr
        }
        // 封裝onclick方法，直接傳一個(gè)函數(shù)，代替：domObj.onclick = function(){}
        this.click = function (fun) {
            domObj.onclick = fun
        }
    }
    // 把函數(shù)名賦給一個(gè)變量
    $ = jQuery;
    $(function () {
        // 把整個(gè)函數(shù)直接傳過去
        $("#mybtn").click(function () {
            // 此時(shí)會(huì)有一個(gè)問題，domObj下沒有html方法
            // 所以在jQuery中封裝一個(gè)html方法，返回一個(gè)jQuery即可
            $("#mydiv").html("<font color='red'>Hello</font>");
        })
    })
    </script>
<body>
    <button id="mybtn">顯示信息</button>
    <div id="div">
    </div>
</body>
</html>

⑤將jQuery單獨(dú)寫到j(luò)s文件中使用時(shí)引入庫(kù)

在web目目下創(chuàng)建一個(gè)js目錄，把我們前面封裝好的代碼放到一個(gè).js文件，然后扔進(jìn)js目錄下；并且使用這個(gè)之前，需要先把它引進(jìn)去！

function jQuery(selector){
    if (typeof selector == "string") {
        if (selector.charAt(0) == "#") {
            domObj = document.getElementById(selector.substring(1))
            return new jQuery()
        }
    }
    if (typeof selector == "function") {
        window.onload = selector
    }
    this.html = function(htmlStr){
        domObj.innerHTML = htmlStr
    }
    this.click = function(fun){
        domObj.onclick = fun
    }
    this.focus = function (fun){
        domObj.onfocus = fun
    }
    this.blur = function(fun) {
        domObj.onblur = fun
    }
    this.change = function (fun){
        domObj.onchange = fun
    }
    this.val = function(v){
        if (v == undefined) {
            return domObj.value
        }else{
            domObj.value = v
        }
    }

使用封裝好的函數(shù)進(jìn)行調(diào)用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測(cè)試自己編寫的jQuery</title>
</head>
<body>
    <!--使用jQuery庫(kù)，需要先引進(jìn)來-->
    <script type="text/javascript" src="js/jQuery-1.0.0.js"></script>
    <script type="text/javascript">
         // 常規(guī)寫法
         window.onload = function(){
            document.getElementById("btn").onclick = function () {
                alert("hello1")
            }
        }
        // 使用我們自己寫的庫(kù)
        $(function () {
            $("#btn").click(function () {
                //alert("hello2");
                // 獲取文本框的內(nèi)容
                alert($("#username").val())
                // 修改文本框的value
                $("#username").val("張三")
                // 設(shè)置div的內(nèi)容
                $("#mydiv").html("<font color='red'>你好</font>")
            })
        })
    </script>
    <button id="btn">hello</button><br>
    用戶名：<input type="text" id="username"><br>
    <div id="mydiv"></div>
</body>
</html>

4、手動(dòng)封裝一個(gè)jQuery庫(kù)

①將整個(gè)Ajax請(qǐng)求的步驟封裝到j(luò)Query-1.0.0.js當(dāng)中

只針對(duì)傳過來的數(shù)據(jù)是JSON格式的數(shù)據(jù)來封裝！

②原型代碼：

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>將AJAX代碼進(jìn)行封裝，封裝到j(luò)Query庫(kù)當(dāng)中</title>
</head>
<body>
    <!--原碼-->
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                // 創(chuàng)建對(duì)象
                var xhr = new XMLHttpRequest();
                // 注冊(cè)回調(diào)函數(shù)
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            // 只針對(duì)JSON格式的數(shù)據(jù)
                            var jsonObj = JSON.parse(this.responseText);
                            // 把數(shù)據(jù)放入到div里
                            document.getElementById("mydiv").innerHTML = jsonObj.username
                        }else {
                            alert(this.status)
                        }
                    }
                }
                // 打開通道
                xhr.open("POST","/ajax/ajaxrequest10",true)
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                // 發(fā)送請(qǐng)求
                var username = document.getElementById("username").value;
                xhr.send("username="+username);
            }
        }
    </script>
    <button id="btn">發(fā)送ajax請(qǐng)求</button><br>
    用戶名：<input type="text" id="username"><br>
    <div id="mydiv"></div><br>
</body>
</html>

后端

package com.bjpowernode.javaweb.ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
 * @Package：com.bjpowernode.javaweb.ajax
 * @Project：ajax
 */
@WebServlet("/ajaxrequest10")
public class AjaxRequest10Servlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();
        // 獲取前端提交的數(shù)據(jù)
        String username = request.getParameter("username");
        // 以JSON格式數(shù)據(jù)提交
        out.print(" {\"username\" : \""+username+"\"}");
    }
}

我們發(fā)現(xiàn)原型代碼很多重復(fù)的，不夠簡(jiǎn)練，所以下面進(jìn)行封裝一下

③使用封裝好的jQuery-1.0.0.js：

這個(gè)庫(kù)封裝好以后，要想調(diào)用，必須先使用src屬性引入，例如：

<script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js">

手動(dòng)封裝一個(gè)jQuery庫(kù)

function jQuery(selector){
    if (typeof selector == "string") {
        if (selector.charAt(0) == "#") {
            domObj = document.getElementById(selector.substring(1))
            return new jQuery()
        }
    }
    if (typeof selector == "function") {
        window.onload = selector
    }
    this.html = function(htmlStr){
        domObj.innerHTML = htmlStr
    }
    this.click = function(fun){
        domObj.onclick = fun
    }
    this.focus = function (fun){
        domObj.onfocus = fun
    }
    this.blur = function(fun) {
        domObj.onblur = fun
    }
    this.change = function (fun){
        domObj.onchange = fun
    }
    this.val = function(v){
        if (v == undefined) {
            return domObj.value
        }else{
            domObj.value = v
        }
    }
    // 靜態(tài)的方法，發(fā)送ajax請(qǐng)求
    /**
     * 分析：使用ajax函數(shù)發(fā)送ajax請(qǐng)求的時(shí)候，需要程序員給我們傳過來什么？
     *      請(qǐng)求的方式(type)：GET/POST
     *      請(qǐng)求的URL(url)：url
     *      請(qǐng)求時(shí)提交的數(shù)據(jù)(data)：data
     *      請(qǐng)求時(shí)發(fā)送異步請(qǐng)求還是同步請(qǐng)求(async)：true表示異步，false表示同步。
     */
    jQuery.ajax = function(jsonArgs){ // 接收前端代碼傳過來的json數(shù)據(jù)
        // 創(chuàng)建對(duì)象
        var xhr = new XMLHttpRequest();
        // 注冊(cè)回調(diào)函數(shù)
        xhr.onreadystatechange = function () {
            if (this.readyState == 4) {
                if (this.status == 200) {
                    // 只針對(duì)JSON格式的數(shù)據(jù)，這個(gè)是服務(wù)器響應(yīng)回來的JSON格式代碼
                    var jsonObj = JSON.parse(this.responseText);
                    // 把數(shù)據(jù)放入到div里
                    // 調(diào)用函數(shù)
                    jsonArgs.success(jsonObj)
                }else {
                    alert(this.status)
                }
            }
        }
        // 打開通道，看是那種請(qǐng)求方式
        if (jsonArgs.type.toUpperCase() == "POST") {// 如果是POST請(qǐng)求
            xhr.open("POST",jsonArgs.url,jsonArgs.async)
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // 發(fā)送請(qǐng)求
            xhr.send(jsonArgs.data);
        }
        if (jsonArgs.type.toUpperCase() == "GET") {// 如果是GET請(qǐng)求
            xhr.open("GET",jsonArgs.url+"?"+jsonArgs.data,jsonArgs.async)
            // 發(fā)送請(qǐng)求
            xhr.send();
        }
    }
}
$ = jQuery
// 細(xì)節(jié)：執(zhí)行這個(gè)目的是為了讓上面的靜態(tài)方法ajax生效。
new jQuery()

前端代碼：前端在編寫Ajax四步就可以前不一樣了，直接調(diào)用jQuery庫(kù)中封裝好的函數(shù)傳過去JSON數(shù)據(jù)即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>將AJAX代碼進(jìn)行封裝，封裝到j(luò)Query庫(kù)當(dāng)中</title>
</head>
<body>
<!--原碼-->
<script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
            // 調(diào)用jQuery的工具類中的ajax方法來發(fā)送ajax請(qǐng)求
            /*var username = document.getElementById("username").value
            $.ajax({
                type : "POST",
                url : "/ajax/request10",
                data : "username=" + username,
                async : true,
                // 程序響應(yīng)回來之后，對(duì)于客戶端來說要拿到響應(yīng)的數(shù)據(jù)，然后解析這個(gè)數(shù)據(jù)，展示到頁(yè)面上。
                success : function(json){
                    document.getElementById("mydiv").innerHTML = json.uname
                }
            })*/
             // 進(jìn)一步優(yōu)化
             $.ajax({
                type : "POST",
                url : "/ajax/request10",
                data : "username=" + $("#username").val(),
                async : true,
                // 程序響應(yīng)回來之后，對(duì)于客戶端來說要拿到響應(yīng)的數(shù)據(jù)，然后解析這個(gè)數(shù)據(jù)，展示到頁(yè)面上。
                success : function(json){
                    $("#mydiv").html( json.uname)
                }
            })
             
 
        })
    })
</script>
<button id="btn">發(fā)送ajax請(qǐng)求</button>
<br>
用戶名：<input type="text" id="username"><br>
<div id="mydiv"></div>
<br>
</body>
</html>

后端代碼：得到前端發(fā)送的數(shù)據(jù)后，也響應(yīng)回去一個(gè)JSON格式的數(shù)據(jù)

package com.bjpowernode.javaweb.ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
 * @Package：com.bjpowernode.javaweb.ajax
 * @Project：ajax
 * @name：AjaxRequest10Servlet
 */
@WebServlet("/request10")
public class AjaxRequest10Servlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 設(shè)置響應(yīng)的類型
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        // 獲得前端提交的數(shù)據(jù)
        String username = request.getParameter("username");
        // 響應(yīng)給瀏覽器
       out.print("{\"uname\" : \""+username+"\"}");
    }
}

到此這篇關(guān)于AJAX亂碼與異步同步以及封裝jQuery庫(kù)實(shí)現(xiàn)步驟詳解的文章就介紹到這了,更多相關(guān)AJAX亂碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論