今回は、Ajax クロスドメイン問題について詳しく説明します。Ajax クロスドメイン問題を使用する際の 注意事項 について、実際のケースを見てみましょう。
ajaxとは
Ajax(非同期JavaScriptとXML)は、ページを更新せずにサーバーに追加データを要求できるテクノロジーです。ajaxの登場により、より良いユーザーエクスペリエンスがもたらされます。
の核心です。 Ajax は XMLHttpRequest (XHR) オブジェクトであり、XHR オブジェクトを使用して、サーバーにリクエストを送信し、DOM を通じて新しいデータをページに挿入できます。 XML、Ajax通信はデータ形式とは関係ありません。この技術は更新せずにサーバーからデータを取得できますが、必ずしもXMLデータである必要はなく、json.
XMLHttpRequestオブジェクト
の使用法も可能です。 XMLHttpRequestオブジェクトを作成します2.リクエストを送信します
1).リクエストラインを設定しますxhr.open()2).
POSTリクエストリクエストヘッダーxhr.setRequestHeader()を設定する必要がありますリクエストヘッダー Content-Type: application/x-www-form-urlencoded
3) get リクエストで null を渡すようにリクエストボディ xhr.send() を設定し、状況に応じて送信します
3. まず、応答ステータス コードと非同期オブジェクトが解析されたかどうかを確認します。
1xx: メッセージ
2xx: 成功3xx: リダイレクト
4xx: リクエスト エラー5xx: サーバー エラー
非同期オブジェクトreadystateのステータスコード
0: 非同期オブジェクトが作成されました 1: 非同期オブジェクトの初期化が完了し、リクエストが送信されます
3: データは
4: データの解析が完了し、データを使用できるようになります
XML
文法規則: HTML と同様に、タグによって表現されます。
特殊記号: たとえば、<> はエンティティ転送文字を使用する必要があります XML の解析にはフロントエンドとバックエンドの連携が必要です:1. バックエンドが戻ったら、Content-Type 値を設定します。 application/xml
2 への応答ヘッダー内。フロントエンドの非同期オブジェクトがバックグラウンド データを受信するときは、忘れずに xml、xhr.responseXML の形式で受信し、オブジェクト オブジェクト
を返します。コンテンツは #document です。 JSON (JavaScript Object Notation) は、JavaScript のサブセットであり、JSON 自体は、js オブジェクトに変換できる特別にフォーマットされた文字列を記述します。データの送信に最も広く使用されているデータ形式はありません。文法規則:
データはキーと値のペアで表され、データはカンマで区切られ、波括弧はオブジェクトを保存し、角括弧で区切られます。配列、名前を保存する 値と値の両方を二重引用符で囲む必要があります (これは、
js での JSON の解析/操作: 1.JSON.parse(json string); json形式の文字列をjsオブジェクトに解析する
2.JSON.stringify(js object); jsオブジェクトをjson形式の文字列に変換するajaxを自分でカプセル化する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);
}
}
}
jQueryでajaxを使用する
API jQuery ajax
jQuery が代わりにそれを行います。 より便利な Ajax カプセル化の使用法を提供します。
$.ajax({}) は、Ajax リクエストを開始するように設定できます$.get() get モードで Ajax リクエストを開始します$.post() Ajax リクエストを開始しますpostモード
$ ('form').serialize() フォームをシリアル化(形式 key=val$key=val)パラメータの説明
url :接口地址
type :请求方式(get/post)
timeout : 要求为Number类型的参数，设置请求超时时间（毫秒）
dataType: 应该是客户端传递给服务器一个值，告诉服务器如何进行处理:
data: 发送请求数据
beforeSend: 要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求.
success: 成功响应后调用
error: 错误响应时调用
complete: 响应完成时调用（包括成功和失败）
//ajax===get
$.ajax({
url:'',
data:'key=value&key=value',
type:'get',
success:function (result) {
console.log(result);
}
});
//ajax===post
$.ajax({
url:'',
data:'key=value&key=value',
type:'post',
success:function (result) {
console.log(result);
}
});
//$.get
$.get({
url:'',
data:'key=value&key=value',
success:function (result) {
console.log(result);
}
});
//$.post
$.post({
url:'',
data:'key=value&key=value',
success:function (result) {
console.log(result);
}
});
//在使用jQuery中ajax发送请求的时候,只需要在 dataType中写上jsonp即可实现ajax的跨域请求
dataType:'jsonp'跨域
通过XHR实现ajax通信的一个主要限制(相同域,相同端口,相同协议),来源于跨服安全策略,默认情况下,XHR只能请求同一域的资源,这是为了防止某些恶意的行为.
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)
