你的位置:首页 > 信息动态 > 新闻中心
信息动态
联系我们

使用原生XHR对象的基本步骤(四部曲)

2021/11/26 18:35:10

1、原生AJAX使用XHR对象的步骤

(1)创建XHR对象

       var xhr = new XMLHttpRequest( );

(2)监听XHR对象的状态改变事件

       xhr.onreadystatechange = function(){

              if( xhr.readyState===4){

                       if(xhr.status===200){ 完成且成功 }

                       else { 完成但失败 }        

                }

        }

(3)打开到服务器的连接

       xhr.open(method,  uri,  true)

(4)发起请求消息

        xhr.send( null/data )

        xhr.readyState:   0   1    2    3     4

        xhr.status:  0  =>  200

        xhr.responseText: ''   =>  '响应主体内容'

2.使用XHR发起GET请求

       var xhr = new XMLHttpRequest();

       xhr.onreadystatechange = function(){

                if(xhr.readyState===4){

                        if(xhr.status===200){ //响应完成且成功

                                doResponse(xhr.responseText);

                        }else{  //响应完成但不成功

                                alert('响应完成但失败!'+xhr.status);

                        }

                }

        }

        xhr.open('GET','xx.php?k1=v1&k2=v2',true);

        xhr.send( null );

注意:GET请求没有请求主体,所以send(null);若有请求数据,追加为URI后面的查询字符串。

3.使用XHR发起POST请求

        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function(){

                if(xhr.readyState===4){

                        if(xhr.status===200){ //响应完成且成功

                                doResponse(xhr.responseText);

                        }else{  //响应完成但不成功

                                alert('响应完成但失败!'+xhr.status);

                        }

                }

        }

        xhr.open('POST', 'xxx.php', true);          //URI无请求数据

       // 设置请求主体的内容类型

       xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

       xhr.send( 'k1=v1&k2=v2' );   //提交请求主体,必须编码后提交

注意:POST请求不在URI后面追加查询字符串——请求数据放在请求主体中send()——请求主体发送前必须设置Content-Type请求头部;且请求主体中的中文、特殊标点必须使用encodeURIComponent()函数进行编码。