關(guān)于 AJAX

Jesse James Garrett 講如下技術(shù)取名叫做 AJAX：異步的 JavaScript 和 XML

  • 使用 XMLHttpRequest 發(fā)請(qǐng)求
  • 服務(wù)器返回 XML 格式的字符串
  • JS 解析 XML，并更新局部頁(yè)面

如何發(fā)請(qǐng)求

  1. 用 form 可以發(fā)請(qǐng)求，但是會(huì)刷新頁(yè)面或新開(kāi)頁(yè)面
<body>
  <form action="xxx" method="post">
    <input type="password" name="password">
    <input type="submit">
  </form>
</body>
  1. 用 a 可以發(fā) get 請(qǐng)求，但是也會(huì)刷新頁(yè)面或新開(kāi)頁(yè)面
<body>
  <a href="/xxx">click</a>
</body>
  1. 用 img 可以發(fā) get 請(qǐng)求，但是只能以圖片的形式展示
<body>
  <script>
    var image = document.createElement('img')
    image.src = '/xxx'
    document.body.appendChild(image)
    image.onload = function(){
      console.log('success')
    }
    image.onerror = function(){
      console.log('fail')
    }
  </script>
</body>
  1. 用 link 可以發(fā) get 請(qǐng)求，但是只能以 CSS、favicon 的形式展示
<body>
  <script>
    var link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = '/xxx'
    document.head.appendChild(link)
  </script>
</body>
  1. 用 script 可以發(fā) get 請(qǐng)求，但是只能以腳本的形式運(yùn)行
<body>
  <script>
    var script = document.createElement('script')
    script.src = '/xxx'
    document.body.appendChild(script)
  </script>
</body>

用 XMLHttpResquest 請(qǐng)求

<script>
  myButton.addEventListener('click',(e)=>{
    let request = new XMLHttpResquest()
    request.onreadystatechange = ()=>{
      if(request.readyState = 4){
        if(request.status >= 200 && request.status <300){
          console.log(request.responseText)
        }else if(request.status >= 400){
          console.log('請(qǐng)求失敗')
        }
      }
    }
    request.open('post','/xxx')
    request.send()
  })
</script>

同源策略和CORS跨域

只有 協(xié)議+端口+域名 一模一樣才允許發(fā) AJAX 請(qǐng)求。
比如： jack.com:8001 網(wǎng)站向 frank.com:8002 發(fā)起 AJAX 請(qǐng)求，
那么需要在 frank.com:8002 的后端添加代碼：
response.serHeader('Access-Control-Allow-Orign','http://frank.com:8001')
才能夠成功。

...
if(path === '/xxx'){
  response.statusCode = 200
  response.setHeader('Content-Type','text/jason;charest=utf-8')
  response.setHeader('Access-Control-Allow-Orign','http://frank.com:8001')
  response.write(`
    {
      "note"{
        "to": "小方"，
        "from": "小谷"，
        "note": "Hello"
      }
    }
  `)
  response.end()
}esle if(...){
  ...
}
...

JS操作請(qǐng)求與響應(yīng)

1.請(qǐng)求第一部分
XMLHttpRequest.open() 可以配置請(qǐng)求的方法，host，路徑。

2.設(shè)置請(qǐng)求第二部分請(qǐng)求頭
XMLHttpRequest.setRequestHeader() 是設(shè)置HTTP請(qǐng)求頭部的方法。此方法必須在 open()方法和 send()之間調(diào)用。如果多次對(duì)同一個(gè)請(qǐng)求頭賦值，只會(huì)生成一個(gè)合并了多個(gè)值的請(qǐng)求頭。
語(yǔ)法:

myReq.setRequestHeader(header, value);

<script>
  myButton.addEventListener('click',(e)=>{
    let request = new XMLHttpResquest()
    request.onreadystatechange = ()=>{
      if(request.readyState = 4){
        if(request.status >= 200 && request.status<300){
          console.log(request.responseText)
        }else if(request.status >= 400){
          console.log('請(qǐng)求失敗')
        }
      }
    }
    request.open('post','/xxx')
    request.setRequestHeader('frank','18')
    request.send()
  })
</script>

可以在開(kāi)發(fā)者工具看到請(qǐng)求頭為 frank ： 18

設(shè)置Content-Type:
request.setRequestHeader('Content-Type','x-www-form-urlencoded')

3.設(shè)置請(qǐng)求第四部分
XMLHttpRequest.send() 方法接受一個(gè)可選的參數(shù)，其作為請(qǐng)求主體；如果請(qǐng)求方法是 GET 或者 HEAD，則應(yīng)將請(qǐng)求主體設(shè)置為 null。

<script>
  myButton.addEventListener('click',(e)=>{
    let request = new XMLHttpResquest()
    request.onreadystatechange = ()=>{
      if(request.readyState = 4){
        if(request.status >= 200 && request.status <300){
          console.log(request.responseText)
        }else if(request.status >= 400){
          console.log('請(qǐng)求失敗')
        }
      }
    }
    request.open('post','/xxx')
    request.send('設(shè)置第四部分內(nèi)容')
  })
</script>

4.獲取請(qǐng)求的響應(yīng)
XMLHttpRequest.getAllResponseHeaders() 方法返回所有的響應(yīng)頭。
或者XMLHttpRequest.getAllResponseHeaders() 方法返回所有的響應(yīng)頭。
var myHeader = getResponseHeader(name)
status : 200
statusText: OK
responseText : 響應(yīng)的第四部分

封裝和使用

window.jQuery.ajax = function(method,url,body,successFn,failFn){
  let request = new XMLHttpResquest()
  request.onreadystatechange = ()=>{
    if(request.readyState = 4){
      if(request.status >= 200 && request.status <300){
        successFn.call(undefined,request.responseText)
      }else if(request.status >= 400){
        failFn.call(undefined,request)
      }
    }
  }
  request.open(method,url)
  request.send(body)  
}

myButton.addEventListener('click',(e)=>{
  winsow.jQuery.ajax(
    'post',
    '/xxx',
    'a=1',
    ()=>{conosle.log(1)},
    ()=>{conosle.log(2)}
  )
})
// 傳入 method url body successFn failFn 的值

做一點(diǎn)優(yōu)化

window.jQuery.ajax = function(options){
  let method = options.method
  let url = options.url
  let body = options.body
  let successFn = options.successFn
  let failFn = options.failFn

  let request = new XMLHttpResquest()
  request.onreadystatechange = ()=>{
    if(request.readyState = 4){
      if(request.status >= 200 && request.status <300){
        successFn.call(undefined,request.responseText)
      }else if(request.status >= 400){
        failFn.call(undefined,request)
      }
    }
  }
  request.open(method,url)
  request.send(body)  
}

myButton.addEventListener('click',(e)=>{
  window.jQuery.ajax({
    method: 'post',
    url: '/xxx',
    body: 'a=1',
    successFn: (x)=>{conosle.log(1)},
    failFn: (x)=>{conosle.log(2)} 
  }) 
})

如果 successFn 需要傳兩個(gè)參數(shù)

...
 successFn: (x)=>{
     f1.call(undefined,x)
     f2.call(undefined,x)    
},
...

傳 header

...
headers: {
          'Content-Type':'application/x-www-form-urlencoded',
          'frank': '18'
        }
...

// window.jQuery.ajax 調(diào)整
window.jQuery.ajax = function(options){
  let method = options.method
  let url = options.url
  let body = options.body
  let successFn = options.successFn
  let failFn = options.failFn
  let headers = options.headers

  let request = new XMLHttpResquest()
  request.onreadystatechange = ()=>{
    if(request.readyState = 4){
      if(request.status >= 200 && request.status <300){
        successFn.call(undefined,request.responseText)
      }else if(request.status >= 400){
        failFn.call(undefined,request)
      }
    }
  }
  request.open(method,url)
  for(let key in headers){
    let value = headers[key]
    request.setRequestHeader(key,value)
  } // 遍歷 headers 獲取 key 和 value
  request.send(body)  
}

對(duì)是否傳兩個(gè)參數(shù)做一個(gè)判斷

window.jQuery.ajax = function(options){
 // 假如傳了兩個(gè)參數(shù)，做一個(gè)判斷
 let url
 if(arguments.length === 1){
   url = options.url
 }else if(arguments === 2){
   url = argumrnts[0]
   options = argumrnts[1]
 }
 let method = options.method
 let url = options.url
 let body = options.body
 let successFn = options.successFn
 let failFn = options.failFn
 let headers = options.headers

 let request = new XMLHttpResquest()
 request.onreadystatechange = ()=>{
   if(request.readyState = 4){
     if(request.status >= 200 && request.status <300){
       successFn.call(undefined,request.responseText)
     }else if(request.status >= 400){
       failFn.call(undefined,request)
     }
   }
 }
 request.open(method,url)
 for(let key in headers){
   let value = headers[key]
   request.setHeader(key,value)
 }
 request.send(body)  
}

Promise

簡(jiǎn)化代碼，

myButton.addEventListener('click',(e)=>{
  window.jQuery.ajax({
    method: 'post',
    url: '/xxx',
  }).then(
  (request.responseText)=>{console.log(request.responseText)},
  (request)=>{console.log(error)}
  )
}) 
// 直接在后面跟 then ，第一個(gè)參數(shù)表示成功后執(zhí)行的函數(shù)，第二個(gè)參數(shù)表示失敗執(zhí)行的函數(shù)

// 可以繼續(xù)跟 then 再一次對(duì)結(jié)果進(jìn)行處理  then中文含義就是 然后
myButton.addEventListener('click',(e)=>{
  window.jQuery.ajax({
    method: 'post',
    url: '/xxx',
  }).then(
  (request.responseText)=>{console.log(request.responseText)},
  (request)=>{console.log(error)}
  )
}).then(
(上一次處理結(jié)果)=>{console.log(上一次處理結(jié)果)}，
(request)=>{console.log(error2)}
)

window.jQuery.ajax = function(options){
  return new Promise(function(resolve,reject){
    let url
    if(arguments.length === 1){
      url = options.url
    }else if(arguments === 2){
      url = argumrnts[0]
      options = argumrnts[1]
    }
    let method = options.method
    let url = options.url
    let body = options.body
    let headers = options.headers

    let request = new XMLHttpResquest()
    request.onreadystatechange = ()=>{
      if(request.readyState = 4){
        if(request.status >= 200 && request.status <300){
          resolve.call(undefined,request.responseText)
        }else if(request.status >= 400){
          reject.call(undefined,request)
        }
      }
    }
    request.open(method,url)
    for(let key in headers){
      let value = headers[key]
      request.setHeader(key,value)
    }
    request.send(body)         
  })   
}
// Promise接收一個(gè)函數(shù)，返回一個(gè)promise對(duì)象，有一個(gè) then 的屬性。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容