1、关于Ajax交互的步骤
1.1 获取到xmlhttprequest
1.2 设置xmlhttprequest的onreadystatechange响应事件
1.3 准备获取ajax请求xmlhttp.open("POST","AjaxServerlet",true);
1.4 设置消息头为表单形式,模仿表单的POSt提交xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
1.5 发送ajax请求xmlhttp.send("age=18&name=zhang"); //Ajax的POST请求,参数是通过xmlhttp.send()方法携带的
1.6 处理Ajax交互获取到的数据,具体的处理在xmlhttprequest的onreadystatechange响应事件中实现
2、Ajax与Java的Servlet通过POSt交互
2.1 HTML代码
- <body>
- buttonid="mybtn">点击</button>
- divid="myAjax">div>
copy
scripttype="text/javascript"//1、获取到xmlhttprequest
functiongetXmlhttp(){
varxmlhttp;
if(window.XMLHttpRequest){//codeforIE7+,Firefox,Chrome,Opera,Safari
xmlhttp=newXMLHttpRequest();
}else{//codeforIE6,IE5
newActiveXObject("Microsoft.XMLHTTP");
}
returnxmlhttp;
window.onload=function(){
document.getElementById('mybtn').onclick=function(){
//1、获取到xmlhttprequest对象
varxmlhttp=getXmlhttp();
//2、xmlhttprequest的响应事件
xmlhttp.onreadystatechange=if(xmlhttp.readyState==4&&xmlhttp.status==200){
//5、操作获取到的信息
//5.1ajax返回的数据,转换为javascript对象
//5.1.1利用eval实现转换
varajaxResult=eval("("+xmlhttp.responseText+")");
//5.1.2利用jquery的方法,对于jQuery.parseJSON(),键值必须为双引号
/*varajaxResult=jQuery.parseJSON(xmlhttp.responseText);*/
alert(ajaxResult)
//5.2获取JavaScript对象的属性
varage=ajaxResult.age;
varname=ajaxResult.name;
//5.3获取到页面的DIV,并设置内容
varmydiv=document.getElementById("myAjax");
mydiv.innerHTML="name:"+name+","+"age:"+age;
}
//3、准备获取ajax请求
//3.1对于get请求,带参数的方式,直接在open函数的请求地址带上参数
xmlhttp.open("POST",true);
//4、发送ajax请求
xmlhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlhttp.send("age=18&name=zhang");
};
script>
2.3 style代码
copy
styletype="text/css"#myAjax{
width:400px;
height:400px;
border:1pxdashedred;
text-align:center;/*div中的文字水平方向居中显示*/
line-height:400px;/*这个和div的高度相同,div中的文字就会垂直方向居中显示*/
font-size:16px;
font-weight:bold;
style>
2.4 AjaxServerlet.java代码
