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

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル