关于近期重温ajax的随记

关于近期重温ajax的随记

ajax底层原理是利用XMLHttpRequest对象来实现的,在js中四步完成与服务器的交互

1. 实例化xhr对象
2. 设置请求地址和请求方法
3. 发送请求
4. 注册响应事件,对服务器返回的数据进行渲染或者其他处理

    const xhr = new XMLHttpRequest()//实例化xhr对象
    xhr.open('method','url')//设置请求方法和地址
    xhr.send()//设置请求方法和地址
    xhr.onload(res=>{console.log(res)})//注册回调函数
    //如果是post请求需要加上设置请求头,而且传参方式也不同,
    
  </script>

post请求需要设置请求头,而且传参方式也不同,所以顺便总结一下post请求和get请求之前的区别:1.传参方式不同,get请求传参是在请求行内书写参数,而post是在send()请求体内书写参数;2.两者传输数据大小不同,get请求只能传输小文件,而post请求一般没有限制;3.两者传输快慢,get传输速度更快;4.传输安全性,post请求由于将参数切割成多块进行传输,安全性更强.

关于xhr对象的请求状态

onreadystatechange事件 : xhr请求状态变化会执行 ( 一次请求，会执行多次 )

1. 0(请求未初始化,未设置请求地址和方法,open()之前)
2. 1(服务器连接已建立,open()之后)
3. 2(请求已接收)
4. 3(请求已处理)
5. 4(请求已完成,而且响应已经就绪.onload事件就是在这里执行)