AJax案例(分别调用get ,post方法)

张彦杰 · 发表于 2013-1-23 01:20:41

被引用的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请求" />
<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方法。

		自动登录	找回密码
密码			立即注册

AJax案例(分别调用get ,post方法)

浏览过的版块