ajax

学习笔记其他

ajax

  • 线上mock数据平台
  • ajax事件函数
    • xhr.onreadystatechange 状态发生变化触发
    • xhr.onload 加载完成后触发
  • 取response数据
    • xhr.response
    • xhr.responseText
    • xhr.responseXML
//get
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://api.jirengu.com/weather.php', true)
xhr.onload = function(){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
//成功了
console.log(xhr.responseText)
} else {
console.log('服务器异常')
}
}
xhr.onerror = function(){
console.log('服务器异常')
}
xhr.send()
//post
var xhr = new XMLHttpRequest()
xhr.timeout = 3000 //可选,设置xhr请求的超时时间
xhr.open('POST', '/register', true)
xhr.onload = function(e) {
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
console.log(this.responseText)
}
}
//可选
xhr.ontimeout = function(e) {
console.log('请求超时')
}
//可选
xhr.onerror = function(e) {
console.log('连接失败')
}
//可选
xhr.upload.onprogress = function(e) {
//如果是上传文件,可以获取上传进度
}
xhr.send('username=jirengu&password=123456')

fetch

跨域

绕过浏览器的同源策略获取数据

  • JSONP
    • 是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行 提前在页面上声明一个函数,函数名通过接口传参的方式传给后台,后台解析到函数名后在原始数据上「包裹」这个函数名,发送给前端。换句话说,JSONP 需要对应接口的后端的配合才能实现。
  • CORS 后端添加声明,允许哪些域使用我的数据。
  • postMessage
  • 本地谷歌浏览器临时解决跨域
    • 属性>目标>输入 —disable-web-security —user-data-dir=C:\MyChromeDevUserData