今天初步接触JQuery的Ajax技术,虽然之前有使用过Ajax 的load()方法但是呢,都只是自己胡乱搞的,并没有很系统的学习,所以今天听老师再讲的时候还是一脸懵逼,比如之前使用的load()方法,异步加载其他文件的时候我就这样使用的$(".display").load("php/xxx.php",{firstname:$("#firstname").val()});这是比较常用的方式,这种方式的提交是post方式,没带参是get方式。

今天学的是

  • load("",function(){})方法:
  • 回调函数
  • 无论请求成功或失败,在请求结束后调用
  • 语法:function(respText, textStatus, XMLHttpR)
  • respText:responseText请求返回的内容
  • textStatus:请求状态success | error | notmodified | timout
  • XMLHttpR:XMLHttpRequest对象

今天的作业是:

  • 当textStatus为success时,在对话框中输出XMLHttpRequest的类型,否则输出“加载失败!”
  • 遍历responseText中的h6标记,在控制台输出其html

核心代码如:

		$("#send").click(function(){
			$("#resText").load("test.html .para",function(respText,textStatus,XMLHttpR){
				if(textStatus=="success"){
					alert(XMLHttpR);
				}else{
					alert("加载失败");
				}
				//遍历加载的HTML文件里面的



<h6>
				$('h6',respText).each(function(tmp){
					console.log($(this).html());
				});
				
//				$(respText).find("h6").each(function(){
//					alert($(this).html());
//				});
			});

着重讲一下这个//遍历加载的HTML文件里面的h6标签
老师的写法是这个:

   $(respText).find("h6").each(function(){
					alert($(this).html());
				});

个人觉得这个写法很麻烦,所以自己就在想这个优化这个写法,找到了JQuery的开发文档,在Jquery的核心里面第一项就是
jQuery([selector,[context]]),返回值是Jquery对象,使用方法:

在一个由 AJAX 返回的 XML 文档中,查找所有的 div 元素。
jQuery 代码:

     $("div", xml.responseXML);

故此,我优化了一下自己的代码

  	$('h6',respText).each(function(tmp){
		console.log($(this).html());
	});

这样显得简洁好看,代码又容易记忆。


我们的征途是星辰大海