Foundation of Ajax

前言
一人一人がJavaScriptを勉強しているうちに、今日のテーマであるAjaxがあります.1年前、私は本当にこのものに触れたのですが、本当に難しいと思って、その原理をよく理解していません.今年になってAjaxに関するコードを書いたことがあります.
そのわけを知る
まず、なぜAJAXが現れたのか説明します.ずいぶん前、フォーム検証の過程で、データをバックグラウンド検証するにはコミットボタンを押さなければならなかったので、もしこのユーザー名が登録されていたら、ページが自動的に更新され、すべての情報が再記入されなければならないという結果になりました.そのため、更新や検証を繰り返すことを防ぐために、キーボードを持ってパソコンを壊す行為があります.Ajaxが現れました.AjaxはAsynchronous JavaScript and XMLの略です.このテクノロジーは、ページをリフレッシュすることなくサーバにデータを要求することができ、もちろん良好なユーザー体験をもたらします.Ajaxのコアは、JavaScriptのオブジェクトXMLHttpRequestです.このオブジェクトは、サーバへのデータの送信と解析サーバへの応答を支援します.もちろん、このオブジェクトには一定の互換性の問題があります.IE 7+であれば、私以下のオリジナルの方法を使用することができます.今はそんなに考えなくてもいいです.jQueryパッケージのajax方法を使用することができます.
以下は、オリジナルの方法です.

var XHR = new XMLHttpRequest();

その核心はこの対象だと言われています.データをバックグラウンドに送信するには、XMLHttpRequestを作成してバックグラウンドを通過できる道を作成します.このオブジェクトには多くのプロパティとメソッドがあり、主に2つのメソッドが使用されます.
Openメソッド

open(method,url,async)

methd要求に使用されるHTTPメソッド.理解できない場合は、フォームのコミットにも同じ属性があるかどうかを考えてみましょう.同じです.

urlこのリクエストにアクセスするURL.データを送信する宛先です.

asyncこれはブールパラメータです.true(非同期)false(同期).もちろんAjaxを使うときはtrueが必要です.

sendメソッド

send(string)

は、要求をサーバ

に送信する.

stringはPOST要求

にのみ使用する.
このオブジェクトを使用して同期を実現する方法も可能です.

// HTML    
// 

XHR.opend("get","ajax_test.php",false);
XHR.send();  //         ，              
doucument.getElementById("test").innerHTML = XHR.responseText
// PHP  
// echo "          "

onreadystatechange 事件

我们整个Ajax要做就是：将数据发送到服务器，服务器在响应回来响应的数据进行处理。
然而，我们怎么样才能得到监听响应呢？
因为XMLHttpRequest状态都由readyState记录着，每一次改变都会触发onreadystatechange。

XHR.onreadystatechange = function(){
     if(XHR.readyState == 4 && XHR.status == 200){
        doucument.getElementById("test").innerHTML = XHR.responseText
     }
}

补:最初に行ったコンピューターネットワークを覚えていますか.TCP接続は3回の握手を経て構築された.握手のたびに、現在の接続状況を説明するフィールド情報の一部がメッセージに表示されます.同様に、XMLHttpRequestのreadyState属性はその状態を記録している.readyStateの変更のたびに、onreadystatechangeイベントがトリガーされます.
XMLHttpRequestの3つの重要な属性(補足)

onreadystatechange:readyStateプロパティが変更されるたびに呼び出されるイベント(ストレージ関数)です.

readyState:XMLHttpRequestの状態.0から4まで変化します.

0:要求未初期化

1:サーバリンクが確立された

2:要求受信

3:要求処理中

4:要求完了(応答準備完了)

status:応答状態コード

200 : "OK"

404 : "not found"

まとめAjaxを使用すると、ページがリフレッシュされた状態でサーバとデータのやりとりが行われます.

//   
    var XHR = new XMLHttpRequest();
    XHR.onreadystatechange = function(){
        if(XHR.readyState == 4 && XHR.status == 4){
            doucument.getElementById("test").innerHTML = XHR.responseText
        }
    }
    // GET
    XHR.open("GET","ajax_test.php?name=baiji",true)
    XHR.send()
    
    // POST
    XHR.open("POST","ajax_test.php",true)
    XHR.setRequestHeader("Content-Type","application/xxx-form-urlencoded")
    XHR.send(name=baiji)

もちろん、ajax関数を自分でカプセル化したり、jQueryのajaxを使用したりすることもできます.

/*
           
    ajax({
      url:"getData.php",
      type:"get",
      data:{
        name:"baiji"
      },
      success:fn,
      error:fn
    })
*/

    function ajax(opts){
        var XHR =new XMLHttpRequest();
        
        XHR.onreadystatechange = function(){
            if(XHR.readyState == 4){
                if(XHR.status == 200){
                    opts.success(XHR.responseText)
                }else{
                    opts.error();
                }
            }
        }
        
        var dataStr = "";
        
        for(var key in opts.data){
            dataStr += key+"="+opts.data[key]+"&";
        }
        
        dataStr = dataStr.substring(0,dataStr.length-1);
        var type = opts.type.toLowerCase();
        
        if(type === "get"){
            XHR.open(type,opts.url+"?"+dataStr,true);
            XHR.send();
        }
        
        if(type === "post"){
            XHR.open(type,opts.url,true);
            XHR.setRequestHeader("Content-Type":"application/xxx-form-urlencoded");
            XHR.send(dataStr);
        }
        
    }

もちろん、最も簡単な便利なjQueryを選ぶことができます.もっと多くの使い方は、自分でAPIを見てください.

    $.ajax({
        type:"GET"，
        url:"getData.php"
    })

上記はすべて私自身が理解しているAjaxで、ずっと良い状態でプロジェクトをしていないか、何の良いプロジェクトもないので、自分でお菓子で作らせます.自分で状态を调整することを期待して、私は今振り返ってやっとこのブログを书き终わって、一日の本は読んだことがありますか!!!
本文章の著作権は白小霁の所有であり、転載は出所を説明しなければならない.