1。概要
1.アヤックス
AJAX の正式名称は、Asynchronous Javascript And XML (非同期 JS および XML) です。AJAXを介してブラウザ上で非同期リクエストを送信できるため、更新せずにデータを取得できることが最大のメリットです。
アドバンテージ：
- ページを更新せずにサーバーと通信できます。
- ユーザー イベントに基づいてページ コンテンツの一部を更新できます。
欠点:
- 閲覧履歴やロールバックはありません。
- クロスドメインの問題があります。
- SEO は優しくありません (検索エンジンの最適化、クローラーがクロールできません)。
2.XML
データの送信と保存に使用される XML 拡張マークアップ言語。XML は HTML に似ていますが、HTML には事前定義されたタグがあるのに対し、XML はカスタム タグです。現在は JSON に置き換えられています。
3. クロスドメインの問題
クロスドメインとは、ブラウザーが他の Web サイトからのスクリプトを実行できないことを意味します。これはブラウザの同一生成元ポリシー (ブラウザによって課されるセキュリティ制限) が原因で発生します。
いわゆる同一オリジンとは、ドメイン名、プロトコル、ポートがすべて同じであることを意味し、1 つだけ異なる場合はクロスドメインです。localhost と 127.0.0.1 はどちらもローカル マシンを指しますが、クロスドメインでもあります。
クロスドメインはインターフェースのリクエストと Dom の操作をブロックします。
4.HTTPプロトコル
HTTP (hypetext Transport Protocol) プロトコル、ハイパーテキスト転送プロトコルは、ブラウザと World Wide Web サーバー間の相互通信のルールを規定します。
リクエストメッセージ
- 行: リクエストメソッド、URL パス、HTTP プロトコルのバージョン
- 头：ホスト、Cookie、コンテンツタイプ、ユーザーエージェント
- 空行
- 体
応答メッセージ
- 行：プロトコルバージョン、応答ステータスコード、応答ステータス文字列
- 头：コンテンツタイプ、コンテンツ長、コンテンツエンコーディング
- 空行
- 本文：HTMLソースコード
5. 環境の準備
Node.js をダウンロードして Express:ハウツー リンク
2.使用する
1. 基本操作のリクエスト
//获取元素
const btn=document.getElementByTagName('button')[0];
//绑定事件
btn.onclick=function(){
//1.创建对象
const xhr=new XMLHttpRequest();
//2.初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/路径');
//3.发送
xhr.send();
//4.事件绑定 处理服务器端返回结果
//readystate 是xhr对象中的属性，表示状态0 1 2 3 4
//0 未初始化 1 open调用完毕 2 send调用完毕 3 服务器返回部分结果 4 返回所有结果
xhr.onreadystatechange=function(){
if(xhr.readystate===4){
if(xhr.status>=200&&xhr.status<300){
result.innerHTML=xhr.response;
}
}
}
}
2.パラメータの設定
URLの間に設定します。
3. POSTリクエストを送信する
xhr.open('POST','http://127.0.0.1:8000/路径+参数');
//设置请求头
xhr.setRequestHeader('type','content');
//设置请求体
xhr.send('请求体');
4. JSONデータに応答する
サーバーは以下を送信します:
const data={
name:'hh'};
let str=JSON.stringify(data);
response.send(str);
クライアントは以下を受け取ります:
//手动转换
let data=JSON.parse(xhr.response);
console.log(data.name);
//自动转换
console.log(xhr.response.name);
5. リクエストタイムアウトの問題
//1. 2s内未收到结果就取消
xhr.timeout=2000;
//2. 设置超时回调，超时后调用该函数
xhr.ontimeout=function(){
}
//网络异常回调
xhr.onerror=function(){
}
6. キャンセルリクエスト
xhr.abort();
7. 質問の再送信リクエスト
//标识是否正在发送ajax请求
let isSending=false;
//发送后将isSending 改为true
//绑定事件
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
isSending=false;
}
}
8. fetch 関数を使用して ajax リクエストを送信します
fetch('url',{
method:'POST',
//请求头
headers:{
name:'ahh'
},
//请求体
body:''
}).then(response=>{
return response.text();//response.json();
});
3. jQuery での ajax の使用
1.リクエストを取得する
$.get(url,[data],[callback],[type])
- url: リクエストされた URL アドレス
- データ: 伝送されるパラメータ
- callback: ロード成功時のコールバック関数
- type: 返されるコンテンツ形式を設定します
2.投稿リクエスト
$.post(url,[data],[callback],[type])
- url: リクエストされた URL アドレス
- データ: 伝送されるパラメータ
- callback: ロード成功時のコールバック関数
- type: 返されるコンテンツ形式を設定します
3. 一般モード
$('button').eq(0).click(function(){
$.ajax({
url:'',
data:{
a:100,b:200},
type:'GET' //'POST',
dataType:'json',
success:function(data){
},
timeout:2000,
error:function(){
}
})
})
4. Axios は ajax を使用します
5. クロスドメインの問題
1. 同一生成元ポリシー
ブラウザーのセキュリティ ポリシー、同一オリジン: プロトコル、ドメイン名、およびポート番号がまったく同じである必要があります。
同一オリジンポリシーの違反はクロスドメインです。
2. クロスドメインの解決方法
- JSONP : GET リクエストのみがサポートされます。
img、link、iframe、script などの一部のタグにはクロスドメイン機能があり、JSONP は script タグのクロスドメイン機能を使用してリクエストを送信します。
スクリプト送信リクエストはjs ステートメントを返す必要があります。
jQuery は jsonp リクエストを送信します。
$('button').eq(0).click(function(){
$.getJSON('url',function(data){
})
})
- CORS: クロスオリジンリソース共有
クライアント側で特別な操作を行う必要はなく、サーバー内で完全に処理され、get リクエストと post リクエストがサポートされます。
CORS は、応答ヘッダーを設定することで、リクエストでクロスオリジンが許可されていることをブラウザーに伝えます。
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Header","*");
response.setHeader("Access-Control-Allow-Method","*");
//*：全部
// 也可以写一个具体的url地址。