关闭

【ajax】xmlHttpRequest 第一个例子 服务器返回的是HTML格式

标签: xmlhttprequestajaxservletpostget
1259人阅读 评论(0) 收藏 举报
分类:

客户端文件 

  

<script type="text/javascript" src="js/test.js"></script>
<title>Insert title here</title>
</head>
<body>
	 <form>
	 	<input type="button" name="ok" id="ok" value="测试服务器的链接">
	 </form>
</body>

test.js代码

 /**
  * ajax建立和服务器的链接,接收服务器的请求,处理服务器返回的数据
  * 开发步骤:
  * 	创建xmlHttpRequest对象
  * 	处理服务器端的响应
  * 	打开和服务器的链接
  * 	发送服务	
  * */

function ajaxFunction(){
	var xmlHttp;
	try{        //Firefox
		xmlHttp = new XMLHttpRequest();
	}catch(e){
		try{  //IE 
			xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
		}catch(e){
			try{
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e){}
		}
	}
	return xmlHttp; 
}

window.onload = function(){
	document.getElementById("ok").onclick = function(){
		//获取xmlhttpRequest对象
		var xmlReq = ajaxFunction();
		
		//处理服务器的响应  ,实时监听
		xmlReq.onreadystatechange = function(){
			//alert(xmlReq.status);
			if(xmlReq.readyState == 4){ //响应发送完毕
				if(xmlReq.status == 200 || xmlReq.status == 304){ 
					alert("xx");
				}
			}	
		}
		//打开和服务器的链接
		//url加一个时间戳timeStamp 可以避免浏览器缓存效果,确保url的唯一性
		xmlReq.open("get","./TestServlet?timeStamp="+new Date().getTime(),true);  //url.....
		//发送服务 get请求不会发送任何数据
		xmlReq.send(null);		
	}
}


服务器端

package myDemo;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class TestServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
    
	public void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
			request.setCharacterEncoding("utf-8");
			response.setContentType("text/html;charset=utf-8");
			PrintWriter out = response.getWriter();
			System.out.print("hello....");
			out.print("connect servlet success !");
	}
	
	public void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		
	}
}


配置文件 web.xml

  <servlet>
    <description></description>
    <display-name>TestServlet</display-name>
    <servlet-name>TestServlet</servlet-name>
    <servlet-class>myDemo.TestServlet</servlet-class>
  </servlet>			
  <servlet-mapping>
    <servlet-name>TestServlet</servlet-name>
    <url-pattern>/TestServlet</url-pattern>
  </servlet-mapping>


post 、get 方法

   get方法不向服务器发送任何数据, send()方法传递 null 即可。

   用post 请求向服务器发送数据,需要将 content-type 的首部设为 “ application/x-www-form-urlencoded”, 它会告知服务器正在发送数据,并且数据已经符合url 编码了。该方法必须放在open 方法之后。

     XMLHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded")


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    文章分类
    最新评论