Ajax クロスドメインの問題の詳細な紹介

今回は、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: 非同期オブジェクトの初期化が完了し、リクエストが送信されます

2: サーバーから返された元のデータを受信します

3: データは

4: データの解析が完了し、データを使用できるようになります

XML

XML の特徴 は、名門の出身であり、W3C によって策定されたデータ形式であり、 Microsoft と IBM によって強く推奨されています。XML はデータの送信と保存を目的とした Extensible Markup Language (Extensible Markup Language) を指し、HTML はページを表すように設計されています。

文法規則: HTML と同様に、タグによって表現されます。

特殊記号: たとえば、<> はエンティティ転送文字を使用する必要があります

XML の解析にはフロントエンドとバックエンドの連携が必要です:

1. バックエンドが戻ったら、Content-Type 値を設定します。 application/xml

2 への応答ヘッダー内。フロントエンドの非同期オブジェクトがバックグラウンド データを受信するときは、忘れずに xml、xhr.responseXML の形式で受信し、

オブジェクト オブジェクト

を返します。コンテンツは #document です。

JSON

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通过动态