javascript学习笔记一

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

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

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

function getHTTPObject( requestUrl , callBack){
            var ajax;
            if( window.XMLHttpRequest ){
                ajax = new XMLHttpRequest();
            }
            esle if( window.ActiveXObject ){
                ajax = new ActiveXObject("Msxml12.XMLHTTP");        
            }
            return ajax;
        }

        var request = getHTTPObject();
        request.onreadystatechange = function(){
            if( request.readyState === 4 && request.status === 200 )
                //do something
                var data = JSON.parse( request.responseText );
                //console.log( request.responseText );
                if( typeof callBack === "function" ) {

                    callBack(data);
                }
        }
        request.open( "GET" , requestUrl , true );
        request.send(null);

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

$(document).ready(function(){
            $.ajax({
                type: "GET",
                url: "../..",
                dataType: "json",
                success: function( data ){
                    console.log( data.addressBook );
                },
                error: function() {
                    alert("error occurred");
                }
            });
        });

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

$(document).ready(function(){

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

                var data = data.addressBook;
                var count = data.length;

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

                if( count>0 ){
                    console.log( data );
                    $.each( data , function( i , obj ){
                        $("#idDiv").append("<p>"+ i + obj.name+"</p>");
                    } );
                }
            } ).error( function(){
                //
            } ).complete( function(){
                //
            } ).success( function(){
                //
            });
        });