本文為作者原創，未經博主允許，不可轉載
ajax請求的常用的參數設置：
type：請求類型，"POST","GET",默認為get
url:發送請求的地址
data：是一個對象，聯通請求發送到服務器的數據，表單數據（$("#addForm").serialize()）或formData（文件上傳時用到）
dataType：預期服務器返回的數據類型。如果不指定，jQuery將自動根據http包MIME信息來智能判斷，一般我們采用json格式，
可以設置為“json”，也可以設置為xml，（后面講解）
success：是一個方法，請求成功后的回調函數，傳入返回后的數據，以及包含成功代碼的字符串
error:是一個方法，請求失敗時調用此函數，傳入XMLHTTPRequest對象。
什么地方會用到ajax，一般用ajax是為了頁面異步刷新，在不刷新頁面的情況下，異步到后台去請求數據，
並根據得到的數據做出想要的處理或操作，比如：提交form表單，進行文件上傳，刷新表單數據等。
ajax請求有兩種方式：即type:get或post兩種，一般為post。兩種的主要區別為：
GET請求會將參數跟在URL后進行傳遞，而POST請求則是作為HTTP消息的實體內容發送給WEB服務器。當然在Ajax請求中，這種區別對用戶是不可見的。
另外ajax常用的屬性和方法為：
1.responseText ：獲得字符串形式的響應數據
2.responseXML: 獲得XML形式的響應數據
3.status 和 statusText： 以數字和文本形式返回http狀態碼
4.getResponseHeader() : 查詢響應中的某個字段的值
5.getAllResponseHeader（） ：獲取所有的響應報頭
readyState屬性（監聽服務器連接及響應）：
0：請求為初始化，
1.服務器連接已建立， open已經調用
2.請求已接收，也就是接收到頭消息了
3.請求處理中，也就是接收到響應主體了
4.請求已完成，且響應已就緒，也就是響應完成了
以下為使用的案例和跨域問題的研究
用jQuery的ajax進行form表單提交的案例為：
此處為get請求 $(document).ready(function(){ $("#submit").click(function(){ $.ajax({ type:"GET", url:"", dataType:"json", success:function(data){ if(data.success){ $("#searchResult").html(data.msg); } else{ $("#searchResult").html("出現錯誤"+data.msg); } alert("成功"), } error:function(jqXHR){ alert("發生錯誤"+jqXHR.status); } }) }) })
post請求的案例為：
此處為post請求,需要加入data參數 $(document).ready(function(){ $("#submit").click(function(){ $.ajax({ type:"POST", url:"", data:{ name:$("#name").val(), password:$("#password").val(), sex:$("#sex").val(), number:$("#number").val(), } dataType:"json", success:function(data){ //data為后台返回的數據 if(data.success){ $("#searchResult").html(data.msg); } else{ $("#searchResult").html("出現錯誤"+data.msg); } alert("成功"), } error:function(jqXHR){ alert("發生錯誤"+jqXHR.status); } }) }) })
在工作應用當中，會有很多地方遇到ajax，用ajax請求返回的數據類型也會不一樣，有json格式，xml格式以及formData格式等。
json格式一般返回的為一個對象，
當用json作為返回類型時，應用的案例為：
function submitDemandForm(){ $.ajax({ url:"<%=basePath%>handPlay/demandVideoSubmit", type:"POST", data:$("#addDemandVideoForm").serialize(), dataType:'json', success:function(data){ console.info(data); // alert("提交成功"+data.returnMsg); //調用上傳的方法 uploadPic(); uploadVideo(); submitValue = data.returnMsg; console.info(data); }, error:function(data){ if(data.status == "false"){ // alert("提交失敗"); console.info(data); submitValue = data.returnMsg; } } }) }
當用formData作為請求對象時，是進行文件上傳時用到，其使用的方法為：
function uploadPic(){ var formData = new FormData(); console.info(formData); formData.append("myfile",document.getElementById("file").files[0]); var uploadPicValue = ""; $.ajax({ url:"${uploadCoverUrl}", type:"POST", data:formData, contentType:false, dataType:'xml', /* *必須false才會避開jQuery對formdata的處理 */ processData:false, success:function(data){ console.info(data); //if(data.status == "true"){ alert("圖片上傳成功"); uploadPicValue = data.readyState; // } if(data.status == "true"){ //alert("data.msg"); uploadPicValue = data.readyState; $("#uploadPicBar").removeClass("active"); } }, error:function(data){ console.info(data); // alert("圖片上傳失敗"); uploadPicValue = data.readyState; //增加上傳失敗時的樣式 // document.getElementById("#uploadPicWord").innerHTML='上傳失敗'; $("#uploadPicWord").html('上傳失敗'); // alert("uploadPicValue"+uploadPicValue); } }) }
跨域問題：
當使用火狐調試時，報的異常為：
火狐瀏覽器錯誤提示： http://localhost:8080/IMP/static/images/partners/partner_bg.png [HTTP/1.1 404 Not Found 5ms] Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead[詳細了解] jquery-1.9.1.min.js:1 Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead[詳細了解] jquery-migrate-1.1.0.min.js:3 Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead[詳細了解] jquery.js:1 所用的 getPreventDefault() 已不贊成使用。請改用 defaultPrevented。 jquery-1.9.1.min.js:3:31293 FormData { } sendLiveForm:139:5 已攔截跨源請求：同源策略禁止讀取位於 http://114.215.100.148:8060/image?prefix=abcd 的遠程資源。（原因：CORS 頭缺少 'Access-Control-Allow-Origin'）。 （未知） FormData { } sendLiveForm:139:5 FormData { } sendLiveForm:139:5 Security wrapper denied access to property (void 0) on privileged Javascript object. Support for exposing privileged objects to untrusted content via __exposedProps__ is being gradually removed - use WebIDL bindings or Components.utils.cloneInto instead. Note that only the first denied property access from a given global object will be reported.
異常解析及解決方案：
跨域：
1.當協議，子域名，主域名，端口號中任意一個不相同時，都算作不同域
2.不同域之間相互請求資源，就算做“跨域”
3.JavaScript處於安全方面的考慮，不允許跨域調用其他頁面的對象。什么是跨域呢，簡單的理解
就是因為JavaScript同源策略的限制，a.com域名下的js無法操作b.com或是c.a.com域名下的對象
4.jsonp可用於解決主流瀏覽器的跨域數據訪問的問題...（具體需要上網，且該方法存在較強的局限性）
5。解決跨域方法--XHR2
HTML5提供的XMLHttpRequest Level2 已經實現了跨域訪問以及其他的一些新功能
IE10以下都不支持
在服務器端在一些小小的改造即可
header('Access-Control-Allow-Orign':*);
header('Access-Control-Allow-Methods:POST,GET');