AJAX实现过程
//1,创建对象
let xhr = new XMLHttpRequest()
//2,初始化http请求参数(请求方法,请求路径,是否异步)
xhr.open(method, url, true)
//3,发送请求(params是要发送的参数,如果不止一个参数,可以写成对象结构)
//如果是post请求,可能还要设置请求头的content-Type
//xhr.setRequestHeader('content-Type', 'application/x-www-form-urlencoded')
xhr.send(params)
//4,注册事件,注册onreadystatechange事件,状态改变时就会调用;监听请求状态,执行对应的回调函数
xhr.onreadystatechange = function() {
//readtstate === 4:请求已完成,且响应已就绪
if(xhr.readtstate === 4 && xhr.status === 200){
success(xhr.responseText)
}else if(xhr.readystate === 4 && xhr.state !== 200) {
error()
}
}
JSONP实现
跨域通信的方式:JSONP、WebSocket、CORS、Hash、postMessage。
//JSONP的原理:通过<script>标签的src属性来实现的,只支持get方法
function jsonp(url, data, callback) {
//callbackName是函数jsonp()第三个参数回调函数callback的名字
let callbackName = 'jsonp_' + Date.now() + Math.random().toString().substr(2,5)
//如果有get请求参数data,要用&做分隔符拼接起来
if(typeof data === 'object') {
let temArr = []
for(let key in data) {
let value = data[key]
temArr.push(key + "=" + value)
}
data = temArr.join('&')
}
let script = document.createElement('script')
script.type = 'text/javascript'
script.src = url + '?' + data + '&callback=' + callbackName
document.body.appendChild(script)
//在window对象上注册callbackName函数
window[callbackName] = function(data) {
//函数jsonp()第三个参数是回调函数,执行回调函数
callback(data)
//执行完毕要删除
delete window[callbackName]
//删除完毕移除创建的标签
document.body.rermoveChild(script)
}
}