ajax原生js和jq的两种写法

1.原生js写法

步骤:

1.html页面或jsp页面中触发某个事件,调用js方法

2.编写js方法:

           a. 创建XMLHttpRequest对象

                       (1) ie浏览器

                       (2)非ie浏览器

           b.调用open方法

                       参数一: 提交的方式

                                          get/post

                       参数二:提交到服务器的url

                       参数三:true 异步,false同步

                       get提交方式: xmlHttpRequest.open("get","xxxServlet",true);

                       post提交方式: xmlHttpRequest.open("post","xxxServlet?name=hctrl",true);

                       注意: get提交方式,提交的参数写在send方法中,post提交方式参数卸载open方法中

           c.给XMLHttpRequest对象注册onreadystatechange事件,判断readyState的值是4,status的值是200,

              然后获取服务端传递回来的xml或json或文本,然后dom编程更改html页面或jsp页面的局部内容

           d.如果post提交,还要添加消息头

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

           e.调用send方法发送请求   

                        get方式:    xmlHttpRequest.send(null);
                        post方式: xmlHttpRequest.send(name=value&name1=value1...);  

                        post方式传数据到服务器用send方式事项
                        get方式传送数据到服务的用法:
                                    xmlHttpRequest.open("get","xxxServlet?name=value&name1=value1",true);
 

实例代码:

login.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>








	
	

	
		

		
			

				
键盘
				
详细信息
	
			
			

				
鼠标
				
详细信息
			
		
	

login.js

var xmlHttpRequest;
window.onload=function(){
	alert(111);
	func1();
	
	//func2();
	
};

function func1(){
	
	var td1_ele = document.getElementById("td1");
	td1_ele.onclick=(function(){
		
		func3();
});
	
	
}

function func3(){
	
	//1.创建XMLHttpRequest对象
	createObj();
	
	//2.调用open方法
	xmlHttpRequest.open("post","showInfoServlet",true);
	xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");
	
	//3.注册事件
	xmlHttpRequest.onreadystatechange=function(){
			
		if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
			
			var div1_ele = document.getElementById("td1");
			alert(xmlHttpRequest.responseText);
			div1_ele.innerHTML=xmlHttpRequest.responseText;
			
		}
	
	};
	
	//发送请求
	xmlHttpRequest.send("name=hctrl");
	
	
}

function createObj(){
	
	if(window.XMLHttpRequest){
		//非ie浏览器
		xmlHttpRequest=new XMLHttpRequest();
	}else{
		//ie浏览器
		xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
	}
		
}

   showInfoServlet

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		//获取js传递过来的参数
		String name = request.getParameter("name");
		
		//设置返回值类型
		response.setContentType("text/html;charset=utf-8");
		
		//创建输出流
		PrintWriter out = response.getWriter();
		
		out.print(name);
		out.flush();
		out.close();
		
	}