javascript学习笔记一

今天看的javascript 应用开发实践指南

看了js库 jquery ，明确了要深入学习jquery的想法。

对于javascript原生态的ajax写法（兼容性只需考虑ie6）,封装为函数；

 1 function getHTTPObject( requestUrl , callBack){

 2             var ajax;

 3             if( window.XMLHttpRequest ){

 4                 ajax = new XMLHttpRequest();

 5             }

 6             esle if( window.ActiveXObject ){

 7                 ajax = new ActiveXObject("Msxml12.XMLHTTP");        

 8             }

 9             return ajax;

10         }

11 

12         var request = getHTTPObject();

13         request.onreadystatechange = function(){

14             if( request.readyState === 4 && request.status === 200 )

15                 //do something

16                 var data = JSON.parse( request.responseText );

17                 //console.log( request.responseText );

18                 if( typeof callBack === "function" ) {

19 

20                     callBack(data);

21                 }

22         }

23         request.open( "GET" , requestUrl , true );

24         request.send(null);

 

而对于jquery来说，就非常简单了。jquery 重点的是ajax的使用，each循环，和函数链。

 1 $(document).ready(function(){

 2             $.ajax({

 3                 type: "GET",

 4                 url: "../..",

 5                 dataType: "json",

 6                 success: function( data ){

 7                     console.log( data.addressBook );

 8                 },

 9                 error: function() {

10                     alert("error occurred");

11                 }

12             });

13         });

 

另外，getJSON 能更好的处理json数据。

 1 $(document).ready(function(){

 2 

 3             $.getJSON( '../..json' , function( data ){

 4 

 5                 var data = data.addressBook;

 6                 var count = data.length;

 7 

 8                 $('#idDiv').empty();//clear textarea

 9 

10                 if( count>0 ){

11                     console.log( data );

12                     $.each( data , function( i , obj ){

13                         $("#idDiv").append("<p>"+ i + obj.name+"</p>");

14                     } );

15                 }

16             } ).error( function(){

17                 //

18             } ).complete( function(){

19                 //

20             } ).success( function(){

21                 //

22             });

23         });