フロントエンド研究ノート（6）フロントエンドとバックエンドのデータ相互作用のためのAjax

Ajaxとは

Ajaxとその英語名はAsynchronousJavaScript And XMLです。名前が示すように、非同期JavaScriptとXMLは、最新のネットワークのフロントエンドとバックエンドの相互作用において非常に重要な非同期相互作用テクノロジーです。
Ajaxは、Webページ全体をロードせずに一部のWebページを更新できるテクノロジーです。

同期および非同期の概念図

なぜajaxが必要なのですか

従来のWebページ（該当なし）コンテンツを更新する必要がある場合、AjaxはWebページ全体をリロードする必要があります。これはネットワークリソースの浪費であり、ユーザーエクスペリエンスの低下です。これらの欠点を改善するために、ajaxの基盤が生まれました。Ajaxを
使用すると、ネットワークリソースを節約し、ユーザーエクスペリエンスを向上させることができます。

ajaxの使用方法

ajaxの実装

ajaxを書くネイティブな方法

ブラウザ側：

function fun() {
    
    
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
    
    // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
    
    // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //startup connection
    /***
     * 参数:
     * 1.请求方式,get、post
     * get方式，请求参数在URL后面拼接，send方法为空参
     * post方式， 请求参数在send方法中定义
     * 请求url
     * 同步或者异步请求，true(异步)或false(同步)
     ***/

    xmlhttp.open("GET","ajaxServlet?username=tom",true);
    //xmlhttp.send("username=tom");
    xmlhttp.send();
    //数据处理
    xmlhttp.onreadystatechange=function()
    {
    
    
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
    
    
            var responseText = xmlhttp.responseText;
            alert(responseText);
        }
    }
}

サーバ：

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        String username = request.getParameter("username");
        System.out.println(username);
        response.getWriter().write("hello:"+username);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        this.doPost(request, response);
    }
}

jqueryでajaxを書く

$ .ajax（）

構文：$。ajax（{キーと値のペア}）;

function fun() {
    
    
    $.ajax({
    
    
       url:"ajaxServlet",
       type: "post",
        //第一种数据请求方式
       //: data:"username=jack&age=23",
        //第二种数据请求方式
       data:{
    
    "username":"jack","age":23},
        success:function (data) {
    
    
            alert(data);
        },
        error:function () {
    
    
            alert("error......")
        },
        dataType: "text"
    });
}

2. $。GET（）言語の方法：$に.get（URL、[データ]、[コールバック]、[タイプ]）
   パラメータ：
   URL：パス要求
   データ：パラメータ要求
   コールバック：コールバック関数の
   タイプ：タイプの応答結果

function fun() {
    
    
    $.get("ajaxServlet",{
    
    username:"rose"},function (data) {
    
    
        alert(data);
    },"text");
}

3. $ .post（）
   は上記のgetと一致しています

function fun() {
    
    
    $.post("ajaxServlet",{
    
    username:"rose"},function (data) {
    
    
        alert(data);
    },"text");
}