ajax的用法

ajax的全称是Asynchronous JavaScript and XML，其实是一个组合而得来的新知识

1原始的ajax的使用方法

ajax使用的四个步骤

1.1收下获得xmlhttprequest对象，由于不同浏览器获取该对象的方式不同，因此这里写一个函数来获取该对象。具体如下所示：

var getXmlhttprequest=function(){
    	try{
    		return new XMLHttpRequest();//这个是大多数浏览器获取xmlhttprequest的方式
    	}catch (e) {
			try{
				return new ActiveXObject("Msxml2.XMLHTTP");
			}catch (e) {
				try{
					return new ActiveXObject("mircosoft.XMLHTTP");
				}catch (e) {
					alert("您用什么浏览器呢");
				}
			}
		}
   	}

1.2获取到该对象之后，要打开连接，使用xmlhttprequest对象的open()方法，如下所示：

/*
  open()方法有三个参数，分别是请求的方式，请求的路径，以及是否异步。其中请求的路径是项目名+Servlet的类的url.

*/
xmlHttpRequest.open('GET',"/ajax/AjaxServlet",true);

1.3发送请求内容，其中get方式是没有内容实体的，但是必须写上null，否则有部分浏览器不认可。

xmlHttpRequest.send(null);

对于post请求需要设置请求头，具体如下：

xmlHttpRequest.open('POST',"/ajax/PostServlet",true);
	    	//发送请求,对于post请求来说，必须加上请求头
	    	xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	    	xmlHttpRequest.send("username=Tisam&password=123");

1.4对xmlhttprequest进行监听

xmlHttpRequest一共有五个状态，这个五个状态都会给这个方法监听
                readyState
                0：刚创建还没有调用open()方法
                1：请求开始，已经调用open()方法但是还没有调用send()方法
                2：完成send()方法的调用
                3：服务器开始响应，但是不一定已经响应完毕
                4：服务器已经响应完毕

xmlHttpRequest.onreadystatechange=function(){
	    	
	    		if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
	    			var text=xmlHttpRequest.responseText;
	    			var ht=document.getElementById("h1");
	    			ht.innerHTML=text;
	    		}
	    	}

1.5对应的html和Servlet类如下：

1.6运行结果如下：

2jQuery对ajax的封装

jquery对于ajax的封装有以下几种，具体的使用方法可以查看jQuery文本，以下是一个简单的例子，所用的servlet均为上面所用到的。

常用的就是$.get(),$.post(),$.ajax({})的方式

2.1使用高级的简单易用的方式

使用get的提交方式

  $.get(
		    	 "/ajax/AjaxServlet",
		    	 function(data){
		    		 $("#h1").html(data);
		    	 }
		     );

使用post的提交方式

 $.post(
			  "/ajax/PostServlet", 
			  {"username":"Tisam","password":"123"},
			  function(data){
				  $("#h2").html(data);
			  }
		   );

 

2.2使用底层的方式

一般情况下，使用简单的方式即可，但是有时候需要指定请求的方式是否异步等则需要用到底层的

 $.ajax(
    	 {
    	    type:"get",	 
    		url:"/ajax/ProvinceServlet",    		
     		async:true,//这里表示是否异步
    		success:function(data){//里面的data是接收后台返回的数据，只有成功的时候返回
    			$("#h3").html(data);
    		},
    		error:function(){
    			alert("请求失败");
    		},
    		dataType:"text"//这个表示请求返回的数据的类型
    	}
    	 );

 

2.3运行结果如下所示：