[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); } ```