原生ajax

ajax的概念:Ajax即Asynchronous Javascript And XML（异步JavaScript和XML),实际上就是前端js语言与后端交互的手段

ajax常用的两种请求:直接上代码

ajax(get请求):

        // 第一步,创建XMLHttpRequest()对象
        var  xhr = new XMLHttpRequest();

        // 规定请求方式
        xhr.open('GET','http://127.0.0.1:3000'); 

        // 发送请求
        xhr.send();

        // 响应数据
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){  //两者必须都满足
                console.log('成功了');
            }
        }

ajax(post请求)

            // 创建xhr对象
            var xhr = new XMLHttpRequest();

            // 规定请求方式
            xhr.open('POST','http://127.0.0.1:3000/add');

            // 编码格式  (post请求独有)
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            // 发送请求
            xhr.send(请求参数);

            // 响应数据
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
     
                    // responseText 响应的数据
                    var res = xhr.responseText;
                    console.log(res);

    
                }
            }

ajax的优点:

1.ajax最大的优点就是局部刷新页面更新页面数据,大大减轻了服务器压力.

2.使用异步的方式与服务器交互,不会打扰用户的操作,提高用户体验

3.将一些后端的工作移到前端,减轻服务器与宽带的压力

4.ajax使页面和数据分离

5.不需要下载插件就可以运行,只需支持JavaScript的浏览器就可以