08.ajax

ajax

文章目录

• ajax
• 题目
• 知识点
• • XMLHttpRequest
  • 状态码
  • 跨域，解决方案
  • • 同源策略
    • 跨域
    • JSONP
    • • jQuery事项jsonp

---

题目

1. 手写一个简易的ajax

function ajax (url){
    return new Promise((res,rej)=>{
        let xhr = new XMLHttpRequest()
        xhr.open('GET','/url',true)
        xhr.onreadystatechange=function(){
            if(xhr.readyState === 4 ){
                if(xhr.status === 200){
                    res(JSON.stringify(xhr.responseText))
                }else if(xhr.status === 404){
                    rej(new Error('404'))
                }
            }
        }
        xhr.send(null)
    })
}

3. 跨域的常用实现方式

知识点

XMLHttpRequest

let xhr = new XMLHttpRequest()
xhr.open('GET','/api',false)
xhr.onreadystatechange = function(){
	if(xhr.readyState === 4}{
		if(xhr.status === 200){
			alert(xhr.responseText)
		}
	}
}
xhr.send(null)

xhr.open('POST','data',true)
xhr.onreadystatechange = function(){

}
xhr.send(JOSN.stringfy{name:123})

状态码

xhr.readyState 状态
0 ， 没初始化
1， send()载入
2，send（）载入完成
3，解析中
4. 解析完成
xhr.status
200 完成

跨域，解决方案

同源策略

1. ajax请求，浏览器要求当前网页和server必须同源。
2. 同源：协议，域名，端口三者一致。
3. 加载图片css js 可以跨域
   • 
4. JSONP可以跨域

跨域

所有的跨域，必须经过server端允许和配合。

JSONP

jQuery事项jsonp

$.ajax({
	url:'../json',
	type:'jsonp'
	jsonpCallback:'callback',
	success:function(data){
	 console.log(data)
	}
})

js实现

window.callback = function (data){
	console.log(data)//跨域的信息
}