ホームページ  >  記事  >  ウェブフロントエンド  >  ajax関数とは何ですか

ajax関数とは何ですか

藏色散人
藏色散人オリジナル
2021-12-17 11:24:352525ブラウズ

ajax 関数は、バックグラウンド HTTP リクエストを通じてリモート データをロードするために使用される jQuery.ajax() 関数を指します。これは、jQuery によってカプセル化された AJAX テクノロジ実装です。この関数を通じて、リモート データを取得できます。現在のページのサーバー上のデータを更新せずに。

ajax関数とは何ですか

この記事の動作環境: Windows 7 システム、jquery バージョン 3.2.1、Dell G3 コンピューター。

ajax 関数とは何ですか?

jQuery.ajax() 関数の詳細説明

jQuery.ajax() 関数は、バックグラウンドで ロードするために使用されます。 HTTP リクエスト リモート データ

jQuery.ajax() この関数は、jQuery によってカプセル化された AJAX テクノロジの実装であり、この関数を通じて、現在のページを更新せずにリモート サーバー上のデータを取得できます。

jQuery.ajax() この関数は、jQuery の基礎となる AJAX 実装です。 jQuery.get()、jQuery.post()、load()、jQuery.getJSON()、jQuery.getScript() およびその他の関数はすべてこの関数の簡略化された形式です (これらはすべてこの関数を呼び出しますが、パラメーター設定が異なります)または多少の違いがあります)。省略)。

この関数は、グローバル jQuery オブジェクトに属します (静的関数としても理解できます)。

パラメータ

前の構文セクションで定義した パラメータ名に従って、対応するパラメータを見つけてください。

#パラメータ説明urlsettings

Parameterssettings はオブジェクトです。jQuery.ajax() はオブジェクトの次のプロパティを識別できます (これらはすべて オプション):

accepts --- ObjectType

デフォルト値: に依存します。 dataType 属性。

送信されるコンテンツ タイプのリクエスト ヘッダーは、ブラウザがサーバーからどのような種類の応答を受信できるかをサーバーに伝えるために使用されます。

async --- ブール型

デフォルト値: true

それが非同期リクエストであるかどうかを示します。同期リクエストは、リモート データが取得されるまでブラウザをロックし、他の操作を実行できなくなります。

#beforeSend---関数タイプ

送信前に実行する必要があるものを指定します。リクエストが送信されるコールバック。この関数には 2 つのパラメータもあります。1 つは

jqXHR オブジェクト、もう 1 つは現在の settings オブジェクトです。これは Ajax イベントです。関数が false を返した場合、この Ajax リクエストはキャンセルされます。

#キャッシュ---ブール型デフォルト値:

true

(dataType が「script」または「jsonp」の場合、デフォルトは false)。 URL リクエストをキャッシュするかどうかを示します。

false

に設定すると、ブラウザ は現在の URL リクエストを キャッシュしなくなります。このパラメータは、HEAD リクエストと GET リクエストに対してのみ有効です (POST リクエスト自体はキャッシュされません)。

complete---関数/配列タイプ指定されたリクエスト

Complete

(成功または失敗に関係なく)後に実行する必要があるコールバック関数。この関数には 2 つのパラメータもあります。1 つは jqXHR オブジェクトで、もう 1 つはリクエストのステータス ('success'、'notmodified'、'error'、'timeout'、'abort'、または'パーサーエラー')。これは Ajax イベントです。 jQuery 1.5 以降、属性値は

array

の形式で複数の関数にすることができ、各関数はコールバックによって実行されます。

#コンテンツ

---オブジェクト タイプ1.5 New##指定されたコンテンツ タイプに応じて jQuery が応答を解析する方法を決定する、「{string:正規表現}」とペアになったオブジェクト。

#contentType

---

String Typeデフォルト値: 'application/x- www-form-urlencoded; charset=UTF-8'。 指定されたコンテンツ エンコード タイプを使用してデータをサーバーに送信します。 W3C の XMLHttpRequest 仕様では、文字セットは常に UTF-8 であると規定されており、別の文字セットに変更する場合、ブラウザに文字エンコードの変更を強制することはできません。

コンテキスト

---

オブジェクト タイプ Ajax 関連のコールバック関数の設定に使用されます。 コンテキストオブジェクト (つまり、関数内の this ポインター)。

コンバータ ---

オブジェクト タイプ1.5 新しいデフォルト値: {'* text': window.String, 'text html': true, 'text json': jQuery.parseJSON, 'text xml': jQuery.parseXML} # 。

データ型コンバーター。各コンバータの値は、応答の変換された値を返す 関数です。 <span id="9_nwp"></span>

#クロスドメイン

---

ブール型

1.5 新しい デフォルト値: 同一ドメインリクエストは false、クロスドメインリクエストは true です。

それがクロスドメインリクエストであるかどうかを示します。 (JSONP 形式のように) 同じド​​メイン内でクロスドメイン要求を強制する場合は、true に設定します。これにより、たとえば、別のドメインへの

サーバー側のリダイレクトが可能になります。

data---サーバーに送信される任意のタイプのデータ

は自動的に転送されます。文字列型の。 GET リクエストの場合は、URL に追加されます。

dataFilter---関数タイプ

生データを処理するためのコールバックを指定しますレスポンス関数の。この関数には 2 つのパラメータもあります。1 つは応答の元のデータを表す文字列で、もう 1 つは <span id="8_nwp">dataType</span> 属性文字列です。

#dataType---String 型

デフォルト値: jQuery スマート推測、推測スコープ (

#xml、json、script または html)

返されるデータ型を指定します。属性値は次のとおりです。

    '
  • xml': jQuery を使用して処理できる XML ドキュメントを返します。
  • '
  • html': HTML 文字列を返します。
  • '
  • script': JavaScript コードを返します。結果は自動的にキャッシュされません。 cache パラメータが設定されていない限り。注: リモート要求 (同じドメインの下ではない) を行う場合、すべての POST 要求は GET 要求に変換されます。 (読み込みにDOMスクリプトタグを使用するため)
  • '
  • json': JSONデータを返します。 JSON データは strict 構文 (プロパティ名は二重引用符で囲む必要があり、すべての文字列は二重引用符で囲む必要があります) を使用して解析され、解析が失敗するとエラーがスローされます。 jQuery 1.9 以降、空のコンテンツを含む応答は null または {} を返します。
  • '
  • jsonp': JSONP 形式。 「url?callback=?」などの JSONP 形式を使用して関数を呼び出すと、jQuery は 2 番目の ? を正しい 関数名に自動的に置き換えて、コールバック関数を実行します。
  • '
  • text': プレーン テキスト文字列を返します。

#エラー---関数/配列型リクエスト

が失敗した場合に実行されるコールバック関数を指定します。この関数には 3 つのパラメータがあります: jqXHR オブジェクト、リクエスト ステータス文字列 (null、'timeout'、'error'、'abort'、および 'parsererror')、エラー メッセージ文字列 ('Not Found' などの応答ステータスのテキスト説明部分) ' または '内部サーバー エラー')。これは

Ajax イベントです。クロスドメイン スクリプトおよびクロスドメイン JSONP リクエスト は、この関数を呼び出しません。 jQuery 1.5 以降、属性値は 配列 の形式で複数の

関数にすることができ、各関数はコールバックによって実行されます。

#グローバル---

ブール型デフォルト値: ## #真実###。 グローバル Ajax イベントをトリガーするかどうかを示します。この値を false

に設定すると、ajaxStart() や ajaxStop() などのグローバル イベント ハンドラーがトリガーされなくなります。さまざまな Ajax イベントを制御するために使用できます。

#ヘッダー

---

オブジェクト タイプ

1.5 新規

デフォルト値:{}追加のリクエスト ヘッダー情報をオブジェクト形式で指定します。リクエスト ヘッダー XX-Requested-With: XMLHttpRequest は常に追加されますが、ここでデフォルトの XMLHttpRequest 値を変更することもできます。

headers

の値は、beforeSend コールバック関数で設定された要求ヘッダーをオーバーライドできます (つまり、beforeSend が最初に呼び出されます)。

$.ajax({
    url: "my.php" ,
    headers: {        "Referer": "http://www.365mini.com" // 有些浏览器不允许修改该请求头
        ,"User-Agent": "newLine" // 有些浏览器不允许修改该请求头
        ,"X-Power": "newLine"
        ,"Accept-Language": "en-US"
    }
});

ifModified---ブール型

デフォルト値: false サーバー データが変更された場合にのみ、現在のリクエストで新しいデータを取得できるようにします (変更されていない場合、ブラウザーはキャッシュからデータを取得します)。 HTTP ヘッダー情報 Last-Modified を使用して決定します。 jQuery 1.4 以降では、サーバー指定の「etag」もチェックして、データが変更されているかどうかを判断します。

isLocal

---

ブール型

1.5.1 新規追加

デフォルト: 現在のロケーション プロトコルによって異なります。

允许将当前环境视作"本地",(例如文件系统),即使默认情况下jQuery不会如此识别它。目前,以下协议将被视作本地:file*-extensionwidget

jsonp---String类型

重写JSONP请求的回调函数名称。该值用于替代"url?callback=?"中的"callback"部分。

jsonpCallback---String/Function类型

为JSONP请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。

从jQuery 1.5开始,你也可以指定一个函数来返回所需的函数名称。

mimeType---String类型1.5.1 新增

一个mime类型用来覆盖XHR的mime类型。

password---String类型

用于响应HTTP访问认证请求的密码。

processData---Boolean类型

默认值:true

默认情况下,通过<span id="4_nwp">data</span>属性传递进来的数据,如果是一个对象(技术上讲,只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM树信息或其它不希望转换的信息,请设置为false

scriptCharset---String类型

设置该请求加载的脚本文件的字符集。只有当请求时dataType为"jsonp"或"script",并且type是"GET"才会用于强制修改charset。这相当于设置3f1c4e4b6b16bbbd69b2ee476dc4f83a标签的charset属性。通常只在当前页面和远程数据的内容编码不同时使用。

statusCode---Object类型1.5 新增

默认值: {}

一组数值的HTTP代码和函数构成的对象,当响应时调用了相应的代码。例如:

$.ajax({
    url: a_not_found_url ,    
    // 当响应对应的状态码时,执行对应的回调函数    
    statusCode: {        404: function() {
            alert( "找不到页面" );
        },        200: function(){
            alert("请求成功");
        }
    }
});

success---Function/Array类型

指定请求成功后执行的回调函数。该函数有3个参数:请求返回的数据、响应状态字符串、jqXHR对象。

从jQuery 1.5开始,该属性值可以是数组形式的多个函数,每个函数都将被回调执行。

timeout---Number类型

设置请求超时的毫秒值。

traditional---Boolean类型

如果你希望使用传统方式来序列化参数,将该属性设为true

type---String类型

默认值:"GET"。

请求类型,可以为'POST'或'GET'。注意:你也可以在此处使用诸如'PUT'、'DELETE'等其他请求类型,但它们不被所有浏览器支持。

url --- String类型

默认值:当前页面URL。

请求的目标URL。

username --- String类型

用于响应HTTP访问认证请求的用户名。

xhr --- Function类型

默认值:在IE下是ActiveXObject(如果可用),在其他浏览器中是XMLHttpRequest

一个用于创建并返回XMLHttpRequest对象的回调函数。你可以重写该属性以提供自己的XHR实现,或增强其功能。

xhrFieldsObject类型1.5.1 新增

一个具有多个"字段名称-字段值"对的对象,用于对本地XHR对象进行设置。一对「文件名-文件值」在本机设置XHR对象。例如,如果需要,你可以用它来为跨域请求设置XHR对象的withCredentials属性为true

$.ajax({
   url: a_cross_domain_url,   // 将XHR对象的withCredentials设为true   xhrFields: {
      withCredentials: true
   }
});

注意:
1、如果你的所有AJAX请求都需要设置settings中某些参数,你可以使用jQuery.ajaxSetup()函数进行全局设置,而无需在每次执行jQuery.ajax()时分别设置。
2、在jQuery 1.4(含)之前,选项参数completesucceserrorAjax事件的回调函数的第3个参数不是经过jQuery封装的jqXHR对象,而是原生的XMLHttpRequest对象。

返回值

jQuery.<span id="19_nwp">ajax()</span>函数的返回值为jqXHR类型,返回当前该请求的jqHXR对象(jQuery 1.4及以前版本返回的是原生的XMLHttpRequest对象)。

示例&说明

如果没有给jQuery.ajax()指定任何参数,则默认请求当前页面,并且不对返回数据进行处理。

jQuery.ajax()函数的settings对象中,常用的属性有:url、type、async、data、dataType、success、error、complete、beforeSend、timeout等。

请参考下面这段初始HTML代码:

<div id="content"></div>

以下是与jQuery.ajax()函数相关的jQuery示例代码,以演示jQuery.ajax()函数的具体用法:

(演示页面只有第一个ajax()函数,其他代码请自行复制到演示页面分别执行)

$.ajax({
     url: "jquery_ajax.php"
    , type: "POST"
    , data: "name=codeplayer&age=18"
    , success: function( data, textStatus, jqXHR ){
        // data 是返回的数据
        // textStatus 可能为"success"、"notmodified"等
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        alert("返回的数据" + data);
    }
});


$.ajax({
     url: "jquery_ajax.php?page=1&id=3"
    , type: "POST"
    // jQuery会自动将对象数据转换为 "name=codeplayer&age=18&uid=1&uid=2&uid=3"
    , data: { name:"codeplayer", age:18, uid: [1, 2, 3] }
    // 请求成功时执行
    , success: function( data, textStatus, jqXHR ){
        alert("返回的数据" + data);
    }
    // 请求失败时执行
    , error: function(jqXHR, textStatus, errorMsg){
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        // textStatus 可能为: null、"timeout"、"error"、"abort"或"parsererror"
        // errorMsg 可能为: "Not Found"、"Internal Server Error"等
        alert("请求失败:" + errorMsg);
    }
});


// 将url单独提取出来作为第一个参数(jQuery 1.5+才支持)
$.ajax("jquery_ajax.php?action=type&id=3", {
     dataType: "json" // 返回JSON格式的数据
    , success: function( data, textStatus, jqXHR ){
        // 假设返回的字符串数据为{ "name": "CodePlayer", age: 20 }
        // jQuery已帮我们将该JSON字符串转换为对应的JS对象,可以直接使用
        alert( data.name ); // CodePlayer
    }   
});


$.ajax( {
    // 注意这里有个参数callback=?
     url: "http://cross-domain/jquery_ajax.php?name=Jim&callback=?&age=21"
    , async: false // 同步请求,发送请求后浏览器将被锁定,只有等到该请求完成(无论成功或失败)后,用户才能操作,js代码才会继续执行
    , dataType: "jsonp" // 返回JSON格式的数据
    , success: function( data, textStatus, jqXHR ){
        // 假设返回的字符串数据为{ "site_name": "CodePlayer", "site_desc": "专注于编程开发技术分享" }
        // jQuery已帮我们将该JSON字符串转换为对应的JS对象,可以直接使用
        alert( data.site_desc ); // 专注于编程开发技术分享
    }   
});


$.ajax( {
    // 加载指定的js文件到当前文档中
     url: "http://code.jquery.com/jquery-1.8.3.min.js"
    , dataType: "script"
});

推荐学习:《ajax视频教程

文字列型URL リクエスト文字列。
オプション/オブジェクト タイプ オブジェクト オブジェクト。その各属性は、リクエストの送信に必要な追加のパラメーター設定を指定するために使用されます。

以上がajax関数とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。