js原生ajax的使用

布满荆棘的人生 2022-10-05 05:51 196阅读 0赞

当我们需要更新某一页面中的某一部分数据，如果我们刷新整个页面，就会使得用户得不到良好的体验，这是我们可以使用ajax技术。  
**ajax**  
Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。又称**局部刷新**技术，可以在不加载整个页面的情况下于服务器交换数据。属于异步请求，不会影响前台页面  
常用方法：open(method,url,async)；method：请求的类型；GET 或 POST；url：文件在服务器上的位置；async：true（异步）或 false（同步）；  
send(string)：如果为get请求 参数为空；如果是post请求参数为发送的数据（例如：地址栏？后面的拼接地址）；  
常用属性：onreadystatechange ：指定回调函数 用于监听；  
readyState ：就绪状态码 ，0：代表XMLHttpRequest 对象没有完成初始化；1：XMLHttpRequest 对象发送请求；2：请求发送完成；3：开始读取响应；4：响应结束；  
status:HTTP状态码 只有当服务器相应正常 status为200时，才可以处理服务器数据  
responseText：接收服务器数据

创建ajax对象

var xmlHttp;
            //创建异步请求对象
            /*因为有些老版的浏览器不支持支持 XMLHttpRequest 对象
            	对于不支持XMLHttpRequest 对象的浏览器，则会创建ActiveXObject
            */
            if(window.XMLHttpRequest){
        
                xmlHttp=new XMLHttpRequest();
            }else if(window.ActiveXObject){
        
                xmlHttp=new ActiveXObject();
            }

开始请求

//开始请求
            function startRequest() {
        
                xmlHttp.onreadystatechange = handleStateChange;  // 绑定回调处理函数
                xmlHttp.open("GET", encodeURI("filmLogin.action?name="+name+"&pwd="+pwd));  // 打开连接 拼接地址
                xmlHttp.send(null);  // 发送请求
            }
    
            function handleStateChange() {
         // 监听服务器的回应
                // alert("状态码"+xmlHttp.readyState);
                if(xmlHttp.readyState==4){
          //只有当状态码为4的时候才是最佳处理
                    if(xmlHttp.status==200){
         //HTTP状态码 200：响应正常
                        var txt=xmlHttp.responseText;   //接收服务器数据
                      //接收数据后的处理代码...
                        }
                    }
                }
            }

总的来说可以分4步：1创建对象 ；2监听回调函数；3规定请求的类型、URL 以及是否异步处理请求，打开连接；4发送请求