超碰97美女,一边打电话一边被操,精品999黄涉视频

原生ajax

    //創(chuàng)建異步對(duì)象  
    var xhr = new XMLHttpRequest();
    //設(shè)置請(qǐng)求基本信息，并加上請(qǐng)求頭
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.open('post', 'test.php' );
    //發(fā)送請(qǐng)求
    xhr.send('name=Lan&age=18');
    xhr.onreadystatechange = function () {
        // 這步為判斷服務(wù)器是否正確響應(yīng)
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
      } 
    };

jqueryAjax

var loginBtn =  document.getElementsByTagName("button")[0];
loginBtn.onclick = function(){
    ajax({
        type:"post",
        url:"test.php",
        data:"name=lan&pwd=123456",
        success:function(data){
           console.log(data);
        }
    });
}

fetch

fetch('http://www.mozotech.cn/bangbang/index/user/login', {
    method: 'post',
    headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams([
        ["username", "Lan"],["password", "123456"]
    ]).toString()
})
.then(res => {
    console.log(res);
    return res.text();
})
.then(data => {
    console.log(data);
})

axios

axios({
    method: 'post',
    url: '/abc/login',
    data: {
        userName: 'Lan',
        password: '123'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

同時(shí)發(fā)起多個(gè)請(qǐng)求：

image

對(duì)比

幾種方式的對(duì)比
ajax：
【優(yōu)點(diǎn)：局部更新；原生支持】
【缺點(diǎn)：可能破壞瀏覽器后退功能；嵌套回調(diào)】
jqueryAjax：
【在原生的ajax的基礎(chǔ)上進(jìn)行了封裝；支持jsonp】
fetch：
【優(yōu)點(diǎn)：解決回調(diào)地獄】
【缺點(diǎn)：API 偏底層，需要封裝;默認(rèn)不帶Cookie，需要手動(dòng)添加; 瀏覽器支持情況不是很友好，需要第三方的ployfill】
axios：
【幾乎完美】
axios的特點(diǎn)
支持瀏覽器和node.js
支持promise
能攔截請(qǐng)求和響應(yīng)
能轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
能取消請(qǐng)求
自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
瀏覽器端支持防止CSRF(跨站請(qǐng)求偽造)

`axios`提問

如何將axios異步請(qǐng)求同步化處理？

//使用 asyns/await 
async getHistoryData (data) {
 try {
   let res = await axios.get('/api/survey/list/', {
     params: data
   })
   this.tableData = res.data.result
   this.totalData = res.data.count
 } catch (err) {
   console.log(err)
   alert('請(qǐng)求出錯(cuò)！')
 }
}

為何官方推薦使用axios而不用vue-resource？

在Vue1.x中，官方推薦使用的ajax庫是vue-resource。到了Vue2.x，官方（尤大）推薦的ajax庫改為了Axios，按照說法是因?yàn)橐延幸粋€(gè)更完備的輪子，就不需要造一個(gè)新的。
你了解axios的原理嗎？有看過它的源碼嗎？

Axios源碼深度剖析
你有封裝過axios嗎？主要是封裝哪方面的？

具體config配置參考

image

到具體頁面中的應(yīng)用：

image
如何中斷（取消）axios的請(qǐng)求？

image
axios怎么解決跨域的問題？

image
- 如果 server 端是自己開發(fā)的，那么修改相關(guān)代碼支持跨域即可。如果不是自己開發(fā)的，那么可以自己寫個(gè)后端轉(zhuǎn)發(fā)該請(qǐng)求，用代理的方式實(shí)現(xiàn)。
- 跨域這個(gè)行為是瀏覽器禁止（瀏覽器不允許當(dāng)前頁面的所在的源去請(qǐng)求另一個(gè)源的數(shù)據(jù)）的，但是服務(wù)端并不禁止
- 源指協(xié)議、端口、域名。只要這個(gè)3個(gè)中有一個(gè)不同就是跨域。這里列舉一個(gè)經(jīng)典的列子：
```
協(xié)議跨域：
http://a.baidu.com訪問https://a.baidu.com；
端口跨域：
http://a.baidu.com:8080訪問http://a.baidu.com:80；
域名跨域：
http://a.baidu.com訪問http://b.baidu.com；
```
- 關(guān)鍵字:Access-control-Allow-origin、跨域
- 幾種解決跨域的方法
- A）開發(fā)模式下，可以在config中配置proxyTable即可
  
  image
- B）服務(wù)端基于spring實(shí)現(xiàn)
  
  image
- C） CORS：①即跨源資源共享，它定義了一種瀏覽器和服務(wù)器交互的方式來確定是否允許跨域請(qǐng)求。 ②它是一個(gè)妥協(xié)，有更大的靈活性，但比起簡(jiǎn)單地允許所有這些的要求來說更加安全。③但是CORS也具有一定的風(fēng)險(xiǎn)性，比如請(qǐng)求中只能說明來自于一個(gè)特定的域但不能驗(yàn)證是否可信，而且也容易被第三方入侵。 ④這里一般需要后端配合,開啟cors。一般各種語言都有類似的包。比如NodeJS的koa2-cors
  
  image
- D） Nginx代理proxy
  
  image
- E） express代理
  
  image
- 請(qǐng)求頭自動(dòng)攜帶cookie時(shí):config中配置withCredentials:true，否則為false【看到有人說：withCredentials為true的情況下，后端要設(shè)置Access-Control-Allow-Origin為你的源地址，例如http://localhost:8080，不能是*，而且還要設(shè)置header('Access-Control-Allow-Credentials: true')】
- config中配置qs：避開ajax信使請(qǐng)求，并兼容Android？
```
import Qs from 'qs'
```