ExtJs 调用 Ajax 测试

2019独角兽企业重金招聘Python工程师标准>>>

Extjs调用Ajax测试

一、异步调用

①javascript

<script type="text/javascript">		
		//异步ajax调用
		/**
		 * 异步调用ajax，成功后返回值，作为回调函数的参数 调用失败会提示
		 * @param {} urlStr
		 * @param {} paramsObj
		 * @param {} callbackFunc
		 */
		function AjaxOpen(urlStr, paramsObj, callbackFunc) {
            Ext.onReady(function() {
			Ext.Ajax.request({
						url : urlStr,
						params : paramsObj,
						method : 'POST',
						success : function(response) {
							alert(response.responseText);
							var obj = Ext.decode(response.responseText);
							alert(obj.doubleValue);
							alert(obj.nestedBean.name);
							alert(obj.list[0]+" "+obj.list[1]+" "+obj.list[2]+" "+obj.list[3].firstName);							
							alert(obj.array[0]+" "+obj.array[1]);
							console.dir(obj);
						},
						failure : function(response) {
						   alert(response.responseText+"提示", "方法调用失败");
						}
					});
                   });
		}
	</script>

 ②调用链接

 

<a href="javascript:void(0);" onclick="AjaxOpen('../ajax/ExtJsTest1','level=1','');" class="" id="" title="Ajax测试">Ajax异步测试</a>

③调用Action

@Controller
@RequestMapping("/ajax")
public class AjaxController extends BaseController {
	/**
	 * ExtJs Test
	 */
	@RequestMapping(value = "/ExtJsTest1" , method = {RequestMethod.GET,RequestMethod.POST})
	public String ExtJsTest1(Map<String, Object> map , 
		@RequestParam(value = "level" , required = false) String level){
		System.out.print(level);
		return "ajax/ExtjsTest";
	}
}

④ExtjsTest.jsp

{ 
"doubleValue": 10.10, 
"nestedBean":{"name":"Mr Bean"}, 
"list":["A",10,20.20, {"firstName":"ElZorro"}],
"array":[10, 20]  
} 

二 同步调用

①javascript

/**
		 *通用JS 同步ajax调用 返回json Object
		 * 
		 * @param {}
		 *            urlStr
		 * @param {}
		 *            paramsStr 为字符串键值对形式“key=value&key2=value2”
		 * @return {} 返回json Object
		 */
		function ajaxSyncCall(urlStr, paramsStr) {
			var xhr;
			var value;
			
   /* 判断浏览器是否支持ActiveX控件，如果浏览器支持ActiveX控件可以利用 
   var xml=new ActiveXObject("Microsoft.XMLHTTP");
   创建XMLHttpRequest 对象（这是在IE7以前的版本中）；在较新的IE版本中可以利用 
   var xml=new ActiveXObject("Msxml2.XMLHTTP")的形式创建XMLHttpRequest对象;
   而在IE7及非IE浏览器中可以利用var xml=new XMLHttpRequest()创建XMLHttpRequest对象 */
			
			if (window.ActiveXObject) {
				obj = new ActiveXObject("Msxml2.XMLHTTP");
			} else if (window.XMLHttpRequest) {
/* XMLHttpRequest 可以让开发者发送 HTTP 与 HTTPS 请求并在不重載当前页面的情况下更动页面。一般常用的两个使用情景是：提交表单与取得更多内容。 http://dev.oupeng.com/articles/xhr2 */
            	xhr = new XMLHttpRequest();
			}

			xhr.open('POST', urlStr, false);
			xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			xhr.send(paramsStr);

			var result = Ext.util.JSON.decode(xhr.responseText);
			
			console.group("xhr的内容");
			console.dir(xhr);
			console.groupEnd();
			console.group("result的内容");
			console.dir(result);
			console.groupEnd();
			
			var readyState = Ext.util.JSON.decode(xhr.readyState);
		    
/* 	0 （未初始化） 对象已建立，但是尚未初始化（尚未调用open方法） 
	1 （初始化） 对象已建立，尚未调用send方法 
	2 （发送数据） send方法已调用，但是当前的状态及http头未知 
	3 （数据传送中） 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误， 
	4 （完成） 数据接收完毕，此时可以通过通过responseBody和responseText获取完整的回应数据  */
			
			console.group("readyState的判定");
			console.assert(readyState=='4');
			console.groupEnd();
			if(readyState=='4'){
				alert(" 数据接收完毕，此时可以通过通过responseBody和responseText获取完整的回应数据 ");
			}
			
		}
	</script>

 

 

 

 

 

 

 

转载于:https://my.oschina.net/eastwmt/blog/148029