Ajax データリクエストの基本を理解する

おすすめの関連記事: ajax ビデオ チュートリアル

##Ajax の概要

これはブラウザによって提供される一連のメソッドであり、ページを更新せずにデータを更新し、Web サイト アプリケーションを閲覧するユーザーのエクスペリエンスを向上させることができます。

Ajax アプリケーション シナリオ

ページをプルアップしてより多くのデータを読み込む

リスト データを更新せずにページングを行う
フォーム アイテムがフォーカス データの検証を離れる
検索ボックスのプロンプト テキスト ドロップダウン リスト

Ajax の動作原理と実装

Ajax の動作原理 Ajax はブラウザーの送信と同等です。リクエストと応答の受信エージェントは、ユーザーのページ閲覧に影響を与えることなくページ データを部分的に更新することで、ユーザー エクスペリエンスを向上させます。


Ajax 実装手順

Ajax オブジェクトの作成

1.  var xhr = new XMLHttpRequest();

Ajax にリクエスト アドレスとリクエストを伝えますメソッド

1. xhr.open('get', 'http://www.example.com');

リクエストの送信

1.  xhr.send();

サーバーからクライアントへの応答データの取得

1. xhr.onload = function () {
        console.log(xhr.responseText);
    }

サーバー側の応答データ形式 実際のプロジェクトでは、ほとんどの場合、サーバー側は応答データ形式として JSON オブジェクトを使用します。クライアントは応答データを取得すると、JSON データと HTML 文字列を結合し、結合した結果をページに表示する必要があります。
http のリクエストとレスポンスの過程では、リクエストパラメータであってもレスポンス内容であっても、オブジェクト型であれば最終的にはオブジェクト文字列に変換されて送信されます。

JSON.parse() // 将 json 字符串转换为json对象

リクエスト パラメータの受け渡し

従来の Web サイト フォーム送信

             

 GET リクエスト メソッド

xhr.open('get', 'http://www.example.com?name=zhangsan&age=20');

POST リクエスト メソッド

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send('name=zhangsan&age=20');

リクエストメッセージ HTTPリクエストとレスポンスの際に渡される、送信するデータや追加情報を含むデータブロックをメッセージと呼びますが、これらのデータや情報は規定に準拠する必要があります。 。


リクエストパラメータの形式

application/x-www-form-urlencoded

1.  name=zhangsan&age=20&sex=男

application/json

1. {name: 'zhangsan', age: '20', sex: '男'}

リクエスト ヘッダーの Content-Type 属性の値を application/json に指定し、現在のリクエスト パラメーターの形式が json であることをサーバーに伝えます。

JSON.stringify() // 将json对象转换为json字符串

注: get リクエストでは json オブジェクト データ形式を送信できません。また、従来の Web サイトのフォーム送信では json オブジェクト データ形式がサポートされていません。

サーバー側の応答を取得する

Ajax ステータス コード ajax オブジェクトを作成し、ajax オブジェクトを構成し、リクエストを送信し、受信した後サーバー側の応答データ。このプロセスの各ステップは値に対応し、この値は ajax ステータス コードです。

0: リクエストは初期化されていません (open() がまだ呼び出されていません)

1: リクエストは確立されていますが、送信されていません (send() が呼び出されていません)まだ呼び出されています)
2: リクエストは送信されました
3: リクエストは処理中です。通常、応答内の一部のデータは利用可能です
4: 応答は完了しており、サーバーの応答を取得できます。 used

xhr.readyState // 获取Ajax状态码

onreadystatechangeevent

このイベントは、Ajax ステータス コードが変更されると自動的にトリガーされます。

Ajaxのステータスコードはイベント処理関数で取得・判定でき、ステータスコードが4の場合はxhr.responseTextでサーバー側の応答データを取得できます。

// 当Ajax状态码发生变化时
 xhr.onreadystatechange = function () {
     // 判断当Ajax状态码为4时
     if (xhr.readyState == 4) {
         // 获取服务器端的响应数据
         console.log(xhr.responseText);
     }
 }

サーバー側の応答を取得する 2 つの方法の違い

Ajax エラー処理

1. 网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。
   可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码
2. 网络畅通，服务器端没有接收到请求，返回404状态码。
   检查请求地址是否错误。
3. 网络畅通，服务器端能接收到请求，服务器端返回500状态码。
   服务器端错误，找后端程序员进行沟通。
4. 网络中断，请求无法发送到服务器端。
   会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

低版本 IE 浏览器的缓存问题
问题：在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。

解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。

 xhr.open('get', 'http://www.example.com?t=' + Math.random());

Ajax 异步编程

Ajax 封装

问题：发送一次请求代码过多，发送多次请求代码冗余且重复。
解决方案：将请求代码封装到函数中，发请求时调用函数即可。

ajax({ 
     type: 'get',
     url: 'http://www.example.com',
     success: function (data) { 
         console.log(data);
     }
 })

Ajax 概述

它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。

Ajax 的应用场景

页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表

相关学习推荐：javascript视频教程

以上がAjax データリクエストの基本を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。