AJAX的JS与jQuery实现

AJAX是一种无需页面的刷新，即可从服务器获得数据并且插入到DOM中，从而带来更好的用户体验的技术。
AJAX技术的核心为XHR（XMLHttpRequest）对象。

如何实现？

JS方法：

1. 首先创建一个xhr对象：

var xhr=new XMLHttpRequest();

2. 加入监听事件监听当前xhr对象的readyState属性，判断当前请求或者响应进行的状态：

xhr.onreadystatechange=function () {
    if(xhr.readyState==4){
        if(((xhr.status<=200) && (xhr.status<300)) || (xhr.status==304)){
            console.log(xhr.responseText);
        }
    }
}

readyState属性的值：

0:还未启动请求。
1:已经启动请求，还未发送。
2:已经发送请求。
3:正在接收响应。
4:完成。

上述监听事件首先监听是否已经完成了ajax请求，如果已经完成，则判断xhr对象的状态属性是否为成功或者使用缓存，如果成功了，则就获得了服务器返回的数据。

3. 启动一个AJAX请求：

xhr.open("get","url",false);

使用open方法可以启动一个ajax请求，该方法需传入三个参数，请求的方式，请求的url，是否异步请求的布尔值。

4. 发送请求

xhr.send(null);

使用send方法可以发送请求，如果不需要在请求的主体中加入信息，则传入null值即可。

jQuery方法：

jQuery中的实现方式很简便，如下所示：

$.ajax({
    type: 'get',
    async: false,
    dataType: 'json',
    url: urlIp + "analysis?ip=" + nodeValue + "&click_type=" + clickType,
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        console.log(XMLHttpRequest, textStatus, errorThrown);
        alert("请求失败，请输入正确的搜索条件");
    },
    success: function (data) {
        console.log(data)
    }
})

上面代码中可以实现一个同步的get请求，error属性是请求失败的表现，success是请求成功的表现。url中可以加入传送给服务器的参数。