• ajax数据请求的理解


    一,请求

    发送请求有两种方式:get 跟 post 。
    1.get仅请求数据,不需要服务端做处理,最后会返回指定的资源。
    2.post可以提交数据,服务端根据提交的数据做处理,再返回数据。

    二,创建XMLHttpRequest对象

    要想发起一个ajax请求,首先要创建一个请求对象,该对象提供发起请求所需要的方法,并用于装载返回的数据。

    创建对象的代码如下:
    /*
    * 创建XMLHttpRequest的方法
    * @function createXMLHttpRequest
    * @return XMLHttpRequest对象
    */
    function createXMLHttpRequest(){
    if (window.ActiveXObject){
    return new ActiveXObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest){
    return new XMLHttpRequest();
    }
    }
    三,处理监听或者数据请求和返回的状态

    XMLHTTPRequest对象的readyState属性是指返回XMLHTTP请求的当前状态。
    而当XMLHTTPRequest对象的readyState属性改变时,需要调用HandleStateChange函数,代码如下:

    xmlHttp.onreadystatechange= HandleStateChange;
    function HandleStateChange(){
    if (xmlHttp.readyState == 4){
    alert(xmlHttp.responseText);
    }
    }

    注意:
    readyState属性表示返回XMLHTTP请求的当前状态。
    各状态值意义如下:
    0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
    1 (初始化) 对象已建立,尚未调用send方法
    2 (发送数据) send方法已调用,但是当前的状态及http头未知
    3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
    4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

    每一个状态的改变都会触发onreadystatechange,需要进行判断,当状态码为4时,说明数据接收完毕,可以开始进行数据处理。

    四,创建请求时设置数据传输的方法和路径

    创建请求时设置数据传输,有两种get和post方式。
    
    1,get请求:
               xmlHttp.open('GET','ajax.txt',true);
    
            第一个参数为请求的方式,例如:POST、GET、PUT及PROPFIND。大小写不敏感。 
            第二个参数为请求的地址,可以为绝对地址也可以为相对地址。 
            第三个参数为布尔型,指定此请求是否为异步方式,默认为true。如果为真,当状态改变时会调用onreadystatechange属性指定的回调函数。
            后面还可以再附带两个参数,仅在服务器要求验证时才提供,分别为用户名及密码。
    2,post请求:
               POST请求,通常会提交数据到一个后台脚本页面,如asp、php、jsp等等,页面脚本处理完成后会返回数据。如:
               xmlHttp.open('POST','ajax.php',true);
    
            注意,POST请求需要设置请求头,且请求头必须在open方法之后设置,设置请求头的方法是setRequestHeader,传递两个参数,第一个是请求头字段名,第二个参数是该字段的值,根据实际情况设置不同的值。通常会设置如下:
              xmlHttp.setRequestHeader('CONTENT-TYPE','application/x-www-form-urlencoded');
    

    五,发送请求

    发送请求,方法是send()。对于GET请求,该方法不需要提供参数,如果是POST请求,则将提交的数据作为参数发送,通常是JSON格式。
    下面代码表示通过send发送一个请求:
    xmlHttp.send();

    如果是POST数据,如发送名/值对{foo:'bar'}到服务器,可以这样写:xmlHttp.send('{"foo":"bar"}');

    如果只是简单的字符串,则将整个字符串作为参数传递即可,如传递"a=b":xmlHttp.send('a=b');

    六,总结

    基本步骤就是:
    1、创建XMLHTTPRequest对象。
    2、定义状态变化时的处理函数。
    3、创建请求。
    4、发送请求。

  • 相关阅读:
    福大软工1816 · 第五次作业
    福大软工1816
    福大软工1816 · 第三次作业
    福大软工1816 · 第二次作业
    福大软工1816 · 第一次作业
    1/10
    福大软工 · 第七次作业
    福大软工 · 第八次作业(课堂实战)- 项目UML设计(团队)
    2018软工第六次作业
    福大软工1816 · 第五次作业
  • 原文地址:https://www.cnblogs.com/wangshichuan/p/4052400.html
Copyright © 2020-2023  润新知