Ajax() と対話する手順と背景の詳細​​な説明

今回は、Ajax() とバックエンドの間のやり取りの手順について詳しく説明します。 Ajax() とバックエンドの間のやり取りの 注意事項 とは何ですか。実際のケースを見てみましょう。 。

Ajax は「Asynchronous

JavaScript and XML」(非同期 JavaScript と XML) の略で、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。 Ajax テクノロジーは、現在 JavaScript スクリプトを通じてブラウザーで利用できるすべてのテクノロジーを集めたものです。 Ajax はこれらすべてのテクノロジーを新しい方法で使用し、Web 開発の古い B/S スタイルを復活させます。

ajax() メソッドは jQuery の基礎となる ajax 実装であり、HTTP リクエストを通じてリモート データを読み込みます。

$.ajax({
type: "GET",
url: "handleAjaxRequest.action",
data: {paramKey:paramValue},
async: true,
dataType:"json",
success: function(returnedData) {
alert(returnedData);
//请求成功后的回调函数
//returnedData--由服务器返回，并根据 dataType 参数进行处理后的数据；
//根据返回的数据进行业务处理
},
error: function(e) {
alert(e);
//请求失败时调用此函数
}
});
}

パラメータの説明:

タイプ:リクエストメソッド、「POST」または「GET」、デフォルトは「GET」です。

url: リクエストを送信するアドレス。

データ：サーバーに転送するデータは、key:value(id:1)の形式で記述されます。 GET リクエストは URL に追加されます。

async: デフォルトは true で、false に設定すると同期リクエストになります。

dataType: サーバーによって返されることが期待される

データタイプ。未指定のままにすることができます。 XML、HTML、テキストなどがあります。

開発中に上記のパラメーターを使用すると、基本的なニーズをすでに満たすことができます。

中国語のパラメータをサーバーに渡す必要がある場合は、URLの後にパラメータを記述し、encodeURIでエンコードできます。

var chinese = "中文";
var urlTemp = "handleAjaxRequest.action?chinese="+chinese;
var url = encodeURI(urlTemp);//进行编码
$.ajax({
type: "GET",
url: url,//直接写编码后的url
success: function(returnedData) {
alert(returnedData);
//请求成功后的回调函数
//returnedData--由服务器返回，并根据 dataType 参数进行处理后的数据；
//根据返回的数据进行业务处理
},
error: function(e) {
alert(e);
//请求失败时调用此函数
}
});
}

Struts2アクションはリクエストを処理します:

public void handleAjaxRequest() {
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
//设置返回数据为html文本格式
response.setContentType("text/html;charset=utf-");
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
PrintWriter out =null;
try {
String chinese = request.getParameter("chinese");
//参数值是中文，需要进行转换
chinese = new String(chinese.getBytes("ISO--"),"utf-");
System.out.println("chinese is : "+chinese);
//业务处理
String resultData = "hello world";
out = response.getWriter();
out.write(resultData);
//如果返回json数据，response.setContentType("application/json;charset=utf-");
//Gson gson = new Gson();
//String result = gson.toJson(resultData);//用Gson将数据转换为json格式
//out.write(result);
out.flush();
}catch(Exception e) {
e.printStackTrace();
}finally {
if(out != null) {
out.close();
}
}
}

struts.xml

設定ファイル: 戻り値の型を記述する必要はありません

<action name="handleAjaxRequest" class="com.test.TestAction"
method="handleAjaxRequest">
</action>

AJAXのフロントエンドとバックエンドの対話メソッドを共有します

注: ajaxはasyncパラメータによって決定されます 非同期または、同期、偽同期、真の非同期。

非同期実行シーケンスは、最初に後続のアクションを実行し、次に成功時にコードを実行します。

同期は、最初に成功時にコードを実行し、その後に後続のアクションを実行します。コード;

検証: 同期中のデータ量はフリーズしますか?たとえば、大量のデータをバックグラウンドから検索するときに、ページがスタックすることはありますか?

1. (非同期) メソッド呼び出し、後続のコードは実行結果を待つ必要がありません

Backend:

using System.Web.Script.Services; 
public static string GetStr(string str1, string str2) 
{ 
return str1 + str2; 
}

Frontend:

function Test(strMsg1,strMsg2) 
{
$.ajax({
type: "Post",
url: "Demo.aspx/GetStr",
async: true,
//方法传参的写法一定要对，与后台一致，区分大小写，不能为数组等，str1为形参的名字,str2为第二个形参的名字 
data: "{'str1':'"+strMsg1+"','str2':'"+strMsg2+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容 
alert(data.d);
},
error: function(err) {
alert(err);
}
});
　　//隐藏加载动画
$("#pageloading").hide();
}

2. (同期) メソッド呼び出しを使用できます。必要に応じて戻り値を取得することは、後続のコードを実行するための前提条件です

Backend:

using System.Web.Script.Services; 
public static string GetStr(string str1, string str2) 
{ 
return str1 + str2; 
}

Frontend:

function Test(strMsg1,strMsg2) 
{
　var str = “”;
$.ajax({
type: "Post",
url: "Demo.aspx/GetStr",
async: false,
//方法传参的写法一定要对，与后台一致，区分大小写，不能为数组等，str1为形参的名字,str2为第二个形参的名字 
data: "{'str1':'"+strMsg1+"','str2':'"+strMsg2+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容 
str = data.d;
},
error: function(err) {
alert(err);
}
});
　return str;

この記事の事例を読んだ後は、このメソッドを習得したと思います。さらに興味深い情報については、こちらをご覧ください。 、PHP 中国語 Web サイトの記事の他の関連トピックにも注目してください。

推奨書籍:

Django で Ajax を使用する方法

Ajax のページ非更新実装の詳細な説明 (コード付き)

以上がAjax() と対話する手順と背景の詳細​​な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。