欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

AJAX请求

程序员文章站 2022-07-12 18:58:20
...

AJAX: Asyncchronous Javascript + XMLL

XMLHttpRequest对象(XHR)

以异步的方式从服务器获取数据,获取新数据后,通过DOM的方式将新数据插入到页面中。

1. 新建XHR对象

  • IE7+、现代浏览器d都支持原生的XHR对象

var xhr = new XMLHttpRequest();

2. open(method, url, boolean)

  • method: 发送请求的类型(get、post、delete、put等)
  • url: 请求URL(相对路径是相对于当前页面或者绝对路径)
  • boolean: 是否异步发送请求

3. send():一个参数,作为请求主体发送的数据,或者为null

收到相应请求后,响应数据会自动填充XHR对象的属性。

  • responseTetx 作为响应主体被返回的文本。
  • responseXML 响应类型是text/xml或者application/xml,保存包含响应数据的XML DOM文档。
  • status HTTP响应状态
  • statusText HTTP响应状态说明

4. 同步方式请求

var xhr = new XMLHttpRequest();
xhr.open('get', 'example.json', false);
xhr.send(null);

if((xhr.status > 200 && xhr.status < 300) || xhr.status == 304){
        //xhr.responseText;
        //通过检测xhr.status来检测请求返回状态,不要依赖statusText,因为跨浏览器时statusText不可靠
}else{
        //请求错误, 输出错误log:xhr.status
}

5. 异步方式请求

异步请求,检测XHR对象的<code>readyState</code>属性,该属性表示请求/响应过程中的当前活动阶段。

  • 0 : 未初始化。尚未调用open()方法。
  • 1 : 启动。已经调用open()方法, 但未调用send()方法。
  • 2 : 发送。已经调用send()方法, 但未接收到响应。
  • 3 : 接收。已经接收到部分响应数据。
  • 4 : 完成。已经接收到全部响应数据,已经可以在客户端使用。

readyState值变化都会触发readystatechange时间

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState == 4){
    if(xhr.status > 200 && xhr.status < 300 || xhr.status == 304){
      alert(xhr.reponseText);
    }else{
      alert("Request was unsuccessful: " + xhr.status);
  }
}
xhr.open('get', 'example.json', true);
xhr.send(null);

6. 取消异步请求

xhr.abort()

7.HTTP头部信息

  • Accept 浏览器处理的内容类型
  • Accept-Charset 显示的字符集
  • Accept-Econding 处理的压缩编码
  • Connection 与服务器之间的连接类型
  • Cookie Cookie设置
  • Host 发出请求所在的域
  • Referer 发出请求坐在的URI

xhr.setRequestHeader('HeaderName', 'HeaderVal'); 使用自定义的头部字段名称,有些浏览器禁止修改默认的头部字段 。
xhr.getResponseHeader('HeaderName');
xhr.getAllResponseHeaders();


function create_connect_obj(){
    if(window.ActiveXObject!='undefined' && window.ActiveXObject!=undefined){
        return new ActiveXObject('Microsoft.XMLHTTP');
    }else if(window.XMLHttpRequest!='undefined' && window.XMLHttpRequest!=undefined){
        return new XMLHttpRequest();
    }
}

var doget=function(url,data,success,fail){
    var conn=create_connect_obj();
    if(typeof(data)=='object'){
        var str='';
        for(var i in data){
            str+='&'+i+'='+data[i];
        }
        str=str.substr(1);
        if(url.indexOf('?')!=-1){
            url+=str;
        }else{
            url+='?'+str;
        }
    }else if(typeof(data)=='string'){
        if(url.indexOf('?')!=-1){
            url+=data;
        }else{
            url+='?'+data;
        }
    }
    conn.open('GET',url);
    conn.send(null);
    conn.onreadystatechange=function(){
        if(conn.readyState==4 && conn.status==200){
            if(typeof(data)=='function'){
                data(conn.response);
            }else if(typeof(success)=='function'){
                success(conn.response); //success
            }
        }else{
            if(typeof(fail)=='function'){   //fail
                fail(); 
            }
        }
    }
}

var dopost=function(url,data,success,fail){
    var conn=create_connect_obj();
    conn.open('POST',url);
    conn.setRequestHeader('Content-type','application/x-www-form-urlencoded');

    if(typeof(data)=='object'){
        var str='';
        for(var i in data){
            str+='&'+i+'='+data[i];
        }
        str=str.substr(1);
        conn.send(data);
    }else if(typeof(data)=='string'){
        conn.send(data);
    }else{
        conn.send(null);
    }
    conn.onreadystatechange=function(){
        if(conn.readyState==4 && conn.status==200){
            if(typeof(data)=='function'){
                data(conn.response);
            }else if(typeof(success)=='function'){
                success(conn.response); //success
            }
        }else{
            if(typeof(fail)=='function'){   //fail
                fail(); 
            }
        }
    }
}

上一篇: 测试工具2

下一篇: 网络测试工具