この記事では主に Ajax とクロスドメインの問題を詳しく紹介し、Ajax とは何か、クロスドメインとは何なのかを説明します。興味のある方は参考にしてください
ajaxとは
Ajax（非同期JavaScriptとXML）は、ページを更新せずにサーバーに追加のデータを要求できる技術、の登場です。 Ajax の核となるのは XMLHttpRequest (XHR) オブジェクトであり、XHR オブジェクトを使用して新しいデータを取得したり、新しいデータを挿入したりすることができます。名前には XML が含まれていますが、Ajax 通信はデータ形式とは関係ありません。このテクノロジは更新せずにサーバーからデータを取得できますが、XML データである必要はありません。 json.
XMLHttpRequestオブジェクト
POSTリクエストの使用法
リクエストヘッダーを設定する必要がありますxhr.setRequestHeader() POSTリクエストヘッダーContent-Type値: application/x-www-form-urlencoded3) . リクエストボディの xhr.send() get リクエストを null に渡すように設定し、状況に応じてポストします まず、レスポンスステータスコード
と非同期オブジェクトが解析されたかどうかを確認します
サーバーから返されたステータスコードステータス
1xx: メッセージ2xx: 成功3xx: リダイレクト
4xx: リクエストエラー
5xx: サーバーエラー
非同期オブジェクトのステータスコードreadystate0:非同期オブジェクトが作成されました
1: 非同期オブジェクトの初期化が完了し、リクエストを送信します
3: データが解析中です、解析には時間がかかります
4: データの解析が完了し、データを使用できます
XML
XMLの特徴 W3Cによって策定された名門のXMLは、MicrosoftとIBMによって強く推奨されているデータ形式です。はデータを送信および保存するように設計されており、HTML はページを表すように設計されています
特殊記号: <> ; など エンティティ転送文字を使用する
XML 解析にはフロントエンドとバックエンドの連携が必要です。
1. バックエンドが戻ったら、応答ヘッダーの Content-Type 値を application/xml に設定します。
2. フロントエンドの非同期オブジェクトがバックエンドを受け取ります。データを受信するときは、xml、xhr.responseXML の形式で受信することを忘れないでください。データは
を返します。その内容は #document
JSON
JSON (JavaScript Object Notation) であり、グラスルーツは、JSON のサブセットであり、特にデータ形式を記述する役割を果たします。JSON 自体は、js オブジェクトに変換できる特別な形式の文字列であり、インターネット上でデータを送信するために最も広く使用されているデータ形式です。
文法規則:
データはキーと値のペアで表されます。中括弧はオブジェクトを保存し、角括弧は配列を保存します。名前と値は両方とも二重引用符で囲む必要があります。 js とは少し異なります)。
js で JSON を解析/操作します:
2.JSON.stringify(js object) ; js オブジェクトを json 形式の String に変換します
自分で ajax をカプセル化しますjQuery での ajax の使用API jQuery ajax
jQuery は、より便利な ajax パッケージを提供します。 .$.ajax( {}) 設定可能な方法で Ajax リクエストを開始できます$.get() get 方法で Ajax リクエストを開始します$.post() Post 方法で Ajax リクエストを開始します
$ ('form').serialize() フォームをシリアル化します (形式 key=val$key=val)
パラメータの説明
url: インターフェースアドレス
timeout: 数値が必要です型パラメーター、リクエストのタイムアウト (ミリ秒) を設定します
dataType : サーバーに処理方法を指示するためにクライアントからサーバーに渡される値である必要があります:
beforeSend: パラメーターは関数である必要がありますカスタム HTTP ヘッダーの追加など、リクエストを送信する前に XMLHttpRequest オブジェクトの機能を変更できます。 beforeSend で false が返された場合、この ajax リクエストはキャンセルできます。 success: 成功した応答後に呼び出されます。 error: エラー応答時に呼び出されます。
complete: 応答が完了したときに呼び出されます (成功と失敗を含む)。
function pinjieData(obj) {
//obj 就相当于 {key:value,key:value}
//最终拼接成键值对的字符串 "key:value,key:value"
var finalData = "";
for(key in obj){
finalData+=key+"="+obj[key]+"&"; //key:value,key:value&
}
return finalData.slice(0,-1);//key:value,key:value
}
function ajax(obj) {
var url = obj.url;
var method = obj.method.toLowerCase();
var success = obj.success;
var finalData = pinjieData(obj.data);
//finalData最终的效果key:value,key:value
//1.创建xhr对象
var xhr = new XMLHttpRequest();
//get方法拼接地址,xhr.send(null)
if (method=='get'){
url = url + "?"+finalData;
finalData = null;
}
//2.设置请求行
xhr.open(method,url);
// 如果是post请求,要设置请求头
if (method=='post'){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
}
//3.发送
xhr.send(finalData);
//4.监听服务器返回的数据
xhr.onreadystatechange = function () {
if (xhr.status==200 && xhr.readyState==4){
var result = null;
//获取返回的数据类型
var rType = xhr.getResponseHeader("Content-Type");
if (rType.indexOf('xml')!=-1){
result = xhr.responseXML;
}else if(rType.indexOf('json')!=-1){
// JSON.parse 的意思是 将 json格式的字符串
//比如 [{ "src":"./images/nav0.png","content":"商品分类1"}]
//转成js对象
result = JSON.parse(xhr.responseText);
}else{//当成普通的字符串去处理
result = xhr.responseText;
}
//将这里解析好的数据交给页面去渲染
success(result);
}
}
}
クロスドメイン
CORS クロスドメイン
CORS(cross-origin resource sharing,跨域源资源共享)定义了在跨域时,浏览器和服务器应该如何沟通.CORS允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
CORS支持所有类型的HTTP请求.
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。
JSONP
JSONP由回调函数和数据组成.JSONP只支持GET请求.JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据.
JSONP通过动态
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
