ホームページ > 記事 > ウェブフロントエンド > ajaxを実装する3つの方法
ajaxを実装する3つの方法
- php中世界最好的语言オリジナル
- 2018-04-04 15:57:222425ブラウズ
今回は、ajaxを実装するための3つの方法を紹介します。ajaxを実装するための注意事項は何ですか?実際のケースを見てみましょう。
Ajax: テクノロジーを更新しない非同期通信の代わりに、非同期 JavaScript および Json オブジェクトを使用します。このテクノロジーは、ブラウザーの創始者である NetScape が最初に Web ページ要素の表現を豊かにするために LiveScript スクリプト言語を発明しました。 Web ページに動的な効果を表示できるようにするため、その後の改訂とアップグレードを経て、JavaScript 言語が誕生しました。同時に、Microsoft もインターネット業界に参入し始め、JScript 言語を立ち上げました。残念ながら、それは JavaScript ほど成熟しておらず、その開発は停滞していました。最終的には、Microsoft のインターネットに対する決意が、MS による長く曲がりくねった NS の買収に貢献しました。
ここで、Dynamic Hyper Text Markup Language ( Dynamic Hyper Text Markup Language) は、動的な表示動作を提供する要素として JavaScript を Dom ツリーの要素ノードに配置することです。 (2) Web フロントエンド開発のための 2 つのアイデア: JavaScript + XHR。 + CSS b. Flash ---> ブラウザ プラグイン ---> Silverlight 4.0 (MS)1. MS の XHR (XMLHttpRequest) を採用 ---> 2. flash: MicroMedia ---> Adobe が買収 ---> flex (ActionScript とリッチ インターネット アプリケーション テクノロジの組み合わせをカバー)
3. SilverLight が flex と競合するために開始されました
注:バックグラウンドでサーバーと非同期に通信できるようにするために、Microsoft は 2 つのコンポーネントを追加しました。サーバーとの通信を担当するコンポーネント (XMLHTTPRequest) と、データのキャリアとして XML を使用するコンポーネントです。 Exchange は多言語処理に有利ですが、XML の処理コストは高くなります。実際には、Ajax では Json オブジェクトが使用されます。Web ページの生成プロセスは実際には 1 セットで完了します。クライアント側の JS 言語とサーバー側の C# 言語の間でデータを転送するために、.Net はサーバー側の C# オブジェクトと Json オブジェクト間の変換を行う Json シリアル化 とデシリアライザーを提供します。ブラウザ側では、 eval() 関数を使用して、サーバーから渡された Json 文字列を取得し、それを Json オブジェクトに変換できます。
(3) Ajax が解決する問題は何ですか
クライアントがサーバーにページをリクエストすると、サーバーはまずページを動的に計算して生成し、それからクライアントのブラウザーが順番にコンパイルしてページをレンダリングします。 Ajax を使用しない場合: ページにユーザーがいる場合。検証コントロールを使用すると、クライアントのブラウザがユーザー検証コントロールを提示すると、サーバーの検証結果を待ち、結果を受信した後にのみページ要素のレンダリングを続行できます。この検証プロセスには通常、データベースの読み取りなどの操作が必要です。これはいわゆる同期方法です。この方法では、Web ページが一時停止したアニメーションの状態で表示されます。
Ajax を使用した後: これは検証コントロールでもあり、クライアントは検証リクエストを送信しました。その後、他の要素が送信されます。検証結果が得られると、クライアント側のJavaScriptによりメモリ上のDOMオブジェクトが変更され、ユーザーに提示され続けます（注：ここで変更されるのはメモリ上のDOMオブジェクトのみです）クライアントが受信したページ (ファイルは変更されていません)。このように、非同期メソッドを使用すると、中断状態がなくなり、クライアントはサーバーが結果を返すのを待つ時間も節約できます。
(4) Ajax の実装 (3 の Ajax の実装について説明する必要があります。Ajax が達成できる効果は、WebService を通じて実現できます。)
1. Js での Ajax 非同期呼び出し: a.new b.onreadystatechange (responseText の処理) c.open( get メソッドと post メソッド) d.send (同期呼び出し: a.new b.open (get メソッドと post メソッド) c.send d.responseText)//ajax。 html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax of Javascript & jQuery</title>
</head>
<body>
<a href="javascript:getData();">Javascript-Ajax: Click me</a><br />
<br />
<br />
<input id="btn" type="button" value="jQuery-Ajax: Clike me"/>
<hr />
<p id="show">
</p>
<script type="text/javascript">
function getData() {
//创建XMLHttpRequest通信对象
var xhr;
if (window.ActiveXObject) { //标准情况下, 只能有两个ActiveXObject对象处理通信过程
xhr =new ActiveXObject("Microsoft.XMLHTTP");
}
elseif (window.XMLHttpRequest) {
xhr =new XMLHttpRequest();
}
else {
thrownew Error("Ajax is not supported by this browser");
}
var elem = document.getElementById("show"); //用来显示处理结果
//使用onreadystatechange事件处理结果
xhr.onreadystatechange =function() {
if (xhr.readyState ==4) { // readyState表示服务器响应状态. 4: 响应接收完毕
if (xhr.status ==200) { // status 表示 http 请求的状态
var json = xhr.responseText; //从请求中回应中获得json串
var obj = eval("("+ json +")"); // 借助 eval 将 json 串转化为对象, 在客户端浏览器必须解析为js对象
elem.innerHTML ="<span>"+ obj.name +"</span>";
}
}
}
//通过open设置请求方式
xhr.open("get", "json.ashx", true); //默认为ture, false表示同步方式
//发送请求
xhr.send(null);
/* 同步方式, false表示不适用异步方式
xhr.open("get", "json.ashx", false);
xhr.send(null);
//处理结果
alert(xhr.responseText);
*/
}
</script>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { //ready函数, 脚本加载完即执行, 也可以用$(...$("#btn").click...)();加载
$("#btn").click(function showData() { //按钮上添加onclick事件, 事件处理方法为showData()
$("#show").load("jquery.ashx"); //从jquery.ashx中获取数据元素(innerHTML的内容), 并显示在p中
});
});
</script>
</body>
</html>
次に、関連データ (図面テーブル カレンダー、データベース検証など) を提供するために、json.ashx に似た一般的なハンドラーをプロジェクトに追加する必要もあります
//json.ashx
<%@ WebHandler Language="C#" Class="Json"%>
using System;
using System.Web;
publicclass Json : IHttpHandler {
publicvoid ProcessRequest (HttpContext context) {
context.Response.ContentType ="text/plain";
//对于静态内容, 需要禁用浏览器的缓存, 否则老是旧结果
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
string name ="Mike";
string jsonFormat ="{{ \"name\": \"{0}\" }}"; //{{、}}是为了避免和Json中的{冲突而采用的特殊转义符
string json =string.Format(jsonFormat, name);
context.Response.Output.Write(json);
}
publicbool IsReusable {
get {
returnfalse;
}
}
}
// jquery。 ashx
<%@ WebHandler Language="C#" Class="jquery"%>
using System;
using System.Web;
publicclass jquery : IHttpHandler {
publicvoid ProcessRequest (HttpContext context) {
context.Response.ContentType ="text/plain";
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
DateTime now = DateTime.Now;
string jqueryFormat ="<span>{0}</span>";
string jquery =string.Format(jqueryFormat, now);
context.Response.Write(jquery);
}
publicbool IsReusable {
get {
returnfalse;
}
}
}
2.1 AjaxPro2の使用:
a.AjaxPro2クラスライブラリ(AjaxPro2.dll)を追加b.webconfigに設定ファイルを追加c.App_Codeにクラスライブラリファイル(csファイル)を作成してAjaxサービスを提供し、登録するページに対応するバックグラウンド cs ファイル (Page_Load イベント内) に Ajax d. App_Code 内のクラス ライブラリ ファイル (cs ファイル内) に Ajax タグを使用した処理メソッドを記述します。 foreground 結果 (メモリ内の DOM オブジェクトの変更) がページに表示されます
// b.webconfig に設定ファイルを追加します<location path="ajaxpro"> <system.web> <httpHandlers> <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/> </httpHandlers> <!-- If you need to have Ajax.NET Professional methods running on the login page you may have to enable your own authorization configuration here. --> <!-- <authorization> <deny users="?"/> </authorization> --> </system.web> </location>//c. App_Code でクラス ライブラリ ファイル (cs ファイル) を作成し、Ajax サービスを提供します、ページ上で Ajax サービスを提供します 対応するバックグラウンド cs ファイル (Page_Load イベント内) に Ajax を登録します//default.aspx.cs ファイル
protectedvoid Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(CalendarServices)); //AjaxPro会根据注册的类型自动生成脚本
} //d. クラス ライブラリに Ajax タグを使用した処理メソッドを記述します。 App_Code
//CalendarServices.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
publicclass CalendarServices
{
[AjaxPro.AjaxMethod]
publicbool save(string date, string tile, string detail)
{
System.Threading.Thread.Sleep(5000); //用来测试异步
returntrue; //这里为简单, 直接返回true
}
}//e のファイル (cs ファイル内) を使用して、フォアグラウンドで aspx ファイル内のスクリプトを使用して結果を処理し (メモリ内の DOM オブジェクトを変更)、結果をpage//default.aspx file
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<p>
日期:<input id="date" type="text"/><br />
标题:<input id="title" type="text"/><br />
详情:<textarea id="detail" cols="80" rows="5"></textarea>
<hr />
<input id="btn" type="button" value="确定"/>
</p>
<p>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
var date = $("#date").val();
var title = $("#title").val();
var detail = $("#detail").val();
//由AjaxPro生成的js代理, 很像C#中类库的使用, 其中function(result)是异步的结果处理方法
CalendarServices.save(date, title, detail, function(result) {
if (result.error !=null) { //服务器上出现异常
alert(result.error.Message);
}
if (result.value) { //服务器cs文件中的方法返回永真
alert("服务器返回true! ");
}
});
});
});
</script>
</p>
</form>
</body>
</html>2.2 . 以前に使用されていた Boss Ajax (古いプロジェクトを維持するために使用される可能性があります。実際、2 番目のタイプに非常に似ています): a. Ajax フレームワーク クラス ライブラリを参照します。 c. webconfig の設定 c. App_Code に Ajax サービス クラスを追加し、CS ファイルに追加します (Page_Load イベント内) d. App_Code の CS ファイルに Ajax タグを使用した処理メソッド e. ボタン バインドによる JS のトリガー方法. JS 処理メソッド //a. Ajax フレームワークのクラス ライブラリを参照します //b. Webconfig に設定を追加します
<httpHandlers> <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/> </httpHandlers>//c. Ajax を CS ファイルに登録します
Ajax.Utility.RegisterTypeForAjax(typeof(SysBase_UserEdit)); //SysBase_UserEdit是页面文件名称//d. App_Code内のCSファイル内のAjaxタグによる処理方法
[Ajax.AjaxMethod]
public DataSet getRoleData(int Roleid)
{
DataSet ds =new DataSet();
ds = r.SelectRoleData(string.Format(" and id={0}", Roleid));
return ds;
}//f. VS2008統合Ajax:a. VS2005 の場合、プラグイン (Microsoft ASP.NET 2.0 AJAX Extensions) をインストールする必要があります。 b. ScriptManager コントロールを Form 要素の隣に配置します。 c. 更新する table 要素の先頭でそれを囲みます。 UpdatePanel と ContentTemplate d. table 要素の最後にある ContentTemplate と UpdatePanel の間にトリガー要素を配置し、Ajax トリガー ボタンを登録します。 e .クラス ライブラリ Ajax2 を参照します。 f.VS2005 では webConfig を設定する必要があります//d。 table 要素の最後にある ContentTemplate と UpdatePanel の間に、Ajax トリガー ボタン (btn_Search、btn_Delete はボタン) を登録します
this.DDLRole.Attributes.Add("onpropertychange", "onCommandInputPropertyChange();"); //在Page_Load事件中基于Attribute为按钮绑定方法, 在aspx文件中手动添加也可以//f VS2005 は webConfig
<script>
function onCommandInputPropertyChange(){
if (event.propertyName == "value"){
var cmdInput = event.srcElement;
if (cmdInput.value != 0){
//alert(cmdInput.value);
BindRoleName(cmdInput.value);
}
}
}
//绑定角色名
function BindRoleName(RoleID){
//SysBase_UserEdit是aspx页面的名称
SysBase_UserEdit.getRoleData(RoleID,get_AllName);
}
function get_AllName(response){
var AllName = document.getElementById("DDLAjax");
AllName.length = 0;
if (response.value != null){
var ds = response.value;
if(ds != null && typeof(ds) == "object"){
var name = ds.Tables[0].Rows[0].rolename;
var id = ds.Tables[0].Rows[0].id;
AllName.options.add(new Option(name,id));
}
}
}
</script>========= を設定する必要があります。 ===================== 分割線============ ============== =最初のタイプについて: Js での Ajax 非同期呼び出し、何かを追加します。個別に開始することはありません
パラメータの受け渡しについて:
1.get モードでパラメータを渡します。パラメータは次のとおりです。 URL に保存されます。例: xhr.open("get", "json.ashx?name=xxx", true);
xhr.send(null);
サーバー側 (json.ashx バックグラウンド)コード）を取得するには、HttpContext 型のパラメータ オブジェクト context を使用します。取得方法は context.Request.QueryString["name"]....etc (デバッグ モードで確認してください)
2.
ポストモードでパラメータを渡すと、パラメータはリクエストパッケージの本文に保存されます。例:
xhr.open("post","json.ashx",true);
xhr.send("xxx" );
or
対応するサーバー側 (json.ashx バックグラウンド コード)、「非キーと値のペア」と「キーと値のペア」を取得するには 2 つの方法がありますメソッド:
キーと値以外のペア: context.Request.InputStream を使用して次のように取得します:
<Triggers> <asp:AsyncPostBackTrigger ControlID="AspNetPager1"/> <asp:AsyncPostBackTrigger ControlID="btn_Search"/> <asp:AsyncPostBackTrigger ControlID="btn_Delete"/> </Triggers>これにはエンコード変換が含まれるため、自分で調整する必要があります。 キーと値のペア: を使用します。 context.Request.Form["name"] ... Get この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
Ajax コールバックを使用して新しいフォームを開くときにブラウザーによるインターセプトを回避する方法
以上がajaxを実装する3つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。