如何使用Ajax进行与服务器交互

@如何使用Ajax

如何使用Ajax进行与服务器交互

AJAX全称为“Asynchronous [ei’siŋkrənəs] JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

注意:Ajax的主要目的:1、局部刷新 2、异步通信
Ajax的技术特点:异步通信、局部刷新

Ajax执行的五个步骤

1.创建XMLHttpRequest对象
XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入，被称为XMLHTTP。 后来Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了XMLHttpRequest类，不过它们创
建XHMLHttpRequest对象的方法不相同

/**
创建XMLHttpRequest对象
*/
function createXMLHttpRequest()
{
    
    
	var xhr;//声明变量用于装XMLHttpRequest对象
	//创建XMLHttpRequest对象

		try{
    
     // Firefox, Opera 8.0+, Safari
			xhr=new XMLHttpRequest();
		    }
		    catch (e){
    
    
			   try{
    
    // Internet Explorer
				   xhr=new ActiveXObject("Msxml2.XMLHTTP");
			      }
			    catch (e){
    
    
			      try{
    
    
			    	  xhr=new ActiveXObject("Microsoft.XMLHTTP");
			      }
			      catch (e){
    
    }
			      }
		    }
	return xhr;
}

2.设置与服务器端的连接信息
ajax在与服务器连接，有两种方式 一种时GET 一种是POST。两者的区别如下
1、GET方式只能通过访问路径 +?参数=值 （url?name1=value1&name1=value1）
POST方式可以通过send方法，即在项目服务器发送请求时，将信息以send函数参数的方式传递给服务器
2、GET方式不用设置请求的头信息(因为get走地址栏)
POST方式必须设置请求的头信息(因为post走底层的HTTP协议)

 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

Get方式建立连接

/*
	 * 建立连接
	 *  xhr.open(method,url,asyn);
	 *  method:提交方式
	 *  url:提交路径
	 *  asyn:是否采用异步通信
	 */
	
	xhr.open("GET","/struts_crud_hr/ajaxAction!ceshiAjax.action?datetemp="+new Date().getTime().toString()+"&userid=yxd&userpass=12345",true);
//发送请求，因为 get方式不通过send方式传递参数所以参数为null
xhr.send(null);

Post方式建立连接

/*
	 * 建立连接
	 *  xhr.open(method,url,asyn);
	 *  method:提交方式
	 *  url:提交路径
	 *  asyn:是否采用异步通信
	 */
	xhr.open("POST","/struts_crud_hr/ajaxAction!ceshiAjax.action?datetemp="+new Date().getTime().toString(),true);
	//如果请求类型是POST方式的话，需要设置请求首部信息
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	/*
	 * 发送参数
	 如果请求类型是GET方式的话，客户端发送请求数据，服务器端接受不到
	 虽然get方式下，send方法不起作用，但是不能省略
	 */
	xhr.send("userid=yxd&userpass=12345");//发送数据

3.向服务器发送数据

/*
	 * 发送参数
	 如果请求类型是GET方式的话，客户端发送请求数据，服务器端接受不到
	 虽然get方式下，send方法不起作用，但是不能省略
	 */
	xhr.send("userid=yxd&userpass=12345");

4.设置回调函数
在XMLHttpRequest对象有一个事件，当客户端与服务器端的交互状态发生改变时触发。这是事件叫做onreadystatechange。用于处理这个事件的函数称为回调函数

	xhr.onreadystatechange = function(){
    
    //为onreadystatechange事件设置回调函数
		
		if(xhr.readyState==4){
    
    
			if(xhr.status==200){
    
    
				//得到服务器的返回值
				var data = xhr.responseText;
				alert(data);
			}
		}
	}

5.接收服务器的响应数据
XMLHttpRequest对象有个 readyState属性，用于获得请求状态和响应状态

readyState 属性表示 Ajax请求的当前状态.它的值用数字代表
0代表未初始化.还没有调用open方法
1表正在加载代.open方法已被调用，但send方法还没有调用
2代表已加载完毕.send已被调用.请求已经开始
3.代表交互中。服务器正在发送响应
4.代表完成。响应发送完毕
status:表示服务器对客户响应的状态码：判断交互是否成功
常用状态码及其含义:
.404 没找到页面(not fount)
.403禁止访问
.500内部服务器出现错误
.200 一切正常。

xhr.onreadystatechange = function(){
    
    
		
		if(xhr.readyState==4){
    
    
			if(xhr.status==200){
    
    
				//得到服务器的返回值
				var data = xhr.responseText;//利用xhr.responseText返回的文本信息
				alert(data);
			}
		}
	}

裸Ajax的使用

/**
	测试返回值是一个Map的情况
	*/
  	function fun2()
  	{
    
    
		//设置请求提交的路径
		var url="${pageContext.request.contextPath }/ajax/luoAjax2.do";
		//设置参数
		var paramstr="deptno=10";
		//第三个参数指明的回调函数的名字
		AjaxResponseText(url,paramstr,callback2) ;//callback2为回调函数名
  	}

  	function callback2(returnValue)
  	{
    
    
  	  	// alert(returnValue);
		//将接到的字符串 转为JS中的json对象
		var json = eval("("+returnValue+")");//注意!!:如果返回的Map一定要在转为JSON对象时，外层加括号
		//从json中得到结果
		alert("得到的部门名为:"+json.DNAME+" 得到部门地址为:"+json.LOC);
		
  	}

JQuery中的Ajax使用

/**
    fun1:利用Ajax返回一个字符串
    */
  	function fun1()
  	{
    
    
		 jQuery.ajax( 
		            {
    
     
		            type: "POST", //传值方式 
		            url: "${pageContext.request.contextPath }/jquery/jqueryAjax1.do", //访问路径 
		            dataType: "text", // text:文本 xml:xml文档 
		            async:true, //设为异步 
		            data:"userid=yxd&userpass=123", //传值串或json {“userid”:”yxd”,”userpass”:”123”}
		            // 回调方法 
		            success: callback1
		   
		        }); 
  	}
	/**
	fun1的回调函数
	*/
  	function callback1(returnValue)
  	{
    
    
		alert("返回值为:"+returnValue);
  	}