javascript知识巩固------ajax和跨域

手写XMLHttpRequest发送一个请求

//GET请求
function get(url,callback){
    const xhr = new XMLHttpRequest(); 
    xhr.open('GET',url,true)//true代表是异步的请求
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200 || xhr.status === 304){
            callback(response)
        }
    }
    xhr.send()
}

//POST请求
function post(url,data,callback){
    const xhr = new XMLHttpRequest()
    xhr.open('POST',url,true)
    xhr.setRequestHeader('Content-Type':"application/x-www-form-urlencoded")
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200 || xhr.status === 304){
            callback(response)
        }
    }
    xhr.send()
}

跨域

• 同源策略：ajax请求时，浏览器要求当前网页和server端必须同源（安全）
• 同源：协议、域名、端口，三者必须一致
• 注意：加载图片、css和js可无视同源策略，这三者可以跨域（例如CDN地址的引入）。
  <img src=跨域的图片地址/>
<link href=跨域的css地址/>
<script src=跨域的js地址></script>
• script标签可以实现JSONP
• 注意：所有的跨域，都必须经过服务器端的允许和配合。未经服务器端允许就实现跨域，说明浏览器有漏洞或危险信号。
• JSONP：script标签可以绕过跨域限制+服务器可以任意动态拼接数据返回
  用jQuery实现jsonp

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

• CORS-服务端设置http header

	response.setHeader("Access-Control-Allow-Origin", "*");

注意：一般不建议使用通配符*，这里只是简单描述下所以暂时用*。

实现ajax的几种工具

• jQuery
• 进行fetch请求

	fetch(url)
		.then(function(response){
			return response.json()
		})
		.then(function(myJson){
			console.log(myJson)
		})

• axios