Ajax基础

传统网站存在的问题：

        网速慢的情况下，页面加载时间长，用户需要等待

        表单提交时，只要有一项不合格，需要重新填写所有表单内容

        页面跳转，页面重新加载，造成资源浪费，增加用户等待时间

Ajax概念：

        浏览器提供的一套方法，可以实现无刷新更新数据，提高用户体验

Ajax应用场景

        页面上拉加载更多数据

        列表数据无刷新分页

        表单项离开焦点数据验证

        搜索框提示文字下拉列表

Ajax运行环境

        需要运行在网站环境中才能生效，会使用node创建的服务器作为网站服务器

Ajax运行原理

        左边是传统网站，右边是Ajax

        

 

 

Ajax的实现步骤

        1.创建Ajax对象

var xhr=new XMLHttpRequest() 

        2.告诉Ajax请求地址及请求地址

 xhr.open('get','http://www.baidu')

        3.发送请求

 xhr.send(); 

        4.获取服务器端给与客户端响应的数据

xhr.οnlοad=function(){

        console.log(xhr.responseText);

    }

 

Ajax错误处理

        1.网络畅通，服务器能接收到服务器的请求，服务器返回的结果不是预期结果

                通过服务器返回的状态码进行错误处理

  xhr.οnlοad=function(){

        console.log(xhr.responseText);

        // status获取状态码,根据返回状态判断数据错误原因

        xhr.status();  

        // console.log(xhr.status)

        // 给一个错误提示

        if(xhr.status==400){

            alert('请求出错')

        }

    }

 

        2. 网络畅通，服务器没有接收到服务器的请求，返回404状态码

                检查地址是否错误

        3.网络畅通，服务器能接收到请求，服务器端返回500状态码

                服务器端错误，找后端代码错误

        4.网络中断，请求无法发送到服务器端

 

 // 服务器中断时触发onerror事件

    xhr.οnerrοr=function(){

        alert('网络中断，无法发送请求')

    }

Ajax状态码：表示Ajax请求的过程状态，ajax对象返回的

Http状态码：表示请求的处理结果，是服务器端返回的