动态数据

标签：客户端   hang   for   form   send   urlencode   十分   read   响应   

动态数据使用 Ajax 来实现，且通常为异步发生

动态数据建造的网页被称为数据驱动网页，即仅有框架，数据负责网页的内容

• XMLHttpRequest

  • readyState ： 请求状态：0 ( 未初始 )， 1 ( 开启 )， 2 ( 已传送 )， 3 ( 接受中 )， 4 ( 已载入 )

  • status ： HTTP 的请求状态 ： 404 ( 找不到文件 )， 200 ( OK )

  • onreadystatechange ： 请求状态改变时调用的函数引用

  • responseText ： 服务器返回的响应数据，格式为纯文本字符串

  • responseXML ： 服务器返回的响应数据，格式为 XML 节点树构成的对象

  • send() ： 传送请求，交给服务器处理

  • open() ： 准备请求，指定请求的类型，URL 及其他细节

  • abort() ： 取消请求

• GET 和 POST

  • GET ： 从服务器获取数据，send() 中参数为 null

  • POST ： 上传数据到服务器，send() 中参数为要传送的数据

• 自定义对象 AjaxRequest

  • request

  • getReadyState()

  • getStatus()

  • getResponseText()

  • getResponseXML()

  其中有个十分重要的方法 send()

  send(type, url, handler, postDataType, postData);
  

  • type 为 GET 或 POST，若为 GET，则省去后两项不写

  • handler 为处理响应的回调函数

  • postDataType 为被传送的数据类型

  • postData 为要传送的数据

  简单好用的方法，可以的话尽量使用 AjaxRequest 对象

• 示例

  • XMLHttpRequest 对象

    1 var request = new XMLHttpRequest();
    2 
    3 request.onreadystatechange = handler;

     

    • GET

      1 request.open("GET","xxx.xml",true);
      2 
      3 request.send(null);

      由于传送的值为空，该服务器返回数据，故 send() 中为 null

    • POST

      1 request.open("POST","xxx.php",true);
      2 
      3 request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
      4 
      5 request.send("待传输数据");

      由于需传输数据到服务器，指明数据类型，在 send() 中填入该数据

    • 是否传输成功

      1 if(request.status = 200){
      2     alert(request.responseText);
      3 }

      若状态为200，则传输成功，弹出响应内容

  • AjaxRequest对象

    var ajaxReq = new AjaxRequest();

    • GET

      ajaxReq.send("GET","xxx.xml",handleRequest);

      get 为从服务器获取数据，故脚本为客户端脚本 xml 文件

    • POST

      ajaxReq.send("POST","xxx.php",handleRequest,"application/x-www-form-urlencoded;charset=UTF-8",postData);

      post 为从客户端上传数据到服务器，需要服务器端脚本 php 文件，同时需指明数据类型， postData 格式为 "名称=值&名称=值&名称=值"，即 URL-encoded 格式

END~~~≥ω≤

动态数据

标签：客户端   hang   for   form   send   urlencode   十分   read   响应   

原文地址：http://www.cnblogs.com/veinyin/p/7607057.html