瀏覽器的同源政策限制:端口,域名洒疚,協(xié)議 ,只要一個不一樣就跨域
前后端如何通信:
- Ajax : 短連接
- Websocket : 協(xié)議 http https (SSL) file socket.io 長連接殃姓,雙向的凡蚜。
- CORS fetch()
Ajax實現(xiàn)
<script>
function ajax(options){
// 定義一個操作對象
var pramas = {
url:'',
type: 'get',
data: {},
success: function (data) {},
error: function (err) {},
}
// 對象屬性覆蓋
options = Object.assign(pramas, options)
// 傳入了要請求的地址才會開始做其他的事情
if(options.url){
// 拿到請求對象
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
var url = options.url, // htpp://www.baidu.com
type = options.type.toUpperCase(), // GET
data = options.data, // {name:"kk",age:12}
dataArr = []; // []
// 遍歷data對象
for(let key in data){
let value = key + '='+ data[key]
dataArr.push(value)
}
// dataArr = ["name=kk","age=12"]
// 判斷是否為get方式請求
if(type === "GET"){
url = url + "?" + dataArr.join('&')
// url = http://www.baidu.com?name=kk&age=12
// 初始化請求
xhr.open(type, url, true)
// 發(fā)送請求
xhr.send()
}
// 判斷是否為post請求方式
if(type === "POST"){
// 初始化一個請求
xhr.open(type,url, true)
// 設置請求頭
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
// 發(fā)送請求
xhr.send(dataArr.join('&'))
}
// 監(jiān)聽后臺返回過來的數(shù)據(jù)
xhr.onreadystatechange = function(ev){
// console.log(ev)
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { // 304未修改
// 如果請求成功之后,回調(diào)我們的success函數(shù)
options.success(xhr.responseText)
}else {
// 如果請求失敗之后耻蛇,回調(diào)我們的error函數(shù)
options.error(xhr.responseText)
}
}
}
}
ajax({
url: "https://www.baidu.com",
//成功調(diào)用success函數(shù)
success:function(res){
console.log("這里是ok的")
console.log(res)
}
})
</script>
Object.assign()
- 用于將所有可枚舉屬性的值從一個或多個源對象復制到目標對象踪蹬。它將返回目標對象。
- 如果目標對象中的屬性具有相同的鍵臣咖,則屬性將被源中的屬性覆蓋跃捣。后來的源的屬性將類似地覆蓋早先的屬性。
toUpperCase
- 一個新的字符串夺蛇,在其中 stringObject 的所有小寫字符全部被轉(zhuǎn)換為了大寫字符疚漆。
toLowerCase
- 一個新的字符串,在其中 toLowerCase的所有大寫字符全部被轉(zhuǎn)換為了小寫字符刁赦。(和上面相反)
for in
- 用于對數(shù)組或者對象的屬性進行循環(huán)操作娶聘。
- 循環(huán)中的代碼每執(zhí)行一次,就會對數(shù)組的元素或者對象的屬性進行一次操作甚脉。