jQuery中ajax异步请求应用

 <script type="text/javascript">
  
    //jquery中的几种ajax请求
  	function ajaxRequest(){
  	
  		/*
           $.ajax();最底层的方法
           load()、$.post()、$.ajax();第二层
           $.getJSON(); $.getScript();//第三层
  		 /*
/*******************************load方法********************************/
			//url地址/data发送数据json格式键值对/回调函数 load通常用
			//来获取web上静态数据文件,并不能体现ajax的全部价值
           load(url,[data(key/value)],[callback]);  	
           //1.load能将远程html代码添加到dom中	
           $("#text").load("test.html");
           //2.load 筛选载入html文档
           $("#text").load("test.html .para");
           //3.传递方式get
           $("#text").load("test.php",function(){
           	//...
           });
           //传递方式post
           $("#text").load("test.php",{name:"rain",age:"22"},function(){
           //...
           });
  		   //4.回调函数
  		   $("#text").load("test.html",function(responseText,textStatus,XMLHttpRequest){
  		   //responsetText 请求返回内容
  		   //textStatus 请求状态,success、error、notmodified、timeout 4种
  		   //XMLHttpRequest对象
  		   });
  		   
/********************************************get方法************************************************/
			//$.get();方法使用GET异步请求
			/*url地址/data发送数据json格式键值对/calback回调函数/type返回类型()
			  回调函数有两个 function(data,textStatus)data返回来的可以是xml、json文件、html片段
             textStatus请求状态:success、error、notmodified、timeout 4种
             textStatus返回success才会被调用 这一点跟load不同
			*/
			$.get(url,[.data],[.calback],[.type]);
			$.get("test.action",{name:"zhangsan",age:"10"},function(data,textStatus){
				
			/*...最后一个参数表示返回的是json格式
                json、格式非常严格{"name":"张三","age","20"} 必须是这种格式而不是
                {name:"zhangsan",age:"10"}任何一个{}不匹配获取缺少逗号,都会导致页面上的脚本终止运行
                                           甚至带来其他更严重的负面影响当然在不就的将来javascript
                xml跟json一样容易解析,并且解析的xml将会成为主流的数据交换格式,不过在它之前json
                                           依然有很强的生命力
			*/
			},"json");
/********************************************post方法************************************************/   
			/*
			
			$.post()请求 他与get之间的区别
            1、GET会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容
			发送给WEB服务器。当然,在Ajax请求中,这种区别对用户是可见的。
			
			2、GET方式对传输的数据大小限制(通常不能大于2KB),而使用POST方式传递
			数据量要比GET方式大的多(理论上不受限制)

			3、GET方式请求的数据会被浏览器缓存起来,因此其他人可以从浏览器的历史记录
			中读取到这些数据,例如账号、密码等,在某种情况下,GET方式会带来严重的安全
			性问题,而POST方式相对来说可以避免这些问题

			4、GET方式和POST方式传递的数据在服务器上获取也是不相同。在PHP中,GET方式
			的数据可以用$_GET[]获取,而POST方式可以用$_POST[]获取,两种方式都可以用
			$_REQUEST[]来获取。
			
			$.post(url,[.data],[.calback],[.type]);
			*/
  
  			$.post("test.action",{name:"zhangsan",age:"10"},function(data,textStatus){
			//...........另外load方法有参数传递时,会使用post请求发送请求
			},"json");

/********************************************ajax方法************************************************/  
			/*
			 使用load $.get() $.post() 方法完成一些常规的Ajax程序,要编写一些复杂的Ajax程序,
			那么就的用到$.ajax();不仅能同时实现与load、get、post方法实现同样的的功能,而且
			还可以设定beforeSend(提交前回调函数)、error(请求失败处理)、success(请求成功
			后处理)以及complete(请求完成后处理)回调函数,通过这些回调函数,可以给用户更多
			的Ajax提示信息。另外,还有一些参数,可以设置Ajax请求的超时时间或者页面的最后更改状态
			等。
			
			ajax中的参数详解
			url:(默认为当前网页地址)发送请求的地址
			type:请求的方式 post、get默认为get,注意http请求的方法,例如PUT和DELETE也可以使用,
			但仅有部分浏览器支持
			timeout:设置请求超时间(毫秒),此设置将覆盖$.ajaxSetup()方法的全局变量
			data:发送到服务器的数据可以在URL后面也可以使用json格式key/value对
			dataType:返回数据类型 xml、html、script、json、jsonp、text
			beforeSend:发送请求修改XMLHttpRequest对象的函数,例如添加自定义HTTP头、
			在beforeSend中如果返回false中取消本次ajax请求、XmLHttpRequest对象唯一的参数、
			function(XMLHttpRequest){
			this;//调用贝齿Ajax请求传递的options参数
			}
			complete:请求完成红调用的回调函数(请求成功失败均调用)
			success:请求成功调用的回调回调函数,有两个参数。1.由服务器返回,并更具dataType参数进行
			处理后的数据。2.描述状态的字符串
			function(data,textStatus){
			//data可能是xmlDac、jsonObj、html、text等等
			this;//调用本次ajax请求传递的options参数
			}
			
			error:请求失败时调用的函数,该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误
			对象(可选)。Ajax时间函数如下:
			function(XMLHttpRequest,textStatus,errorThrown){
			//通常情况下textStatus河errorThown只有其中一个包含信息,
			this;调用本次Ajax请求是传递的options参数
			
			}
			global:默认为true,表示是否触发全局Ajax事件。设置为false将不会触发全局Ajax事件,AjaxStart或者
			AjaxStop可用控制各种Ajax事件
			*/
			$.ajax({
				type:"POST",//请求方式
				url:"test.html",//url访问地址
				data:{name:"战三",age:"11"}//传递参数
				dataType:"json",//返回值类型
				success:function(data){//成功数据处理
				//data...数据处理
				
				},
				error:function(msg){//失败处理
					alert(msg);
				}
				
			});
/********************************************ajax方法************************************************/  		
			/*
			只用用post,get 传递参数 如果一个表单中的数据多了 就有点麻烦了 
			序列化元素serialize();他将dom对象序列化成一个字符串
			$("#form1").serizlize();
			$.post("this.html",$("#form1").serizlize(),function(data){
			//处理...
			})
		
			serizlizeArray方法返回不是一个字符串,而是将dom元素序列化后返回一个就送格式的数据,
			$.param()方法:他是serizlize()方法的核心,用来对一个数组或对象按照kay/value进行序列化
			var obj={a:1,b:2,c:3};
			var k=$.param(obj);
			alert(k);//输出a=1&b=2&c3
			*/
/********************************************getScript方法************************************************/ 

			/*
			有时候 在页面上初次加载时没有必要将所有的js文件都加出来 可以动态的创建加载js文件
			可以使用$.getScript();
			*/
			$("#send").click(function(){
				$.getScript("js.js");
			});
/********************************************getJSON方法************************************************/ 

			/*
				$.getJSON()用于加载JSON文件 跟getScript()用法一样
			*/
			$("#send").click(function(){
				$.getJSON("js.json");
			});			
			$("#send").click(function(){
				$.getJSON("js.json",function(data){
					//data数据处理
				});
			});	

		}
	}
  </script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值