アヤックス
1 サーバーの基本概念
1.1サーバー
インターネットサーフィンの過程で、リソースを保存して外部に提供する役割を担うコンピューターはサーバーと呼ばれます。
インターネットサーフィンの過程で、リソースの取得と消費を担当するコンピューターはクライアントと呼ばれます。
1.2 URLアドレス
URL（正式名はUniformResourceLocator）は、中国語ではUniform Resource Locatorと呼ばれ、インターネット上の各リソースの一意の格納場所を示すために使用されます。URL アドレスを介してのみ、ブラウザはリソースの保存場所を正確に特定できるため、対応するリソースに正常にアクセスできます。
URL アドレスは通常、次の 3 つの部分で構成されます。
①クライアントとサーバー間の通信プロトコル（http/https）
②リソースが保存されているサーバー名
③サーバー上のリソースの具体的な保存場所
1.3 リソース要求方法
クライアントがサーバーをリクエストする場合、リクエストにはさまざまな方法がありますが、最も一般的な 2 つの方法はリクエストの取得とリクエストです。
- Get リクエストは通常、サーバー リソースを取得するために使用されます(サーバーからリソースを要求します)。
- Post リクエストは通常、サーバーにデータを送信する(サーバーにリソースを送信する)ために使用されます。
2 Ajax について理解する
Ajax の正式名称は、Asynchronous JavaScript And XML (非同期 JavaScript および XML) です。
一般的な理解は、オブジェクトとサーバーを使用してWeb ページ内のXMLHttpRequestデータと対話する方法はAjax であるというものです。
3 インターフェースとインターフェース文書
Ajax を使用してデータを要求する場合、要求された URL アドレスはデータ インターフェイス(インターフェイスと呼ばれます)と呼ばれます。同時に、各インターフェイスにはリクエスト メソッドが必要です。
インターフェイス ドキュメントは、その名前が示すように、インターフェイスの説明ドキュメントであり、インターフェイスを呼び出すための基礎となります。インターフェースドキュメントにはインターフェースのURL、パラメータ、出力内容が記述されており、インターフェースドキュメントを参照することでインターフェースの機能やインターフェースの呼び出し方法を容易に知ることができます。
4 XMLHttpRequestの基本的な使い方
XMLHttpRequest (略して xhr) はブラウザによって提供される JavaScript オブジェクトで、これを通じてサーバー上のデータ リソースをリクエストできます。
リクエスト方法：
| 得る | 役職 | 述べる |
|---|---|---|
| GET リクエストはクエリに偏っています (データの取得...) | POST リクエストはデータの送信 (登録、変更、削除など) に偏っています。 | GET と POST を意味的に区別する |
| GET によって表示される伝送パラメータはリクエスト アドレスの後に直接接続されるため、セキュリティとプライバシーが不十分です | POST は暗黙的にパラメータを運び、リクエスト アドレスには表示されないため、セキュリティが優れています。 | POSTリクエストはJSON形式で渡されます |
| GET リクエストのデータ長にはサイズ制限があり、ブラウザによって異なりますが、制限は 2k ～ 8K です | POSTリクエストは無制限です | |
| GETリクエストはキャッシュ可能 | POSTリクエストはキャッシュされません |
xhr オブジェクトの readState プロパティ:
| 0 | リクエストが初期化されていません |
|---|---|
| 1 | サーバー接続が確立されました |
| 2 | リクエストを受け取りました |
| 3 | リクエストの処理 |
| 4 | リクエストが完了し、レスポンスの準備が整いました |
4.1 xhr を使用して get リクエストを開始する
ステップ：
- xhrオブジェクトを作成する
- xhr.open() 関数を呼び出す
- xhr.send() 関数を呼び出す
- xhr.onreadystatechange イベントをリッスンする
// 不带参数的GET请求
// 1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 2. 调用open函数
// 不带参数的GET请求
// xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");
// 带参数的GET请求
xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1");
// 3. 调用send函数
xhr.send();
// 4. 监听onreadystatechange 事件
xhr.onreadystatechange = function() {
// readyState 表示当前ajax请求所处的状态
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
4.2 xhr を使用して POST リクエストを開始する
ステップ：
- xhrオブジェクトを作成する
- xhr.open() 関数を呼び出す
- Content-Type属性の設定(固定書き込み)
- xhr.send() 関数を呼び出し、送信するデータを指定します。
- xhr.onreadystateChange イベントをリッスンする
// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest();
// 2. 调用 open 函数
xhr.open("POST", "http://www.liulongbin.top:3006/api/addbook");
// 3. 设置 Content-Type 属性
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
// 4. 调用 send 函数
xhr.send("bookname=水浒传转&author=施耐庵呀&publisher=上海图书出版社么");
// 5. 监听事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
4.3 クエリ文字列
クエリ文字列 (URL パラメータ) は、サーバーに情報を送信するために URL の末尾に追加される文字列 (変数) です。
形式: URL の最後に English? を追加し、パラメーター = valueを追加します。複数のパラメーターがある場合は、&記号を使用して区切ります。
5 Axios を使用してリクエストを開始します
Axios は、ネットワーク データ リクエストに焦点を当てたライブラリです。
導入：
<script src="https://unpkg.com/axios/dist/axios.min.js"/></script>
5.1 Axios を使用して GET リクエストを開始する
axios が get リクエストを開始するための構文:
axios.get("url", {params: { /* 参数 */ }}.then(callback))
注: Axios は Promise オブジェクトを返すため、処理する必要があります
axios.get('http://81.70.153.180:8081/api/getStudentList', {
params:{
sid:'s0001',sname:'王'}}).then(res => {
console.log('res',res);
});
axios.get('http://81.70.153.180:8081/api/getStudentList?sid=s0001&sname=王').then(res => {
console.log('res',res);
});
axios({
url: 'http://81.70.153.180:8081/api/getStudentList',
method: 'GET',
params: {
// GET方式，传递参数使用params
sid: 's0001',
sname: '王',
}
}).then(res => {
console.log('res', res); // res.data
});
5.2 Axios を使用して POST リクエストを開始する
POST リクエストを開始するための axios の構文:
axios.post("url", { /* 参数 */ }.then(callback))
axios.post('http://81.70.153.180:8081/api/login', {
sid: 's0001',
password: "123456"
}).then(res => {
console.log(res);
});
axios({
url: 'http://81.70.153.180:8081/api/login', // 请求的地址
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8' }, // 设置请求头
data: {
sid: 's0001',
password: "123456"
}
}).then(res => {
console.log(res); // res.data
});
6 フェッチを使用してリクエストを開始する
フェッチは、フロントエンドがネットワーク リクエストを開始するためのより優れた主流の方法でもあり、Ajax リクエストには主に XML とフェッチの 2 種類が含まれており、XML の方が公開される可能性が高くなります。ただし、 fetch は ajax をさらにカプセル化したもので XMLHttpRequest オブジェクトを使用しないネイティブ js です。
6.1 フェッチを使用して取得リクエストを開始する
fetch('http://81.70.153.180:8081/api/getStudentList?sid=s0001&sname=王').then(res => {
if (res.ok) {
return res.json();
}
}).then(data => {
console.log(data);
});
備考: get リクエストは、rest メソッドを使用してパラメータを渡します。パラメータはアドレス バーの一部として使用されます。
6.2 フェッチを使用してポストリクエストを開始する
fetch('http://81.70.153.180:8081/api/login', {
method: 'post',
body: JSON.stringify({
// 进行传参,需要转换为json字符串
sid: 's0001',
password: "123456"
}),
headers: {
'Content-Type': 'application/json'
}
}).then(res => {
if (res.ok) {
return res.json();
}
}).then(data => {
console.log(data);
});