這篇文章主要為大家詳細介紹了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-urlencoded
3).設定請求體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差不多,都是透過標記來表示的
特殊符號:例如a8093152e673feb7aba1828c43532094要使用實體-轉移字元
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通过动态3f1c4e4b6b16bbbd69b2ee476dc4f83a元素来使用,src属性知道一个跨域URL,JSONP是有效的JavaScript代码,浏览器可以跨域请求JS文件.
优点:简单易用,可以直接访问响应文本,支持在浏览器和服务器之间双向通信.
缺点:1.JSONP是从其他域加载代码执行,存在不安全风险.2.不好确定JSONP请求是否成败.
通过修改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中文网。
相关推荐:
以上是Ajax和跨域問題深入解析_AJAX相關的詳細內容。更多資訊請關注PHP中文網其他相關文章!