jQuery中的ajax使用示例

這篇文章主要為大家詳細介紹了jQuery中的ajax使用方法，文中示例代碼介紹的非常詳細，零基礎也能參考此文章，感興趣的小伙伴們可以參考一下。

ajax  --前后臺分離開發    api(程序應用集---數據接口)
局部刷新技術
異步請求（請求和后續代碼同時執行）  同步請求（等待請求執行完成在執行后續代碼）
專門做后臺數據的訪問的
先學習原生js的ajax  對象  XMLhttprequest 對象  后臺數據訪問的對象
原生js在訪問后臺數據的時候專門寫
1.實例化對象
2.open  連接遠程服務器  參數： method  請求的方式  get  post   url:請求的服務器路徑
async  當前的請求是同步還是異步  true  異步  false  同步   user  用戶名  password  密碼

1. send() 發送請求
   4.響應事件onreadystatechange
   5.渲染界面

   var http = new XMLHttpRequest();
    //2.建立服務器連接
    http.open("get", "./data/student.txt");
    //3.發送請求
    http.send();
    //4.服務器響應
    http.onreadystatechange = function () {
    //5.界面的渲染
    //判斷   獲取最終讀取完成狀態
    if (http.readyState == 4) {
    //返回的數據都是string
    //console.log(typeof http.responseText);
    console.log(http.response);
    //字符串類型的json數據轉化為對象型json  JSON.parse()
    var data = JSON.parse(http.response);
    console.log(data);
    //對象json轉化為string json  JSON.stringify
    //var strdata=JSON.stringify(data);
    //console.log(strdata);
    }
   
    }

   //原生ajax的封裝
   function method(meth, url, data, async, callback) {
       //對象的創建
       var http = new XMLHttpRequest();
       //判斷
       if (meth == "get") {
           //get 傳遞的數據在路徑的后邊  www.baidu.com?name=1&s=2
           if (data) {
               url += "?";
               url += data;
           }
           http.open(meth, url, async);
           http.send();
       }
       else {
           http.open(meth, url, async);
           //判斷是否有數據
           if (data) {
               http.send(data);
           }
           else {
               http.send();
           }
       }
       //響應
       http.onreadystatechange = function () {
           //狀態的判斷
           //狀態碼  200 success  500  服務器報錯 404  服務器端頁面丟失
           if (http.readyState == 4 && http.status == 200) {
               //將請求的數據返回
               callback(http.response);
           }
   
       }
   }

   //域名解析就是localhost   沒有寫端口號默認80端口
   //協議不一致會產生跨域
   //端口不一致也會導致跨域
   //域名不一致也會產生跨域
   /*
    * http://www.maodou.com/mao/list.html
    * https://www.maodou.com/mao/list.html
    * http://www.maodou.com:8080/mao/list.html
    * http://www.dou.com/mao/list.html
    * */

   //跨域怎樣解決
   //cros  資源共享   在后端進行配置   配置完成之后  可以直接訪問
   //例如php  在后端文件里面寫入一句話   header("Access-Control-Allow-Origin:");    代表所有
   //jsonp  跨域   在原生js里面叫src跨域  直接使用路徑
   //src可以連接遠程路徑
   //直接使用script  src屬性直接連接后臺的api進行遠程訪問
   //在路徑的后邊帶一個回調函數  就好了  后臺的處理傳回的回調函數
   //下面演示jsonp  跨域的問題

   //jsonp跨域原理是  在前端上使用src進行跨域   在接口上傳入要執行的回調函數  （后臺一定要處理回調函數  這樣  前臺的函數才有響應）
   2.jquery里面的ajax請求

   $.ajax({
        method:"get",//請求的方式  type
        url:"", //路徑
        data:{},//傳遞的參數
        dataType:"",//數據類型
        jsonpCallback:"",//jsonp  跨域的
        success:function (res){
        //成功
        },
        error:function (){
        //請求失敗
        },
        async:true//設置同步異步的
        });