jQuery の ajax technology_jquery の詳細な紹介-jsチュートリアル-php.cn

1：Ajax技术包含以下几点：
基于Web标准(XHTML + CSS)的展示
使用DOM进行动态显示和交互
使用XMLHttpRequest进行数据交换和相关操作
使用javascript将所有内容绑定在一起
Ajax的核心是JavaScript的XMLHttpRequest对象，它是一种支持异步请求的技术。简而言之，使用JS可以控制XMLHttpRequest对象向服务器提出请求并处理响应，
而不影响用户对页面的正常访问。对于XMLHttpRequest对象，不同的浏览器提供了不同的支持，IE是将其作为ActiveX控件集成到浏览器中的，而其他主流的浏览器直接
作为一般的JS对象来创建。

2：JS中的Ajax

XMLHttpRequest对象的属性及简要说明

名称	说明
readyState	通信的状态，当XMLHttpRequest对象把一个HTTP请求发送到服务器，到接收到服务器响应信息，整个过程将经历5种状态，该属性取值为为0-4
onreadystatechange	设置回调事件处理程序，当readyState属性的值改变时，会激发此事件
responseText	服务器返回的text/html格式的文档
responseXML	服务器返回的text/xml格式的文档
status	描述了HTTP响应short类型的状态代码，100表示Continue, 101表示Switching protocols数据交换，200表示执行正常，404表示未找到页面，500表示内部程序错误
statusText	HTTP响应的状态代码对应的文本(OK, not found)

readyState属性代码

代码	说明
0	代表未初始化的状态。创建了一个XMLHttpRequest对象，尚未初始化
1	代表连接状态，已经调用了open方法，并且已经准备好发送请求
2	代表发送状态，已经调用了send方法发出请求，尚未得到响应结果
3	代表正在接收状态，已经接收了HTTP响应的头部信息，正在接收响应内容
4	代表已加载状态，此时响应内容已完全被接收

复制代代码如下:

< title>Ajax

< ;/body>

ajax.js の内容：

复制代代码如下:

var xmlRequest;
function CreateRequest()
{
 /* 创建XMLHttpRequest对象 */
 if( window.ActiveXObject)
 {
 return new ActiveXObject("Microsoft.XMLHTTP");
 }
 else if(window.XMLHttpRequest)
 {
 return new XMLHttpRequest();
 }
}
function ResponseHandler()
{
 if(xmlRequest.readyState == 4 && xmlRequest.status == 200)
 {
 /* 如果通信成功，また、正常に、以下の操作を実行します */

 var reqContent = xmlRequest.responseText;
 document.getElementById("browser").innerHTML = reqContent;
 document.getElementById("content")。 value = reqContent;
 }
}
function AjaxAccess()
{
 /* 异步请求百度首页 */

 xmlRequest = CreateRequest();  //XMLHttpRequest对オブジェクト
 xmlRequest.onreadystatechange = ResponseHandler;  //设置回调関数
 xmlRequest.open("GET","http://www.baidu.com");  //初化请要求对象
 xmlRequest.send(null);   //送信请求信息

 /* 触発イベント後の提案正在打开百度首页 */
 var brow = document.getElementById("browser");
 brow.innerHTML = ";正在打开百度搜索";
}
window.onload = function()
{
 document.getElementById("Access").onclick = AjaxAccess;  //設置按扭单击イベント
}

3：jQuery 中の Ajax
$.ajax(options) ) メソッド
オプションは、「鍵/値」対の形式で設定され、要求方式、要求URL、戻り関数などの Ajax 要求のパラメータを設定するために使用されます。
常用プロパティ例:
url:送信要求の地址
type:送信要求方式、GET および POST、默认は GET
timeout: 設定要求時間、このプロパティは数値型、単位は秒です
data: サーバーに送信されるデータ、「键/值」形式、このプロパティはオブジェクトまたは文字列である場合があります。これはオブジェクトであり、自動変換は文字列
dataType: 予定サーバーから返されるデータ型であり、このプロパティは文字列型です。的标签(script标签または者スタイル标签) 会
文本插入DOMの時候行行、 script：返纯文本JS代码、json、jsonp、text
contentType: 送信メッセージ至サービス器時コンテンツコード型、このプロパティは文字列型、許可は "application/x-www-form-urlencoded"、一般に不使用の設定、ため、ほとんどのアプリケーションと一致
beforeSend: 要求送信されたイベント、そのプロパティは、イベント処理プログラムを設定し、前に修正ＸＭＬＨｔｔｐＲｅｑｕｅｓｔのパラメータ（例えば、ブロック情報）を送信するために使用され得る。
代码如下:

function(XMLHttpRequest) {
this; /*このキーワードは、.ajax() メソッドのオプション パラメーター オブジェクトにアクセスするために使用されます*/
 } 
complete:  リクエストが完了した後のイベント、リクエストが成功したかどうかに関係なく、このイベントがトリガーされます。 
function(XMLHttpRequet, textStatus) {
this; /*このキーワードは .ajax() メソッドのオプション パラメーター オブジェクトにアクセスするために使用されます*/
 }
textStatus パラメーターは実行ステータスを返します現在のリクエストの内容 (成功やエラーなど) 
success: リクエストが正常に実行されたときのイベント。 
function(data, textStatus) {
this; /*このキーワードは、.ajax() メソッドのオプション パラメーター オブジェクトにアクセスするために使用されます*/
 } 
error: リクエストの実行が失敗した場合のイベント 
function(XMLHttpRequest, textStatus, errorThrown) {
this; /*このキーワードは、.ajax() メソッドのオプション パラメーター オブジェクトにアクセスするために使用されます*/
 } 
 global: グローバル Ajax イベントをトリガーするかどうか。この属性はブール型で、デフォルト値は false

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

$(document).ready(function(){
 $("#Access").click (function(){
 var xmlReq = $.ajax({
 type:'GET',
 url:'http://www.sougou.com',
 success:function(reqContent )
 $("#browser").html(reqContent);
 $("#content").text(reqContent);
 }});
 $("#browser") .html("< ;h1>総合検索を開く");
 });
});

4: ロードメソッド
load(url, [data], [callback]);

コードをコピーコードは次のとおりです次のように:

Load

< style type="text/ css">
body {padding:20px; }
#commentList{ border:solid 2px #888; overflow:auto; -bottom:solid 1px; margin-bottom:30px; font-size:13px; }
#commentList div{ }
#commentList h3{ color:# 888; パディング:10px 0 0 0; }

返信リスト

🎜>

< /html>

Load.js

コードをコピーコードは次のとおりです: $(document).ready(function(){

$("#refresh").click(function(){

 /*アクセスするページの URL を実際の状況に応じて変更します*/
 var url = "http://www.sogou.com";
 $("#commentList") .load(url); // 対応するコンテンツをロードします
 } ) 
});

5: $.get() メソッド
は GET メソッドを使用するグローバルメソッドです。非同期リクエストを行う場合の構文形式は次のとおりです。

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

 var xmlReq = $.get(url, [データ], [コールバック], [タイプ]);
 $.get("www.baidu.com", 
 {
 user: 'zhangsan'
 }
 );
 callback: function(data, textStatus) {}

复制代コード代码如下:

Get

分类：

Get.js

复制代幣代码如下:

$(document).ready(function(){
 $("#Search").click(function(){

 /* UseGet方式请求指定URL */
 $.get("http://localhost:2154/Web/BlogList.aspx",
 {
 key : $("#blogClass").val()
 },
 function(data){
 $("#blogList").html(data);
 });
 });

 $("# Search").click(); //触発一次单击イベント
});

BlogList.aspx

复制代码代码如下:

<%@ Page Language="C#" %>
<%
 /* 
 * 配列にデータをそれぞれ追加します。 
 * これらのデータは通常、 from Database, 
 * これは単なるシミュレーションであり、静的に追加されました 
 */
 string[] blogClass = { "CSS", "CSS", ".NET", ".NET", ".NET " , ".NET" };
 string[] blogTitle = { "CSS のパディング"、"CSS の概要"、"C# のクラス"、
 "C# の基礎知識"、"C# オブジェクト指向", "C# デザイン パターン" };

 string key = Request["key"]; //リクエスト サーバーのキーワードを取得します
 /*
 * 配列コレクションを走査します
 */
 for (int i = 0; i < blogClass.Length; i )
 {
 /*
 * キーワードが空の場合は、すべてのレコードを表示します 
 * キーワードが空の場合は、このカテゴリに等しい
＆lt;＆lt; ;/span & lt;%= blogtitle [i]%& gt; 
/div & gt; > var xmlReq = $.post; 、[データ]、[コールバック]、[タイプ]) ;
$.get() メソッドは GET モードでデータを送信し、Web リクエストには通常、URL の長さに一定の制限があるため、$.get() によって渡されるデータの長さは決まります。 
$.post() メソッドは、データの長さに影響を受けずにパラメーターをサーバーに送信します。 




コードをコピー


 コードは次のとおりです:

<表id="peoples" cellpacing="1">
<頭>
名前年齢性別< /td>

getJSON.js
コードをコピーコードは次のとおりです

$(document).ready(function(){
/* 非同期リクエスト、JSON データをロード*/ /PeopleList.aspx",
function(data){
/* リクエスト結果をトラバースします*/
$.each(data,
function(index, p){
var html = " " p.name "< ;/td>" ページ
"" (p.is Male ? "男性" : " 女性") " "
$("#peoples>tbody").append(html);
});
});
}) ;

PeopleList .aspx

コードをコピーコードは次のとおりです:
<%@ページ言語 = "C#" %>
[{
"名前" : "デビッドリー",
"年齢" : 61,
" is Male" : true
},{
"名前" : "マイケルクリントン",
"年齢" : 53,
"男性" : true
},{
"名前 " : "ブルックアン",
"年齢" : 23,
"is男性" : false
},{
"名前" : "メアリージョンソン",
"年齢" : 35 ,
"is男性" : false
},{
"名前" : "エリザベスジョーンズ",
"年齢" : 33,
"is Male" : false
},{
"名前" : "ジェームズスミス" 、
"年齢" : 25、
"is Male" : true
}]

8：$.getScript() メソッド
var xmlReq = $.getScript(url, [callback]);
复制代码代码如下:

getScript

getScript() メソッドを使用するメソッド异步追加JavaScript 文件

< input type="button" value="Button" id="input" />

getScript.js
复制代码代码如下:

$(document).ready(function( ){
$("#input").click(function(){
$.getScript("Test.js", function(data){
showMsg();
});
});
});

Test.js
复制代码代次如下:

function showMsg(){
alert("This is Message");
}

9：配列化表单データベース
jQuery は决パラメータ很多の问题を提供し、配列化の方法简化对を提供します
代打代打次のように:

serialize

< tr>

年齢:
性別:

メールアドレス:
詳細: <テキストエリア名="詳細">
<ボタン名="btnSubmit">送信< ;/button>

< ;/html>

serialize.js
复制代码代码如下:

$(document).ready(function(){
$("button[name='btnSubmit']").click(function(){
$.post("http: //localhost:2154/Web/Register.aspx",
$("form").serialize(), //フォームデータをシリアル化します
function(data){
$("table tbody" ) .append("" データ "");
});
});
}); 🎜>

Register.aspx
コードをコピーコードは次のとおりです:

<%@ Page Language="C#" %>
ユーザー名:<%= Request["username"] %>

年齢:<%= Request["age"] %>

男性:

メール:<%= リクエスト["メール"]%>

詳細:

10:serializeArray() メソッド
このメソッドは、ページフォームを「キー」のコレクションの形式である JSON 構造化オブジェクトにシリアル化します。 /value" ペアフォーム内のすべての要素値をカプセル化します。このメソッドは JSON 文字列ではなく JSON オブジェクトを返すことに注意してください
JSON オブジェクトの構造は次のとおりです:

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

" , "value2"},
);
var textName = jsonData[ 0].名前;
var textValue = jsonData[0].value;

11: グローバル Ajax デフォルトオプションを設定します

アプリケーションでは、多数のAjax メソッドはさまざまな関数を実装するために作成されることがよくありますが、そのたびに $.ajax() メソッドに多数のパラメータが設定されるのですが、これは非常に不便です。jQuery では、 を設定できます。グローバルな Ajax デフォルトパラメータ項目。 $.ajaxSetup([options]);

コードをコピー
コードは次のとおりです: $.ajaxSetup({ url: 'Test.html', type: 'POST',
global: false, //グローバルイベントのトリガーを無効にする
dataType: 'json' 、
エラー: function(xhr, textStatus, errorThrown) {
🎜>

ajaxComplete(callback) //このイベントはリクエストが完了するとトリガーされます
ajaxError(callback); ; //このイベントはリクエストでエラーが発生したときにトリガーされます
ajaxSend(callback); //このイベントはリクエストが送信される前にトリガーされます
ajaxStart(callback); //このイベントはリクエストが送信されたときにトリガーされますstarting
ajaxStop(callback); //このイベントはリクエストが終了するとトリガーされます
ajaxSuccess(callback) //リクエストが成功したときにトリガーされます
ajaxStart() メソッドと ajaxStop メソッドのイベントハンドラーはパラメータのない関数で、残りは 3 つのパラメータを持つことができます。構文形式は次のとおりです。

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

関数 (イベント、XHR、SETTINGS) {
EVENT はトリガーされたイベントオブジェクトです
XHR は XMLHTTPRequest オブジェクト
設定は Ajax リクエスト構成パラメーターです

AjaxGlobalEvent

<ボタン名= "btnLoad">Load

AjaxGlobalEvent.js
复制代代码如下:

$(document).ready(function(){
$("# show").ajaxStart(function(){
$(this).append("
ajaxStart を実行
");
});
$("#show") .ajaxStop(function(){
$(this).append("
ajaxStop を実行
");
});

$("#show") .ajaxComplete(function(){
$(this).append("
ajaxComplete を実行
");
});

$("#show") .ajaxError(function(){
$(this).append("
ajaxError を実行
");
});

$("#show") .ajaxSend(function(){
$(this).append("
ajaxSend を実行
");
});

$("#show") .ajaxSuccess(function(){
$(this).append("
ajaxSuccess を実行
");
});
$("button[name='btnLoad' ]").click(function(){
$.get("http://www.sohu.com");
});
});

年齢:
性別:
メールアドレス:
詳細:	<テキストエリア名="詳細">
	<ボタン名="btnSubmit">送信< ;/button>