Ajax 在页面不刷新的情况下 获取输出数据

如何和后端交互
1.form 表单提交
2.ajax
3.websocket

ajax方法
1、XMLHttprequest
2、fetch (兼容性)

常见ajax用法
GET
var xhr = new XMLHttpRequest()
xhr.open("GET","/login?username=jirengu&password=123",true) (1.请求方式GET或POST, 2.请求地址内容资源/xxx/xxx, 3.true异步 false同步)
xhr.send()
xhr.addEventListener('load',function(){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
var data = xhr.responseText
console.log(data)
}else{
console.log("error")
}
})

POST
var xhr = new XMLHttpRequest()
xhr.open("POST","/login",true) (1.请求方式GET或POST, 2.请求地址内容资源/xxx/xxx, 3.true异步 false同步)
xhr.send('username=jirengu&password=123') //post拼装链接的方法
xhr.addEventListener('load',function(){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
var data = xhr.responseText
console.log(data)
}else{
console.log("error")
}
})

xhr.status //查看服务器状态码
服务器状态码：
200 数据正常
304 有缓存的状态
404 文件不存在
503 服务器收到请求 但是内部报错

200~300 是成功的
300~400 是重定向相关
400~500 文件的问题
500~503 服务器执行过程出错

xhr.onreadystatechange(){console.log(xhr.readyState)} //服务器交互过程 01234是交互完毕
0 未初始化
1 载入
2 载入完成
3 交互
4 完成

xhr.ontimout = 3000 //延时3秒执行
xhr.ontimeout = function () {} //超时 执行响应
xhr.onerror = function () {console.log("error")} //错误 执行响应

封装一个Ajax
function ajax(opts){
var url = opts.url
var type = opts.type || 'GET'
var dataType = opts.dataType || 'json'
var onsuccess = opts.onsuccess || function(){}
var onerror = opts.onerror || function(){}
var data = opts.data || {}

var dataStr = []
for(var key in data){
    dataStr.push(key + '=' + data[key])
}
dataStr = dataStr.join('&')

if(type === 'GET'){
    url += '?' + dataStr
}

var xhr = new XMLHttpRequest()
xhr.open(type, url, true)
xhr.onload = function(){
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        //成功了
        if(dataType === 'json'){
            onsuccess( JSON.parse(xhr.responseText))
        }else{
            onsuccess( xhr.responseText)
        }
    } else {
        onerror()
    }
}
xhr.onerror = onerror
if(type === 'POST'){
    xhr.send(dataStr)
}else{
    xhr.send()
}

}

ajax({
url: 'http://api.jirengu.com/weather.php',
data: {
city: '北京'
},
onsuccess: function(ret){
console.log(ret)
},
onerror: function(){
console.log('服务器异常')
}
})