jQueryのAJAXの知識まとめ

今回は編集者が皆さんのために jQuery における AJAX の知識ポイントをまとめました。以下にその知識ポイントをまとめましたので見てみましょう。

1. AJAXの概念
Asynchronous Javascript And XML (非同期JavaScriptとXML)
AJAXは言語ではなく、インタラクティブなWebアプリケーションを作成するためのWeb開発テクノロジーです
AJAXはJavaScript、XHTML、CSS、およびDOMです。 XML の組み合わせ。 4. 動的表示と対話のために JavaScript を使用してドキュメント オブジェクト モデル (ネットワーク ドキュメント オブジェクト モデル) を操作します。
JavaScript を使用してすべてのデータをバインドし、処理します。
XML とは、拡張マークアップ言語 (Extensible Markup Language) を指します。 EXtensible Markup Language)
XML XML は HTML によく似たマークアップ言語であり、データを表示するために設計されており、XML タグは事前に定義されていません。ラベルは自分で定義する必要があります。
XML は自己記述的になるように設計されています。
XML は W3C によって推奨される標準です
XSLT とは何ですか?
XSLTはXSL変換[1]を指します
XSLTはXSLの最も重要な部分です
XSLTはある種類のXMLドキュメントを別の種類のXMLドキュメントに変換できます
XSLTはW3C標準を使用します


AJAXのコアオブジェクトはXMLHttpRequest




II. AJAX 動作原理


ユーザー操作プロセス:
ユーザーブラウザ -> JavaScript が XmlHttpRequest オブジェクトをインスタンス化 -> AJAX エンジン -> http リクエスト - >Web サーバー -> バックエンドビジネスシステム
システムリターンプロセス:
バックエンドビジネスシステム->バックエンドサーバー->Webサーバー->HTML、XML、JSONデータ->AJAXエンジン->HTML+CSS(ウェルブラウザ)->ユーザーブラウザ
3. AJAX の長所と短所:


AJAX 非同期処理の利点:
サーバーの負担を軽減、AJAX は通常、サーバーから必要なデータのみを取得します
ページの更新が不要、ユーザーの待ち時間を短縮します
より良い顧客エクスペリエンス、一部のサーバー作業をクライアントに転送して完了し、ネットワーク リソースを節約し、ユーザー エクスペリエンスを向上させることができます プラットフォームの制限がありません 表示とデータの分離を促進します AJAX 非同期処理の欠点 : ページ内に大量の JS があり、検索エンジンに困難をもたらす
AJAXは戻る機能と履歴機能を無効にする、つまりブラウザのメカニズムを損傷する
クロスドメインの問題がある
utf-8でエンコードされたデータのみ送受信できる




1.AJAXの実装step




window.open(URL,name,features,replace)
URL:新しいウィンドウに表示されるドキュメントの URL を宣言するオプションの文字列。このパラメータが省略されている場合 またはその値が空の文字列の場合、新しいウィンドウにドキュメントは表示されません
name:
数字、文字、アンダースコアを含む機能のカンマ区切りリストであるオプションの文字列、
この文字新しいウィンドウの名前を宣言します。この名前は、タグ および

の target 属性の値として使用できます。
このパラメータで既存のウィンドウを指定すると、open() メソッドは新しいウィンドウを作成せず、指定されたウィンドウへの参照を返すだけになります。この場合、機能は無視されます features: 新しいウィンドウに表示される標準ブラウザ機能を宣言するオプションの文字列。このパラメータを省略した場合、
新しいウィンドウにはすべての標準機能が含まれます。ウィンドウ特性の表で、この文字列の形式について詳しく説明します
replace:
オプションのブール値。ウィンドウにロードされた URL がウィンドウの閲覧履歴に新しいエントリを作成するか、閲覧履歴の現在のエントリを置き換えるかを指定します。次の値がサポートされています:
true - URL は閲覧履歴の現在のエントリを置き換えます。
false - URL は閲覧履歴に新しいエントリを作成します


send()send() は、既に接続されているソケットにデータを送信するために使用されます。エラーがない場合、戻り値は送信されたデータの合計数です 。それ以外の場合は、SOCKET_ERROR を返します。 [1] Send も英語の単語です。



responseText 属性:


サーバープロセスによって返されたデータのテキストバージョン
サーバープロセスによって返されたデータの DOM 互換 XML ドキュメントオブジェクトステータスステータスサーバーによって返されたステータスコード (例: : 404 = "ファイルが見つかりません"。
リクエスト ajax バックグラウンド プログラムが xmlhttp リクエストを送信すると、バックグラウンド プログラムはリクエストを受信した後、そのリクエストを処理します。処理が完了すると、一連のデータをフロント デスクに返すことができます。 ,
これはresponseTextです。
一般的にバックグラウンドプログラムC#ではResponse.Write(" String")ですphpで使うのは出力文字列であるecho…です文字列を出力したいけど時々あるからです配列を取得しますが、それをシリアル化する必要があります。PHP の json テクノロジを使用して、配列が文字列に変換されてフロントエンドに出力されます。フロントエンドの respText 属性はこの文字列を受け取り、この文字列を変換するための JS の json テクノロジー 再度JSが認識するオブジェクトに変換して操作します（jsonデータの送信型は基本的にどの言語でも知られており、さまざまな言語での送信や変換に利用できます）


XMLHttpRequestオブジェクトを初期化する

  if (window.XMLHttpRequest) {// Mozilla, Safari, ...
var http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 5 ,6
var http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequestはHTTPを発行するrequest

http_request.open("GET|POST","test.php?GET方式传值",true);
          http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //仅POST请求时需要设置
         //用于向一个已经连接的socket发送数据
         //如果是POST传输方式要把值写在send()函数里
          http_request.send(向一个已连接的套接口发送数据);
      XMLHttpRequest取得响应数据并显示
       http_request.onreadystatechange=function(){
if(http_request.readyState==4  && http_request.status==200){
                    $("p").text(http_request.responseText)
         }
      }

例:
//GET メソッド
パラメーター 1: リクエストを get モードで送信するか、post モードで送信するかを表します パラメーター 2: リクエストをどの URL に送信するかを表します パラメーター 3: true は非同期リクエストを表し、false は同期リクエストを表しますrequest

http_request.open("GET","test.php?user_name="+username.val(),true);
http_request.send();

POSTリクエストを送信する

var username=$("input[name='user_name']");

パラメータ1: リクエストをgetモードで送信するかpostモードで送信するかを表しますパラメータ2: リクエストをどのURLに送信するかを表しますパラメータ3: trueは非同期リクエストを表し、falseは同期リクエストを表しますrequest

http_request.open("POST","test.php",true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

POST送信メソッドの場合はsend()関数に値を記述します

http_request.send({username:username});

IV. JSON
Javascript Object Notationは軽量なデータ交換形式です
JSONはあらゆる言語で認識され、さまざまな言語でデータを変換するために使用します
JSON サポート 複数の言語
形式
{key:value,key:value,....} オブジェクト形式
[{key:value,key:value,... ..},{key:value,key:value, .....},......] 配列形式
PHP処理:
$json=json_encode($array) //変数のJsonエンコード
$ array=json_decode($json) //JsonデータをデコードしてPHP変数に変換
JavaScript処理:
eval('('+json+')') //JSコードに従って特定の文字列を実行
例:

eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
JSON.parse(json) //对传过来的json字符串进行解码，变成JS认识的对象
JSON.stringify(obj) //将JS中的值编译成json字符串

Jquery 1℃のAjaxアプリケーション。 ) シーケンステーブルテーブルの内容は文字列でシリアル化されます データは Ajax リクエストに使用されます

$.ajax({
            //你要传的php文件的路径
            url:"test1.php",    ('服务器url地址')
            //以get方式传输拼接字符串
            data:"user_name="+$('input[name="user_name"]').val(),('名=值&名=值&.....',)
            //以什么方式传输
            type:'get',('post|get')
            //传输返回的数据类型
            dataType:'json',  ('xml|html|text|json|script')
            //展示 数据的方式
            success:function(res){
                $('h1').text('用户名为：'+res.user_name);
            },
                //错误信息
                error:function(xhr){
                },
              timeout:2000,
              async:true,
              cache:false
})

例:

$.get()
$.get('服务器url地址'，"json格式或字符串格式"，function(res){
        //处理返回的数据
}), "xml|html|json|text|script")

php

            //'服务器url地址'，"json格式或字符串格式"
        $.get("test1.php",{user_name:$("input[name='user_name']").val()},function(data){
               //如果后台发过来的值跟这里的值相等让他执行下面代码
                if(data.status=='ok'){
                    alert("登陆成功");
                    location.href="http://www.wl.com";
                }else{
                    alert("登陆失败");
                }
        //"xml|html|json|text|script"类型
        },'json')

で出力を受信して​​処理します

以上がjQueryのAJAXの知識まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。