ホームページ >ウェブフロントエンド >jsチュートリアル >Ajax非同期リクエストバインディングを学ぶ道場2日目 list_dojo

Ajax非同期リクエストバインディングを学ぶ道場2日目 list_dojo

WBOY
WBOYオリジナル
2016-05-16 18:02:531152ブラウズ

ユーザーはスクロール バーを好まないので、タブ切り替えを行いました。ユーザーはページを更新することを好まないので、Ajax を使用する必要がありました。ここ数年、ほぼすべての Web 開発者が、少しは Ajax を知っていることを誇りに思っていました。しかし、ajax を使用するだけでは十分ではありません。テクノロジーは人々に役立つものであり、テキストボックスを検証するためだけに非同期リクエストを行うことはできません。また、ajax を使用してユーザー情報を更新している人に遭遇しました。更新中に、ajax が最初に停止し、その後ポストバックされます。これはどのような動作だと思いますか?このような人はかなり多く、ajax を使用して場所を特定する人にも遭遇しました。その ajax の意味は何ですか?それは純粋に、彼がそのようなことが存在することを知っていることを示すためでした。

ajax と言えば、クロスドメインの問題について話さなければなりません。他のドメイン名でファイルを非同期にリクエストすると、アクセス セキュリティの問題が発生します。インターネット上には多くの解決策がありますが、そのほとんどは欺瞞的です。ただし、絶対に実行可能な方法がまだ 2 つあります。たとえば、aa.com の bb.com にある cc.ashx に非同期でアクセスする場合は、

1. aa.com の下に dd.ashx ファイルを作成し、ajax を使用して dd.ashx ファイルにアクセスできます。この時点では、クロスドメインの問題がないため、dd.ashx は bb.com の下の cc.ashx にアクセスします。バックグラウンド アクセスでは、非同期でアクセスするのは依然として aa.com と同じドメイン内のファイル dd.ashx であるため、現時点ではクロスドメインはありません。 dd.ashx が bb.com にアクセスする方法については詳しく説明しませんが、原理は同様です。
2. jsonp が返されると、最初のメソッドではもう 1 つのリクエストが必要となり、必然的に速度に影響を与えるため、現在このメソッドの方が一般的です。 jsonp という名前はあまり良いとは思えませんが、その原理は です。このように外部 JS ファイルへのクロスドメイン参照がないことに気づきましたか? jsonp はサーバー側で json オブジェクトを返し、クライアントで関連する操作を実行するコールバックを実行します。このオブジェクトは、聞けば聞くほどわからなくなりますか?もう誤解させないでください。自分で調べてください。

つまり、json は js の学習全体において非常に重要です (このトピックは少し難しいです)。一般に、ajax は json を返すため、Dojo では新しい処理のために別の json が必要になります。次のコードで:

コード をコピーします。 コードは次のとおりです:

var jsons= [{},{}];
jsons[0].url="http://www.jb51.net";
jsons[0].text="スクリプト ホーム"; 1].url="http://www.lovewebgames.com";
jsons[1].text="私のウェブサイト"
var list=document.getElementById("list") ; dojo.forEach(jsons,function(onejson){
var li=document.createElement("li");
li.innerHTML=dojo.string.substitute("${text}",onejson});,);
list.appendChild(li);


一文ずつ説明しましょう。小さいので無視してください。まず、2 つの json オブジェクトを含む配列オブジェクト jsons を宣言し、それぞれの URL とテキストに値を割り当てたのはなぜですか?理解しやすいように、次の行のように書くこともできます:

var jsons=[{url:"http://www.jb51.net",text:"Script Home"},{url :"http://www.lovewebgames .com/",text:"My website"}];
次に、この配列を調べます。これには 2 つのパラメーターがあり、1 つは対象となるオブジェクトです。 1 つ目は関数ハンドル (ハンドルまたはデリゲートと呼ぶことができます) で、これにはパラメータがあり、これが各アイテムを走査します。最後に、文字列テンプレートを使用して json の属性値を取得しました。${url} は、onjson.url (${text}=onejson.text) の値を取得することと同じです。例については、ここをクリックしてください。

次に、一般的に使用されるリスト バインディングを作成します。これには、行スタイルの交互、ドラッグ可能な列幅、オプションの並べ替えなど、いくつかの一般的な機能があります。以下に示すような標準的な基本テーブル:


これを行うには、新しいテーブル テーマ スタイルも参照する必要があります。コードを完成させて次のように説明します。

コードをコピーします コードは次のとおりです: