[AJAX]AJAX的入門學習
AJAX入門
聽了方老師的課程，配上了阮一峰阮老師的教程食用，整理記錄一些使用AJAX所需的知識點。
什麽是AJAX
Asynchronous JavaScript and XML 的縮寫，指的是通過 JavaScript 的異步通信，從服務器獲取 XML 文檔從中提取數據，再更新當前網頁的對應部分，而不用刷新整個網頁。
為什麽使用AJAX
首先整理總結一下主要發送HTTP請求的方式及其優缺點
form可以發請求，但是會刷新頁面或新開頁面a可以發 get 請求，但是也會刷新頁面或新開頁面img可以發 get 請求，但是只能以圖片的形式展示link可以發 get 請求，但是只能以 CSS、favicon 的形式展示script(JSONP) 可以發 get 請求，但是只能以腳本的形式運行AJAX不僅僅可以發送get請求，還可以發送post/put/delete請求；而且可以只刷新局部，不會刷新頁面。利用CORS還可以規避同源策略，實現跨源訪問。
使用方式
一個完整的使用AJAX完成HTTP請求的流程步驟為：
1.創建 XMLHttpRequest 實例
2.發出 HTTP 請求
3.接收服務器傳回的數據
4.更新網頁數據
下面就是一個AJAX例子：
前端：
// 創建一個XMLHTTPRequest實例對象 let request = new XMLHttpRequest() // 監聽請求狀態 request.onreadystatechange = function(){ // 通信成功時，狀態值為4 if (request.readyState === 4){ if (request.status === 200){ console.log(request.responseText); let string = request.responseText //把符合JSON語法的字符串轉換成JS對應的值 let obj = window.JSON.parse(string) console.log(obj) } else { console.error(request.statusText); } } }; // open()方法用於指定 HTTP 請求的參數，或者說初始化 XMLHttpRequest 實例對象 request.open(‘GET‘,‘/xx‘) // send()方法用於實際發出 HTTP 請求。 request.send()
服務器：
...
if(path === ‘/xxx‘){
response.setHeader(‘Content-type‘,‘text/html;charset=utf-8‘)
response.statusCode = 200
response.write(`
{
"people":{
"name":"ajax"
}
}
`)
response.end()
}更多參數可以參考阮一峰老師的博客
使用JSON
關於JSON的學習可以看官方文檔。
JAX 通過原生的XMLHttpRequest對象發出 HTTP 請求，得到服務器返回的數據後，再進行處理。現在，服務器返回的都是 JSON 格式的數據，XML 格式已經過時了
註意
服務器返回的並不是JSON對象！
服務器響應的是字符串，如上面的例子中：
...
response.write(`
{
"people":{
"name":"ajax"
}
}
`)
...他只是符合JSON對象語法標準的字符串，不是對象。
如果要讓他變成我們需要的值，則需要：
let string = request.responseText
//把符合JSON語法的字符串轉換成JS對應的值
// 這裏就把字符串轉化成了一個JS對象
let obj = window.JSON.parse(string)同源/跨源
同源政策規定，AJAX請求只能發給同源的網址，否則就報錯。
CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）,可以使用CORS規避同源限制。
關於如何跨源以及更詳細的參數可以參考阮老師的另一篇博客
下面這個例子使用了最簡便的方法：給服務器端response的header設置Access-Control-Allow-Origin:
...
if(path === ‘/xxx‘){
response.setHeader(‘Content-type‘,‘text/html;charset=utf-8‘)
response.statusCode = 200
// here
response.setHeader(‘Access-Control-Allow-Origin‘:‘http://frank.com:8081‘)
response.write(`
{
"people":{
"name":"ajax"
}
}
`)
response.end()
}下面分別是AJAX的同源、跨源的demo：
同源
請求方：http://frank.com:8081
響應方：http://frank.com/xx:8081
前端代碼：
let request = new XMLHttpRequest()
request.onreadystatechange = function(){
// 通信成功時，狀態值為4
if (request.readyState === 4){
if (request.status === 200){
console.log(request.responseText);
let string = request.responseText
//把符合JSON語法的字符串轉換成JS對應的值
let obj = window.JSON.parse(string)
console.log(obj)
} else {
console.error(request.statusText);
}
}
};
request.open(‘GET‘,‘/xx‘)
request.send()後臺：
...
if(path === ‘/xxx‘){
response.setHeader(‘Content-type‘,‘text/html;charset=utf-8‘)
response.statusCode = 200
response.write(`
{
"people":{
"name":"ajax"
}
}
`)
response.end()
}跨源(CORS):
請求方：http://frank.com:8081
響應方：http://www.baidu.com:8081
前端代碼：
let request = new XMLHttpRequest()
request.onreadystatechange = function(){
// 通信成功時，狀態值為4
if (request.readyState === 4){
if (request.status === 200){
console.log(request.responseText);
let string = request.responseText
//把符合JSON語法的字符串轉換成JS對應的值
let obj = window.JSON.parse(string)
console.log(obj)
} else {
console.error(request.statusText);
}
}
};
request.open(‘GET‘,‘http://www.baidu.com:8081‘)
request.send()後臺：
...
if(path === ‘/xxx‘){
response.setHeader(‘Content-type‘,‘text/html;charset=utf-8‘)
response.statusCode = 200
response.setHeader(‘Access-Control-Allow-Origin‘:‘http://frank.com:8081‘)
response.write(`
{
"people":{
"name":"ajax"
}
}
`)
response.end()
}本篇入門學習AJAX的文章就到此結束啦~。
[AJAX]AJAX的入門學習