ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用して AJAX 呼び出しとリクエストを行う方法についての簡単な説明
Ajax は、より優れた、より高速で、よりインタラクティブな Web アプリケーションを作成するために使用されるテクノロジです。この記事では、JavaScript を使用して AJAX の呼び出しとリクエストを行う方法を説明します。
#このチュートリアルでは、JS を使用して AJAX 呼び出しを行う方法を学習します。
AJAX という用語は、非同期 JavaScript および XML を表します。
AJAX は、リソースを取得するための非同期ネットワーク要求を行うために JS で使用されます。もちろん、名前が示すように、リソースは XML に限定されず、JSON、HTML、プレーン テキストなどのリソースを取得するために使用することもできます。
ネットワーク要求を行ってサーバーからデータを取得するには、複数の方法があります。一つずつご紹介していきます。
XML は、最初に XML データを取得するために使用されるため、使用されます。現在では、JSON、HTML、またはプレーン テキストの取得にも使用できます。
function success() { var data = JSON.parse(this.responseText) console.log(data) } function error (err) { console.log('Error Occurred:', err) } var xhr = new XMLHttpRequest() xhr.onload = success xhr.onerror = error xhr.open("GET", ""https://jsonplaceholder.typicode.com/posts/1") xhr.send()単純な GET リクエストを作成するには、成功リクエストを処理するために 2 つのリスナーが必要であることがわかります。失敗。
open() メソッドと send() メソッドを呼び出す必要もあります。サーバーからの応答は responseText
変数に保存され、JSON.parse() を使用して JavaScript オブジェクトに変換されます。
function success() { var data = JSON.parse(this.responseText); console.log(data); } function error(err) { console.log('Error Occurred :', err); } var xhr = new XMLHttpRequest(); xhr.onload = success; xhr.onerror = error; xhr.open("POST", "https://jsonplaceholder.typicode.com/posts"); xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8"); xhr.send(JSON.stringify({ title: 'foo', body: 'bar', userId: 1 }) );
POST リクエストは GET リクエストに似ていることがわかります。さらに、
setRequestHeader を使用してリクエスト ヘッダー「Content-Type」を設定し、send メソッドで
JSON.stringify を使用して JSON 本文を文字列として送信する必要があります。
2.3 XMLHttpRequest と Fetch
XMLHttpRequest を使用してデータをリクエストしてきました。最新の fetch API を使用すると、XMLHttpRequest (XHR)
と同様のネットワーク リクエストを行うことができます。主な違いは、fetch() API が
Promises を使用することです。これにより、API がよりシンプルかつ簡潔になり、コールバック地獄が回避されます。
3. Fetch API
Fetch は、AJAX 呼び出しを行うためのネイティブ JavaScript API であり、ほとんどのブラウザーでサポートされており、現在広く使用されています。
fetch(url, options) .then(response => { // handle response data }) .catch(err => { // handle errors });API パラメータ
fetch() API には 2 つのパラメータがあります。
1 とurl
は必須パラメータであり、取得するリソースへのパスです。2、
options
method: GET | POST | PUT | DELETE | PATCH
headers:
{ などのリクエスト ヘッダー "Content-type": "application/json ; charset=UTF-8” }
body: 通常、POST リクエストに使用されます
ネットワーク エラーが発生した場合は拒否されます。これは .catch()
ブロックで処理されます。サーバーからの応答にステータス コード (
200
500
など) が含まれている場合、Promise は解決されます。 。応答オブジェクトは
エラー処理
成功した応答では、ステータス コード
200404 (リソースが見つかりません) や 500
(内部サーバー エラー) など) が含まれます。 API #resolved では、これらを
.then() ブロックで明示的に処理する必要があります。
response
オブジェクトで HTTP ステータスを確認できます:
HTTP ステータス コード (200 など)。
ok – ブール値、HTTP ステータス コードが 200 ~ 299 の場合は
。
const getTodoItem = fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .catch(err => console.error(err)); getTodoItem.then(response => console.log(response));
Response { userId: 1, id: 1, title: "delectus aut autem", completed: false }
上記のコードには、注意すべき点が 2 つあります:
fetch API は、変数に割り当てて後で実行できる Promise オブジェクトを返します。
response.json() HTTP GET
リクエストが 500 エラーをスローした場合に何が起こるかを見てみましょう:
fetch('http://httpstat.us/500') // this API throw 500 error .then(response => () => { console.log("Inside first then block"); return response.json(); }) .then(json => console.log("Inside second then block", json)) .catch(err => console.error("Inside catch block:", err));
Inside first then block ➤ ⓧ Inside catch block: SyntaxError: Unexpected token I in JSON at position 4
ブロックに入り、そこでエラー JSON の解析に失敗し、catch() ブロックでキャッチされたエラーをスローします。
これは、fetch()
API を使用する場合、このようなエラーを次のように明示的に処理する必要があることを意味します。 -
fetch('http://httpstat.us/500') .then(handleErrors) .then(response => response.json()) .then(response => console.log(response)) .catch(err => console.error("Inside catch block:", err)); function handleErrors(response) { if (!response.ok) { // throw error based on custom conditions on response throw Error(response.statusText); } return response; }
➤ Inside catch block: Error: Internal Server Error at handleErrors (Script snippet %239:9)
3.3 例: 役職#########
fetch('https://jsonplaceholder.typicode.com/todos', { method: 'POST', body: JSON.stringify({ completed: true, title: 'new todo item', userId: 1 }), headers: { "Content-type": "application/json; charset=UTF-8" } }) .then(response => response.json()) .then(json => console.log(json)) .catch(err => console.log(err))
Response ➤ {completed: true, title: "new todo item", userId: 1, id: 201}
在上面的代码中需要注意两件事:-
POST
请求类似于GET
请求。 我们还需要在fetch()
API的第二个参数中发送method
,body
和headers
属性。
我们必须需要使用 JSON.stringify()
将对象转成字符串请求body
参数
Axios API非常类似于fetch API,只是做了一些改进。我个人更喜欢使用Axios API而不是fetch()
API,原因如下:
axios.get()
,为 POST 请求提供 axios.post()
等提供不同的方法,这样使我们的代码更简洁。catch()
块中处理的错误,因此我们无需显式处理这些错误。4.1 示例:GET
// 在chrome控制台中引入脚本的方法 var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://unpkg.com/axios/dist/axios.min.js'; document.head.appendChild(script);
axios.get('https://jsonplaceholder.typicode.com/todos/1') .then(response => console.log(response.data)) .catch(err => console.error(err));
Response { userId: 1, id: 1, title: "delectus aut autem", completed: false }
我们可以看到,我们直接使用response获得响应数据。数据没有任何解析对象,不像fetch()
API。
错误处理
axios.get('http://httpstat.us/500') .then(response => console.log(response.data)) .catch(err => console.error("Inside catch block:", err));
Inside catch block: Error: Network Error
我们看到,500错误也被catch()
块捕获,不像fetch()
API,我们必须显式处理它们。
4.2 示例:POST
axios.post('https://jsonplaceholder.typicode.com/todos', { completed: true, title: 'new todo item', userId: 1 }) .then(response => console.log(response.data)) .catch(err => console.log(err))
{completed: true, title: "new todo item", userId: 1, id: 201}
我们看到POST方法非常简短,可以直接传递请求主体参数,这与fetch()API不同。
更多编程相关知识,请访问:编程视频!!
以上がJavaScript を使用して AJAX 呼び出しとリクエストを行う方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。