初探AJAX - 簡書

AJAX 是一種在無需重新加載整個網(wǎng)頁的情況下举娩，能夠更新部分網(wǎng)頁的技術(shù)艘希。

如何發(fā)送請求

常用的五種方法

用form表單可以發(fā)發(fā)送GET和POST請求請求促绵，但是會刷新頁面或新開頁面

<body>
<form action="xxx" method=get>  //get或post
    <input type="password" name="password">
    <input type="sumbit">
</form>
<body>

查看get/post的路徑到開發(fā)者工具看死遭，記得點view source才能查看路徑鞠眉。

用a標(biāo)簽可以發(fā)get請求澄峰，但是也會刷新頁面或新開頁面
用img可以發(fā) get 請求嫉沽，但是只能以圖片的形式展示
用link可以發(fā) get 請求，但是只能以CSS俏竞、favicon 的形式展示绸硕，而且必須放到頁面里面
用script可以發(fā) get 請求，但是只能以腳本的形式運行

上面的方法雖然都是可以發(fā)起請求魂毁，但是太限制了玻佩。那么，有沒有什么方式可以實現(xiàn)：

get席楚、post咬崔、put、delete 請求都行
想以什么形式展示就以什么形式展示

有的烦秩，就是XMLHttpRequestAPI

這個API是IE 5 率先在 JS 中引入 ActiveX 對象（API）垮斯，使得 JS 可以直接發(fā)起 HTTP 請求。
隨后 Mozilla只祠、 Safari兜蠕、 Opera 也跟進(jìn)了，取名XMLHttpRequest 抛寝，并被納入 W3C 規(guī)范.

XMLHttpRequest是一個函數(shù)熊杨，而且是一個構(gòu)造函數(shù)，它是window下的一個全局對象

AJAX(async javascript and XML)

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

使用 XMLHttpRequest對象的open方法發(fā)送HTTP請求

 myButton=addEventListener('click',(e)=>{
   let request=new XMLHttpRequest() //聲明XMLHttpRequest對象
   request.open('GET','/xxx') //初始化request
   request.send()
 })

這里有個有趣的點盗舰，就是即使把open()的method參數(shù)換成fuck晶府，我們一樣可以發(fā)起請求，但服務(wù)器不接收~

服務(wù)器返回 XML 格式的字符串

這種格式應(yīng)該是已經(jīng)失傳了的钻趋，但是我們可以嘗試做一下

} else if(path==='/xxx'){
        response.statusCode=200
        response,setHeader('Content-Type','text/xml')
        response.write(`
          <?xml version="1.0" encoding="UTF-8"?>
            <note>
              <to>Tove</to>
              <from>phoebe</from>
              <heading>Reminder</heading>
              <body>hello,World!</body>
            </note>
          `)
        response.end()

這種格式現(xiàn)在很少前端會再使用了川陆，原因是：

XML文件龐大，文件格式復(fù)雜爷绘，傳輸占帶寬书劝；
服務(wù)器端和客戶端都需要花費大量代碼來解析XML进倍，導(dǎo)致服務(wù)器端和客戶端代碼變得異常復(fù)雜且不易維護(hù)；
客戶端不同瀏覽器之間解析XML的方式不一致购对，需要重復(fù)編寫很多代碼猾昆；
服務(wù)器端和客戶端解析XML花費較多的資源和時間。

XMLHttpRequest實例的屬性

readyState

這個屬性存有 XMLHttpRequest 的狀態(tài)信息骡苞。

一般我們需要熟記狀態(tài)4即可垂蜗。

readystatechange

每當(dāng) readyState 屬性改變時，就會觸發(fā) onreadystatechange 事件解幽，調(diào)用該函數(shù)贴见。

responseText

這個屬性返回從服務(wù)器接收到的字符串，它包含對文本的請求的響應(yīng)躲株，如果請求不成功或尚未發(fā)送片部，則返回null。

JSON(數(shù)據(jù)交換語言)

語法

JavaScript	Json
undefined	沒有undefined
null	null
['a','b']	["a","b"]
function fn(){}	沒有function
{name:'phoebe'}	{"name":"phoebe"}
'phoebe'	"phoebe"
var a={} a.self=a	搞不定(沒有變量)
{--proto--}	沒有原型鏈

JavaScript和Json的區(qū)別

JavaScript	Json
undefined	沒有undefined
null	null
['a','b']	["a","b"]
function fn(){}	沒有function
{name:'phoebe'}	{"name":"phoebe"}
'phoebe'	"phoebe"
var a={} a.self=a	搞不定(沒有變量)
{--proto--}	沒有原型鏈

JSON沒有引進(jìn)JavaScript的function和undefined
JSON的字符串首尾必須是""

} else if(path==='/xxx'){
response.statusCode=200
response,setHeader('Content-Type','text/xml')
response.write(`
{
  "note":{
    "to":"小谷"霜定，
    "from":"方方"档悠，
    "heading":"打招呼"，
    "content":"hi"
  }
}  
  `)
//注意望浩！這是返回一段字符串辖所，不是返回對象。這是一段符合json對象語法的字符串

myButton=addEventListener('click',(e)=>{
  let request=new XMLHttpRequest() //聲明XMLHttpRequest對象
  request.open('GET','/xxx') 
  request.send()
  request.onreadystatechange=()=>{
    if (request.readyState===4){
        console.log('請求響應(yīng)都完畢了')
        if (request.status>=200&&request.status<300) {
            let string=request.responseText
            //把符合JSON的語法的字符串轉(zhuǎn)換成JS對應(yīng)的值
            let object=window.JSON.pare(string)
            //JSON.parse 是瀏覽器提供的
        }else if(request.status>=400){
            console.log('說明請求失敗了')
        }
    }
  }
})

同源政策

瀏覽器必須保證只有協(xié)議+端口+域名一模一樣才允許發(fā) AJAX 請求

例：

http://baidu.com 可以向 http://www.baidu.com 發(fā) AJAX 請求嗎? no

http://baidu.com:80 可以向 http://baidu.com:81 發(fā) AJAX 請求嗎? no

AJAX

語法

  let request = new XMLHttpRequest()
  request.open('get', 'http://jack.com:8002/xxx') // 配置request
  request.send()
  request.onreadystatechange = ()=>{
    if(request.readyState === 4){
      if(request.status >= 200 && request.status < 300){
        let string = request.responseText
        // 把符合 JSON 語法的字符串轉(zhuǎn)換成 JS 對應(yīng)的值
        let object = window.JSON.parse(string) 
        // JSON.parse 是瀏覽器提供的
      }
    }
  }
})

使用AJAX實現(xiàn)兩個網(wǎng)站之間的交流(跨站資源共享)

只需在后臺代碼使用CORS(cross-origin resource sharing) 跨域請求

response.setHeader('Access-Control-Allow-Origin','http://frank.com:8001')

//后臺代碼
  } else if(path==='/xxx'){
    response.statusCode=200
    response,setHeader('Content-Type','text/json;charset=utf-8')
    response.setHeader('Access-Control-Allow-Origin','http://frank.com:8001') //響應(yīng)頭磨德。CORS 跨域
    response.write(`
    {
      "note":{
        "to":"小谷"缘回，
        "from":"方方"，
        "heading":"打招呼"典挑，
        "content":"hi"
      }
    }  
      `)//注意酥宴！這是返回一段字符串，不是返回對象您觉。這是一段符合json對象語法的字符串
    response.end()

若是想要實現(xiàn)所有網(wǎng)站都可訪問幅虑，只需

`response.setHeader('Access-Control-Allow-Origin','http://frank.com:8001',*)`
//在末尾加*