AJax案例(分别调用get ,post方法)
被引用的util.js源码：
function $(id){
return document.getElementById(id);
}
相应页面源码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
out.println("<font color='red'>服务器处理完毕</font>");
//获取请求的方法
String method=request.getMethod();
out.println("</br>您是通过<font color='red'>"+method+"</font>方法向服务器提出请求的....</br>");
//获取传递的参数
out.println("传递的参数："+request.getParameter("username"));
%>
get方法请求页面源码：
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="./js/util.js"></script>
<script type="text/javascript">
function getXhr(){
var xhr;
try{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}catch(err){
try{
xhr=XMLHttpRequest();
}catch(er){
alert("浏览器版本太低，不支持此操作.....");
}
}
return xhr;
}
function getAjax(){
var xhr=getXhr();
xhr.open("get","ajax/index.jsp?username='zhangsansan'",true);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
$("content").innerHTML=xhr.responseText;
}
}
}
}
</script>
post方法页面源码：
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="./js/util.js"></script>
<script type="text/javascript">
function getXhr(){
//设置浏览器的兼容性
var xhr;
try{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}catch(err){
try{
xhr=XMLHttpRequest();
}catch(er){
alert("浏览器版本太低，不支持此操作.....");
}
}
return xhr;
}
function postAjax(){
var xhr=getXhr(); //获取XMLHttpRequest对象
xhr.open("post","ajax/index.jsp",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//调用post方法传递参数必须写，get方法不需要写
xhr.send("username=zhangsansan");
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
$("content").innerHTML=xhr.responseText;
}
}
}
}
</script>
<body>
<input type="button" value="Ajax请求" onclick="postAjax()"/>
<div id="content"></div>
</body>
总结Ajax的get与post的区别：
Get请求：如果传递(附带)参数，get的open方法的url参数值直接附带传递参数，安全性较低；get请求不用写xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")方法；默认情况下调用的是get方法
Post请求：open方法的参数值也可以附带参数，但是一般不在url路径上附带传递，参数在send方法里传递，安全性比较好；post方法如果传递参数，必须要写xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")方法；
如果在get方法调用的send方法里传递了参数，那么会默认变成调用post方法。
function $(id){
return document.getElementById(id);
}
相应页面源码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
out.println("<font color='red'>服务器处理完毕</font>");
//获取请求的方法
String method=request.getMethod();
out.println("</br>您是通过<font color='red'>"+method+"</font>方法向服务器提出请求的....</br>");
//获取传递的参数
out.println("传递的参数："+request.getParameter("username"));
%>
get方法请求页面源码：
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="./js/util.js"></script>
<script type="text/javascript">
function getXhr(){
var xhr;
try{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}catch(err){
try{
xhr=XMLHttpRequest();
}catch(er){
alert("浏览器版本太低，不支持此操作.....");
}
}
return xhr;
}
function getAjax(){
var xhr=getXhr();
xhr.open("get","ajax/index.jsp?username='zhangsansan'",true);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
$("content").innerHTML=xhr.responseText;
}
}
}
}
</script>
post方法页面源码：
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="./js/util.js"></script>
<script type="text/javascript">
function getXhr(){
//设置浏览器的兼容性
var xhr;
try{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}catch(err){
try{
xhr=XMLHttpRequest();
}catch(er){
alert("浏览器版本太低，不支持此操作.....");
}
}
return xhr;
}
function postAjax(){
var xhr=getXhr(); //获取XMLHttpRequest对象
xhr.open("post","ajax/index.jsp",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//调用post方法传递参数必须写，get方法不需要写
xhr.send("username=zhangsansan");
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
$("content").innerHTML=xhr.responseText;
}
}
}
}
</script>
<body>
<input type="button" value="Ajax请求" onclick="postAjax()"/>
<div id="content"></div>
</body>
总结Ajax的get与post的区别：
Get请求：如果传递(附带)参数，get的open方法的url参数值直接附带传递参数，安全性较低；get请求不用写xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")方法；默认情况下调用的是get方法
Post请求：open方法的参数值也可以附带参数，但是一般不在url路径上附带传递，参数在send方法里传递，安全性比较好；post方法如果传递参数，必须要写xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")方法；
如果在get方法调用的send方法里传递了参数，那么会默认变成调用post方法。