[toc] ### 1. AJAX 概念：是一種在無需重新加載整個網頁的情況下，能夠局部更新網頁的技術 ### 2. 同步和異步 javascript: 從上至下同步執行 ajax: 異步執行 ### 3. 原生ajax ``` var url = 'https://www.easy-mock.com/mock/5bac6ddb0132334db7167176/demo/demo'; //1. 創建ajax核心對象 var xhr = new XMLHttpRequest(); //2. 與服務器建立連接 xhr.open("get", url); //3。向服務器發送請求 xhr.send(); //4. 服務器響應 xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var response = xhr.responseText; console.log(response); console.log(JSON.parse(response).data.name); } } ``` ### 4. jQuery-ajax #### 1. $.ajax() ``` $.ajax({ url: "", type: "get", dataType: "json", success: function(res){ console.log(res); }, error: function(xhr){ console.lo(xhr.status); } }) ``` #### 2. $.get() 獲取的data是一個js對象 ``` var url = "https://..."; $.get(url,function(data, status){ console.log(data); }) ``` #### 3. $.post() ``` $.post(url,(data,status)=>{ console.log(data); }).fail(data=>{ console.log(data.status); }) ``` ### 5. axios vue2.0版本推薦方法 #### 1. get ``` var url = "https://www.easy-mock.com/mock/5baf2b7fd71a4e533bffd03c/get/get"; axios.get(url).then(res=>{ console.log(res.data.data); }).catch(err=>{ console.log(err); }) ``` #### 2. post ``` axios.post(url, { name: "xx", age: '21' }) .then(function(res){ console.log(res); }) .catch(function(err){ console.log(err); }) ``` ### 6. 跨域 1. jsonp ``` $.ajax({ type: "method", url: "https://douban.uieee.com/v2/movie/top250", dataType: "jsonp", jsonp: "callback", success: function(data){ console.log(data.subjects); }, error: function(err){ console.log(err.status); } }) ``` 2. 服務器的解決方案 3. js中script標簽不受同源策略的影響也可以實現跨越 ``` var url = "https://douban.uieee.com/v2/movie/top250"; var script = document.createElement("script"); script.src = `${url}?&callback=handleResponse`; document.body.prepend(script); function handleResponse(res){ console.log(res); } ```