向服务器发送请求
向服务器发送请求需要调用XMLHttpRequest 对象的 open() 和 send() 方法。
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
method
Get or Post
GET 更简单也更快，并且在大部分情况下都能用。
但在以下情况中，使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
/**
* 通过post方式提交
* */
function postSend(){
var value = document.getElementById("content").value;
alert(value);
//初始化XMLHttpRequest对象
createXMLHttpRequest();
//创建请求的URL
var url = "ajaxServlet"
//打开与服务器的连接，使用post方式
xhr.open("POST", url, true);
//post方式需要设置请求消息头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//设置处理响应的回调函数
xhr.onreadystatechange = processResponse;
//发送请求并设置参数，参数的设置为param=value的形式
xhr.send("value="+value);
}
/**
* 通过GET请求
* */
function getSend(){
var value = document.getElementById("content").value;
//alert(value);
//初始化XMLHttpRequest对象
createXMLHttpRequest();
alert("创建成功");
//创建请求的URL,get方式采用url拼接参数
var url = "ajaxServlet?value="+value;
xhr.open("GET", url, true);
//设置处理响应的回调函数
xhr.onreadystatechange = processResponse;
xhr.send(null);
}
/**
* 设定的回调函数
* */
function processResponse(){
//响应完成且响应正常
if(xhr.readyState == 1){
alert("XMLHttpRequest对象开始发送请求");
}else if(xhr.readyState == 2){
alert("XMLHttpRequest对象的请求发送完成");
}else if(xhr.readyState == 3){
alert("XMLHttpRequest对象开始读取服务器的响应");
}else if(xhr.readyState == 4){
alert("XMLHttpRequest对象读取服务器响应结束");
if(xhr.status == 200){
//信息已经成功返回，开始处理信息
//先捕获下所有的请求头
var headers = xhr.getAllResponseHeaders();
alert("所有的请求头= "+headers);
//得到服务器返回的信息
var infor = xhr.responseText;
alert("服务器端的响应 = "+infor);
}else{
alert("所请求的服务器端出了问题");
}
}
}注：在使用Get请求时，为了保证不是缓存的内容，可以加一个唯一的标识，可后缀上date()或Math.random()。
注：在post方式提交的时候，post提交请求前需要先设置请求头，用setRequestHeader(“label”,”value”)。
url
url是服务器上文件的地址。
async
要想使用xhr对象的话，async必须是true。
send(string)
将请求发送到服务器。
string：仅用于 POST 请求
如果是Get请求，send()方法一般不带参数或null，即使你加了参数也会被转为null。
如果是POST请求，xhr.send(data)的参数data可以是以下几种类型：
- ArrayBuffer
- Blob
- Document
- DOMString
- FormData
data参数的数据类型会影响请求头部content-type的默认值：
如果data是 Document 类型，同时也是HTML
Document类型，则content-type默认值为text/html;charset=UTF-8;否则为application/xml;charset=UTF-8；如果data是 DOMString 类型，content-type默认值为text/plain;charset=UTF-8；
如果data是 FormData 类型，content-type默认值为multipart/form-data;
如果data是其他类型，则不会设置content-type的默认值。
如果用xhr.setRequestHeader()手动设置了中content-type的值，以上默认值就会被覆盖。