Ajax跨域問題的詳細介紹

這次帶給大家Ajax跨域問題的詳細介紹，使用Ajax跨域問題的注意事項有哪些，下面就是實戰案例，一起來看一下。

什麼是ajax

Ajax(Asynchronous JavaScript and XML),是一種可以向伺服器請求額外的資料並且無需刷新頁面的技術,ajax的出現帶來了更好的用戶體驗.

Ajax的核心就是XMLHttpRequest(XHR)對象.XHR為向伺服器發送請求和解析伺服器響應提供了流暢的接口.可以使用XHR對象取得新資料,透過DOM將新資料插入頁面.雖然名字中包含XML,但是ajax通訊和資料格式無關;這種技術就是可以不用刷新就從伺服器取得資料,但是不一定是XML資料,也可以是json.

XMLHttpRequest物件

#XHR的用法

##1.建立一個XMLHttpRequest物件

2.發送請求

1）.設定請求行xhr.open()

2).
POST請求需要設定請求頭xhr.setRequestHeader() POST請求頭Content-Type的值：application/x-www-form-urlencoded3）.設定請求體xhr.send() get請求傳null,post根據情況

#3.處理伺服器回應

先判斷回應狀態碼與非同步物件是否解析完畢.

伺服器傳回的狀態碼status

1xx:訊息2xx:成功
3xx:重定向
4xx:請求錯誤
5xx:伺服器錯誤

非同步物件的狀態碼readystate

0:非同步物件已經建立

1 :非同步物件初始化完成,傳送請求
2:接收伺服器傳回的原始資料
3:資料正在解析,解析需要時間
4:資料解析完成,資料可以使用了

XML

XML的特點，出身名門，W3C制定，微軟和IBM曾經共同大力推薦過的數據格式.XML 指可擴展標記語言（Extensible Markup Language）,被設計用來傳輸和儲存資料,HTML 是設計用來表示頁面的.

語法規則:和HTML差不多,都是透過標記來表示的

特殊符號:例如要使用實體-轉移字元

xml的解析需要前後台配合:

1.後台在回傳的時候,在回應頭中設定Content-Type的值為application/xml
2.前台非同步物件在接收後台資料時,記得按照xml的方式來接收,xhr.responseXML,並且它回傳的是一個
object物件,內容是#document

#JSON

JSON(JavaScript Object Notation),出身草根，是Javascript 的子集，專門負責描述資料格式.JSON本身是一個特殊格式的字串,可以轉換成js物件,是網路上用來傳輸資料使用最廣泛的資料格式，沒有之一.

語法規則:資料以key/value 值對錶示,資料由逗號分隔,大括號保存物件,中括號保存數組,名稱和值都需要使用雙引號包含(這個是和js的一點小區別).
js中解析/操作JSON: #1.JSON.parse(json字串); 將一個json格式的字串解析成js物件
2.JSON.stringify(js物件); 將一個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中使用ajaxAPI jQuery ajax

jQuery為我們提供了更便利的ajax封裝使用.

$.ajax({}) 可以設定方式發起ajax請求

$.get() 以get方式發起ajax請求
$.post() 以post方式發起ajax請求
$ ('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通过动态<script>元素来使用,src属性知道一个跨域URL,JSONP是有效的JavaScript代码,浏览器可以跨域请求JS文件.<br/>优点:简单易用,可以直接访问响应文本,支持在浏览器和服务器之间双向通信.<br/>缺点:1.JSONP是从其他域加载代码执行,存在不安全风险.2.不好确定JSONP请求是否成败.</script>

通过修改document.domain来跨子域

使用window.name来进行跨域

HTML5中新引进 window.postMessage方法来跨域传送数据

flash

iframe

服务器设置代理页面

图像Ping

通过使用标签,利用网页可以从任何网页加载图像原理.
图像Ping常用于跟踪用户点击页面或动态广告曝光次数.

2个缺点:1.只支持GET请求.2.无法访问服务器的响应文本.只能用于浏览器与服务器间的单项通信.

var img = new Image();
img.onload = img.onerror = function (){
alert("Done!");
};
img.src = "";

comet

一种更高级的ajax技术.ajax是页面向服务器请求数据的技术.comet是服务器向页面推送数据的技术.

SSE (Server-Sent Events) 服务器发送事件

Web Sockets

Web Sockets的目标是在一个单独的持久链接上提供全双工,双向通信.

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

PHP+Ajax如何实现表格的实时编辑

用ajax实现session超时跳转到登录页面

以上是Ajax跨域問題的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！