js原声代码实现ajkx
Ajax的核心是XMLHttpRequest对象
1、创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2、XHR的用法
（1） 调用open（）方法，它接受三个参数（要发送请求的类型，请求的URL，表示是否异步发送请求的布尔值）；调用open（）并不会真正发送请求，只是启动一个请求以备发送；
（2） 调用send（）方法，它接受一个参数，即要作为请求主体发送的数据。
服务器收到响应后，响应的数据会自动填充XHR对象的属性。相关属性有：
responseText：作为响应主体被返回的文本
responseXML：响应数据的XML DOM文档
status：响应的HTTP状态，200响应成功和304表示响应有效
statusText：HTTP状态的说明
XHR的readyState属性表示请求响应过程的当前活动阶段，只要readyState属性的值发生改变，就会触发一次readystatechange事件。readyState=4，表示响应完成，已经收到了全部响应数据，所以我们只对这个阶段感兴趣。在调用open（）之前指定onreadystatechange，可以保证跨浏览器的兼容性。
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
请求方式有两种：GET和POST
GET请求是最常见的请求类型，用于向服务器查询某些信息；
POST请求用于向服务器发送应该被保存的数据。
我的html代码如下：
<form id="info" method="post">
<div class="br">
<lable>宝贝昵称：</lable>
<input type="text" id="baby-name" name="baby-name">
<lable>联系电话：</lable>
<input type="text" id="phone" name="phone">
</div>
<div class="br">
<lable>照片描述：</lable>
<input type="text" id="photo-content" name="photo-content">
</div>
</form>
js代码：
/序列化表单数据/
function serialize(form){
var parts = new Array();
var field = null;
for (var i=0, len=form.elements.length; i < len; i++){
field = form.elements[i];
parts.push(encodeURIComponent(field.name) + "=" +
encodeURIComponent(field.value));
}
return parts.join("&");
}
/*xhr对象向服务器传数据/
function submitData(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
var data = JSON.parse(xhr.responseText);
console.log(data);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("post", "db.jsp", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//使用XHR来模仿表单提交，加一个请求头部。
var form = document.getElementById("info");
xhr.send(serialize(form));
}
这是自己写的代码，本来这样已经可以了，先是写了一个表单序列化的函数，然后用XHR对象来实现ajax异步请求。在学习过程中，发现了FormData这个类，它为序列化表单以及创建于表单格式相同的数据提供了便利。使用方法如下：
var form = document.getElementById("info");
var data = new FormData(form);
xhr.send(data);
