ホームページ > 記事 > ウェブフロントエンド > アヤックスの使い方は？ Ajax ユースケース分析

アヤックスの使い方は？ Ajax ユースケース分析

寻∝梦オリジナル: 2018-09-10 13:52:51986ブラウズ

この記事では、ajaxの使い方の詳細と、ajaxのユースケース分析を主に紹介します。それではこの記事を見てみましょう

$.ajax()メソッドの使用例

このケースではjquery-2.0.0.jsを使用する必要があります

1、ajax.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.0.0.js"></script>
<script type="text/javascript">
	$(function() {
		$("#submit").click(function() {
			$.ajax({
				url : "ajax.do",//请求的url
				type : "post",//请求方式
				data : {//传递的数据
					name : $("#name").val()
				},
				dataType : "text",//后台数据返回类型
				success : function(data) {//响应成功执行的方法
					alert(data);
				},
				error : function() {//出现异常执行方法
					alert("出现异常啦...");
				}

			});
		});
	});
</script>
</head>
<body>
	<form action="">
		用户名:<input type="text" name="name" id="name" /><br /> 
		<input type="button" id="submit" value="提交" />
	</form>
</body>
</html>

2、UserServlet.java

@WebServlet("/ajax.do")
public class AjaxServlet extends HttpServlet {	
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 请求中文乱码处理
		request.setCharacterEncoding("UTF-8");
		// 响应中文乱码处理
		response.setHeader("Content-Type", "text/html;charset=utf-8");
		// 接收数据
		String name = request.getParameter("name");
		System.out.println(name);
		// 测试出现异常，ajax会执行error
		// throw new IOException();
		PrintWriter out = response.getWriter();
		// 响应的信息
		out.write("成功啦...");
		out.flush();
		out.close();
	}
}

$.ajax()メソッドは次のように詳しく紹介されています(w3schoolより)

jQuery ajax - × () メソッド

例

AJAX を介してテキストをロードする:

jQuery コード:

$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myp").html(htmlobj.responseText);
  });
});

HTML コード:

<p id="myp"><h2>Let AJAX change this text</h2></p>
<button id="b01" type="button">Change Content</button>

定義と使用法

ajax() メソッドは、次の方法でロードされます。 HTTP はリモートデータをリクエストします。

このメソッドは、jQuery の基礎となる AJAX 実装です。シンプルで使いやすい高レベルの実装については、$.get、$.post などを参照してください。 $.ajax() は、作成した XMLHttpRequest オブジェクトを返します。ほとんどの場合、柔軟性を高めるためにあまり使用されないオプションを操作する必要がない限り、この関数を直接操作する必要はありません。

最も単純なケースでは、$.ajax() をパラメーターなしで直接使用できます。

注: すべてのオプションは、$.ajaxSetup() 関数を通じてグローバルに設定できます。

構文

jQuery.ajax([settings])

パラメータ	説明
設定	オプション。 Ajax リクエストの構成に使用されるキーと値のペアのコレクション。 $.ajaxSetup() を通じて任意のオプションのデフォルト値を設定できます。

参数

options
类型：Object

可选。AJAX 请求设置。所有选项都是可选的。
async
类型：Boolean

默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR)
类型：Function

发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。

XMLHttpRequest 对象是唯一的参数。

这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
cache
类型：Boolean

默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

jQuery 1.2 新功能。
complete(XHR, TS)
类型：Function

请求完成后回调函数 (请求成功或失败之后均调用)。

参数： XMLHttpRequest 对象和一个描述请求类型的字符串。

这是一个 Ajax 事件。
contentType
类型：String

默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。
context
类型：Object

这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。

就像这样：
```
$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});
```
data
类型：String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataFilter
类型：Function

给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
dataType
类型：String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串

error
类型：Function

默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。

如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。

这是一个 Ajax 事件。
global
类型：Boolean

是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
ifModified
类型：Boolean

サーバーデータが変更された場合にのみ新しいデータを取得します。デフォルト値: false。 HTTP パケットの Last-Modified ヘッダー情報を使用して決定します。 jQuery 1.4 では、サーバー指定の「etag」もチェックして、データが変更されていないことを確認します。
jsonp
Type: String

jsonp リクエスト内のコールバック関数の名前をオーバーライドします。この値は、{jsonp:'onJsonPLoad'} などの GET または POST リクエストの URL パラメーターの「コールバック」部分を置き換えるために使用され、「onJsonPLoad=?」がサーバーに渡されます。
jsonpCallback
Type: String

jsonpリクエストのコールバック関数名を指定します。この値は、jQuery によって自動的に生成されるランダムな関数名の代わりに使用されます。これは主に、jQuery が一意の関数名を生成できるようにして、リクエストの管理やコールバック関数とエラー処理の提供を容易にするために使用されます。ブラウザで GET リクエストをキャッシュする場合は、このコールバック関数名を指定することもできます。
password
タイプ: String

HTTPアクセス認証リクエストに応答するために使用されるパスワード
processData
タイプ: Boolean

デフォルト値: true。デフォルトでは、data オプションを通じて渡されたデータは、それがオブジェクトである場合 (技術的に言えば、文字列でない限り)、デフォルトのコンテンツタイプ「application/x」に一致するように処理され、クエリ文字列に変換されます。 -www-form-urlencoded" "。 DOM ツリー情報または変換したくないその他の情報を送信する場合は、false に設定します。
scriptCharset
Type: String

リクエスト時の dataType が「jsonp」または「script」で、タイプが「GET」の場合にのみ、文字セットの変更を強制するために使用されます。通常、ローカルとリモートのコンテンツのエンコーディングが異なる場合にのみ使用されます。
success
Type: Function

リクエストが成功した後のコールバック関数。

パラメータ: サーバーから返され、dataType パラメータに従って処理されたデータ。ステータスを説明する文字列。

これは Ajax イベントです。
traditional
型: Boolean

従来の方法でデータをシリアル化する場合は true に設定します。「ツール」カテゴリの「jQuery.param」メソッドを参照してください。
timeout
Type: Number

リクエストのタイムアウト(ミリ秒)を設定します。この設定はグローバル設定をオーバーライドします。
type
Type: String

デフォルト: "GET")。リクエストメソッド (「POST」または「GET」)、デフォルトは「GET」です。注: PUT や DELETE などの他の HTTP リクエストメソッドも使用できますが、一部のブラウザでのみサポートされます。
url
タイプ: String

デフォルト値: 現在のページのアドレス。リクエストの送信先のアドレス。
username
Type: String

HTTP アクセス認証リクエストに応答するために使用されるユーザー名。
xhr
Type: Function

XMLHttpRequest オブジェクトを返すために必要です。デフォルトは、IE の場合は ActiveXObject、それ以外の場合は XMLHttpRequest です。拡張された XMLHttpRequest オブジェクトをオーバーライドまたは提供するために使用されます。このパラメーターは、jQuery 1.3 より前では使用できませんでした。

コールバック関数

$.ajax() で取得したデータを処理したい場合は、コールバック関数 (beforeSend、error、dataFilter、success、complete) を使用する必要があります。

beforeSend

はリクエストを送信する前に呼び出され、XMLHttpRequest をパラメータとして渡します。

error

は、リクエストエラーが発生したときに呼び出されます。 XMLHttpRequest オブジェクト、エラーの種類を説明する文字列、および例外オブジェクト (存在する場合) を渡すと、リクエストが成功した後に

dataFilter

が呼び出されます。返されたデータと「dataType」パラメーターの値を渡します。そして、成功コールバック関数に渡された新しいデータ (おそらく処理された) を返さなければなりません。

成功

リクエスト後に呼び出されました。返されたデータと成功コードを含む文字列を渡します。

complete

この関数は、成功または失敗に関係なく、リクエストが完了すると呼び出されます。 XMLHttpRequest オブジェクトと、成功コードまたはエラーコードを含む文字列を渡します。

データ型

$.ajax() 関数は、サーバーから提供された情報に依存して、返されたデータを処理します。返されたデータが XML であるとサーバーが報告した場合、返された結果は、通常の XML メソッドまたは jQuery セレクターを使用して反復できます。 HTML などの他のタイプが表示された場合、データはテキストとして扱われます。

dataType オプションを使用して、他の異なるデータ処理方法を指定することもできます。単純な XML に加えて、html、json、jsonp、スクリプト、またはテキストも指定できます。

このうち、テキスト型とxml型で返されるデータは処理されません。データは、XMLHttpRequest の responseText 属性または responseHTML 属性を成功コールバック関数に渡すだけです。

注: Web サーバーによって報告された MIME タイプが、選択した dataType と一致することを確認する必要があります。たとえば、XML の場合、サーバーは一貫した結果を得るために text/xml または application/xml を宣言する必要があります。

html タイプとして指定した場合、HTML が文字列として返される前に、埋め込まれた JavaScript が実行されます。同様に、スクリプトの種類を指定した場合は、サーバー側で生成された JavaScript が最初に実行され、その後スクリプトがテキストデータとして返されます。

json型で指定した場合、取得したデータをJavaScriptオブジェクトとして解析し、構築したオブジェクトを結果として返します。これを実現するために、最初に JSON.parse() の使用を試みます。ブラウザがサポートしていない場合は、関数を使用してビルドされます。

JSON データは、JavaScript を通じて簡単に解析できる構造化データの一種です。取得したデータファイルがリモートサーバーに保存されている場合 (ドメイン名が異なる場合、つまりクロスドメインデータ取得)、jsonp タイプを使用する必要があります。このタイプを使用すると、リクエストされた URL に追加されるクエリ文字列パラメータ callback=? が作成されます。有効な JSONP リクエストを完了するには、サーバーは JSON データの前にコールバック関数名を追加する必要があります。デフォルトのコールバックの代わりにコールバック関数のパラメータ名を指定したい場合は、$.ajax() の jsonp パラメータを設定できます。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAJAX 開発マニュアルのコラムにアクセスして学習してください)

注: JSONP は JSON 形式の拡張です。クエリ文字列パラメーターを検出して処理するには、サーバー側のコードが必要です。

script または jsonp タイプが指定されている場合、サーバーからデータを受信すると、実際には XMLHttpRequest オブジェクトの代わりに