转载于:https://blog.csdn.net/XIAOZHUXMEN/article/details/50766519
之前做的转盘抽奖中用到了ajax获取后台参数,于是把ajax相关的内容都学习了一下,之前做的是用jquery的ajax()函数来写的,为了能理解透彻,学习了如何用js原生代码实现ajax
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);
但是我却遇到了问题,原因是我后台用的jsp代码,怎么都获取不到前端传过来的表单数据,查了一下发现,jsp的request.getParameter()只能 recognizes application/x-www-form-urlencoded requests only. 但是我发送了一个 multipart/form-data request.,解决方法如:这个页面写的挺清楚