动态数据

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

动态数据使用 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~~~≥ω≤

感谢您的阅读及指正，让我们一起进步。
欢迎联系我交流：veinyin@gmail.com
作者：VeinYin
博客地址：https://www.cnblogs.com/veinyin/
如需转载请注明出处。