AJAX 识XMLHttpRequest与发送AJAX请求与ajax提交数据

东篱把酒黄昏后，有暗香盈袖

---

前言

耳鸣，真烦人

---

一、XMLHttpRequest的readyState

readyState属性用于记录XMLHttpRequest对象的状态：

值 状态 描述
0 UNSENT 代理被创建，但尚未调用 open() 方法。（请求未初始化）
1 OPENED open() 方法已经被调用。（服务器连接已建立）
2 HEADERS_RECEIVED send() 方法已经被调用，并且头部和状态已经可获得。（请求已收到）
3 LOADING 下载中；responseText 属性已经包含部分数据。(正在处理请求)
4 DONE 下载操作已完成。(请求已完成且响应已就绪)

当XMLHttpRequest对象的readyState属性的值变成4的时候，表示这个AJAX请求以及响应，已经全部完成了

二、onreadyStatechange

当readyState发生改变时调用onreadyStatechange（）

三、发送AJAX请求步骤

四步

1. 第一步，创建AJAX核心对象，XMLHttpRequest

            var xhr = new XMLHttpRequest();

2. 第二步，注册回调函数

            xhr.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        //通过XMLHttpRequest对象的responseText属性可以获取到服务器响应回来的内容
                        //并且不管服务器响应回来的是什么，都以普通文本的形式获取（服务器可能响应回来，普通文本、XML、JSON、HTML....）
                        document.getElementById("myspan").innerHTML = this.responseText
                        this.responseText
                    }else {
                        alert(this.status)
                    }
                }
            }

3. 第三步，开启通道(open只是浏览器和服务器建立连接，通道打开，并不会发送请求)

            xhr.open("GET","/ajax/ajaxrequest2",true)

4. 第四步，发送请求

            xhr.send()

四、ajax提交数据

get请求提交数据是在“请求行”上提交，格式是url？name=value&name=value…
（HTTP协议中所规定，遵守即可）

			var usercode = document.getElementById("usercode").value;
            var username = document.getElementById("username").value;
            xhr.open("GET","/ajax/ajaxrequest2?usercode="+usercode+"&username="+username,true)

usercode<input type="text" id="usercode"><br>
username<input type="text" id="username">

五、ajax get请求缓存问题

对于低版本的ie浏览器来说，ajax的get请求可能会走缓存，存在缓存问题
什么是ajax 缓存问题？
在HTTP协议中是这样规定get请求的：get请求会被缓存起来
POST请求在HTTP协议中规定的是：POST请求不会被浏览器缓存
GET请求缓存的优点：直接从浏览器缓存中获取资源，不需要从服务器上重新加载资源，速度较快，用户体验好
GET请求缓存的缺点：无法实时获取最新的服务器资源
浏览器什么时候会走缓存？

1. 是一个GET请求
2. 请求路径已经被浏览器缓存过了，第二次发送请求的时候，这个路径没有变化，会走浏览器缓存
   如果是低版本的IE浏览器，如何解决ajax get请求的缓存问题？
   可以在url后加一个时间戳或随机数

// xhr.open("GET","/ajax/ajaxrequest2?t="+new Date().getTime()+"usercode="+usercode+"&username="+username,true)
   xhr.open("GET","/ajax/ajaxrequest2?t="+Math.random()+"usercode="+usercode+"&username="+username,true)
            

六、ajax发送post请求

修改open函数中的get即可

            xhr.open("POST","/ajax/ajaxrequest3",true)

在ajaxrequest3对应的方法中也应该重写doPost方法

get请求提交参数：请求行

post请求提交参数：请求体

模拟ajax提交form表单

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

可以在form中的enctype属性中拿到

<form enctype="application/x-www-form-urlencoded"></form>

如果不进行表单模拟就会如下：

并且拿不到数据

---

总结

xhr.readyState ajax中的XMLHttpRequest状态码
xhr.status Http协议中的状态码