Ajax请求的五大步骤

一、创建请求对象

var xhr = new XMLHttpRequest();

二、调用open方法,设置请求头和请求路径

xhr.open("get","data.php");

三、设置请求头(post请求需要设置)

xhr.open("post","data.php");
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

四、监听响应完成事件

xhr.onreadystatechange = function(){
                xhr.onload = function(){
                    console.log(xhr.responseText); // 拿到响应体
                }
            }

五、发送请求(注:不能用button–会有自动跳转,要用input的type属性)

xhr.send();

上述过程为方便大家轻而易举记住,则转以下通俗的句子:
1、找电话机。
2、使用open选择拨号的方式及对方号码。
3、post拨号需要加密,get不需要。
4、完成拨号之后得到的信息。
5、拨号。
注:第四步中:onload 事件有兼容问题,IE8以及其之前的浏览器均无法使用,所以以下用readyState 和 status 优化
下列图片还有两种传参方式:

post

get

OVERRRRRRRRR!

更多推荐

Ajax请求的五大步骤——一看就会