关于Ajax的那些事

一、Ajax是什么？

Ajax是一种异步请求后台数据的web开发技术

二、Ajax原理

因为浏览器提供了XMLHttpRequest对象，使得浏览器可以发出http请求和接收http相应，期间并不影响浏览器做其他的事情，等收到XHR返回来的数据再渲染页面。

1、浏览器让xhr去跟服务器要点数据

2、浏览器接着做其他的事

3、xhr去向服务器请求数据

4、服务器返回数据给xhr

5、xhr通知浏览器数据回来了

6、浏览器收到xhr返回的数据渲染页面

三、使用Ajax

1、创建Ajax核心对象XMLHttpRequest

var xhr = null;

if(window.XMLHttpRequest){

    //兼容IE7，firefox, chrome, opera, safari

    xhr = new XMLHttpRequest();

}else{

    //兼容IE5 ，IE6

    xhr = new ActiveXObject("Microsoft.XMLHTTP")

}

2、向服务器发送请求

xhr.open(method,url,async)

send(string)  //post请求时才使用字符串，否则不用带参数

method:请求的类型，GET/POST

url:文件在服务器位置

async：true(异步)，false(同步)

注意：post请求必须设置请求头的格式内容

xhr.open("POST","test.html",true)

xhr.setRequestHeader("Content-type","application/x-www-form-urlencode")

xhr.send("fname = Henry&lname = Ford")

3、服务器相应处理

reponseText  获得字符串形式数据

reponseXML  获得XML形式数据格式

//同步处理

xhr.open("GET","info.txt",false)

xhr.send()

document.getElementById("myDiv").innerHTML = xhr.reponseText

//异步处理

xhr.onreadyState==4&xhr.status == 200;{

    if(xhr.readyState == 4 && xhr.status == 4){

        document.getElementById("myDiv").innerHTML = xhr.reponseText;

    }

}

readyState

readyState是XHRHttpRequest对象的一个属性，代表XHRHttpRequest的状态，共5个数字

0：未初始化--未调用open方法

1：启动--调用了open方法，还没有调用send方法

2：发送--调用了send方法，还没有接到响应

3：接收--已经接受到部分响应数据

4：完成--已经接收到全部相应数据，而且已经在客户端使用了

四、小结

其实这些在实际开发项目基本用不到的，除非一些老祖宗的项目，但也是每一个前端开发者必须掌握的，实际开发中对象框架都有相应的技术，比如jquery自带的ajax，vue中一般用axios等等，还有fetch用的人也很多。