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

原创 2013年12月05日 00:50:19

客户端文件 

  

<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")


相关文章推荐

Js XMLHTTPRequest 实现GET请求提交和返回内容获取

【需求描述】 在进行html5页面的设计时,希望用户加载完成页面后,进行交互时只改变其中的某些元素的内容,这样更像本地APP的呈现效果,但是HTML中的post、get如果使用submit进行提交的...

HTML5 XMLHttpRequest中的新功能

http://cssor.com/html5-xmlhttprequest-new-features.html?utm_source=tuicool&utm_medium=referral ...

ajax入门之XMLHttpRequest和三种数据格式

XMLHttpRequestfunction getHTTPObject(){ var xhr = false; if(window.XMLHttpRequest){ xhr ...
  • wzwdcld
  • wzwdcld
  • 2015年02月15日 21:31
  • 661

$.ajax()方法详解

jquery中的ajax方法参数总是记不住,这里记录一下。  1.url:  要求为String类型的参数,(默认为当前页地址)发送请求的地址。 2.type:  要求为String类型的参数,...

jQuery之$.ajax()方法详解

ajax不管是前端,还是后台都是要学习的知识点,也是必用知识点。ajax是异步更新,只需要进行少量的数据交互便可到达页面的局部刷下。非常棒。 以下内容转载http://www.cnblogs.com/...

ajax的data传参的两种方式

1./** * 订单取消 * @return {Boolean} 处理是否成功 */ function orderCancel(orderId, commant){ var flag...

$.ajax属性及用法

出处:http://www.cnblogs.com/tylerdonet/p/3520862.html 1.url:  要求为String类型的参数,(默认为当前页地址)发送请求的...

JQuery Ajax调用asp.net后台方法

利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
  • iouxyz
  • iouxyz
  • 2010年06月24日 11:09
  • 25380

JQuery中$.ajax()方法参数详解

转载来自:http://blog.sina.com.cn/s/blog_4f925fc30100la36.html url: 要求为String类型的参数,(默认为当前页地址)发送请求...

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。 type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如p...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【ajax】xmlHttpRequest 第一个例子 服务器返回的是HTML格式
举报原因:
原因补充:

(最多只允许输入30个字)