jQuery_day02

1.jQuery 尺寸:        处理元素和浏览器窗口的尺寸

        width 和 height

/*
    width():设置或返回元素的宽度(不包括内边距、边框或外边距)
    height():设置或返回元素的高度(不包括内边距、边框或外边距)
*/
$("button").click(function(){
  var txt="";
  txt+="div 的宽度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

        innerWidth 和 innerHeight

/*
    innerWidth() 方法返回元素的宽度（包括内边距）。

    innerHeight() 方法返回元素的高度（包括内边距）
*/
$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

        outerWidth 和 outerHeight

/*
    outerWidth() 方法返回元素的宽度（包括内边距和边框）。

    outerHeight() 方法返回元素的高度（包括内边距和边框）
*/

2.Ajax:

        ajax优点:不需要重新加载整个页面的情况下,AJAX 通过后台加载数据,并在网页上进行显示

        ajax语法:

// 1.XMLHttpRequest创建对象
var xmlhttp;
if(window.XMLHttpRequest){// 兼容性
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp = new XMLHttpRequest();
}else{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

// 2.向服务器发送请求
/*
    open(method,url,async):请求类型(GET/POST),文件在服务器上的位置,true(异步)/false(同步)
*/
xmlhttp.open("GET","ajax_info.txt",true);

// 3.监听
// onreadystatechange 事件:每当 readyState 改变时，就会触发 onreadystatechange 事件
xmlhttp.onreadystatechange=function()
{
    /*
        readyState:从0-4变化,其中4为请求已完成,且响应已就绪
        status:    200:"OK"    404:未找到页面
    */
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        /*
            服务器响应:获得来自服务器的响应,需用XMLHttpRequest对象的属性
            responseText:获取字符串形式的响应数据
            responseXML:获取XML形式的响应数据
        */
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

// 4.请求发送到服务器
xmlhttp.send();

        jQuery Ajax:

                load():        从服务器加载数据,并把返回的数据放入被选元素中

/*
    load(url,data,function(response,status,xhr)):
        url:    必需。规定您需要加载的 URL
        data:    可选。连同请求发送到服务器的数据
        function:    回调函数
            response - 包含来自请求的结果数据
            status - 包含请求的状态(success、error等)
            xhr - 包含 XMLHttpRequest 对象
*/
$("#btn").click(function(){
    $("#p").load("text.txt",function(response,status,xhr){
        if(status=="success"){
            $("#p").html(response);
        };
    });
});

                $.get():发送一个 HTTP GET 请求到页面并取回结果

/*
    $.get(URL,data,function(data,status,xhr),dataType):
        url:    必需。规定您需要请求的 URL
        data:    可选。连同请求发送到服务器的数据
        function:
            data - 包含来自请求的结果数据
            status - 包含请求的状态
            xhr - 包含 XMLHttpRequest 对象
        dataType:可选。预期的服务器响应的数据类型
            如: "xml","html","text":纯文本字符串,"json"等
*/
$("#btn").click(function(){
    $.get("text.txt",function(data,status,xhr){
        alert(data)
    },"text");
});

                $.post():使用 HTTP POST 请求从服务器加载数据

// post(URL,data,function(data,status,xhr),dataType)

                $.ajax():        $.ajax({name:value, name:value, ... })

async,contentType,data,dataType,error,type,url,success,timeout

name名称	value值
url	发送请求的 URL,即请求地址
type	请求的类型,get/post
async	是否异步处理,true(异步,默认)
dataType	服务器响应的数据类型(如json等)
data	要发送到服务器的数据 要求为Object或String类型的参数
processData	是否将如果发送的数据不是字符串,自动转换, 默认true 对象为key:value格式,如{name:"admin",pwd:"12"}
contentType	发送数据到服务器时所使用的内容类型 如"application/json"等
timeout	设置本地的请求超时时间,毫秒计
success(result,status,xhr)	请求成功时运行的函数
error(xhr,status,error)	请求失败要运行的函数

$("#btn").click(function(){
    $.ajax({
        url:'text.txt',
        async:true,
        type:'post',
        // dataTpye:'json',
        // data:{
        //     name:"admin",
        //     password:"root"
        // },
        success:function(result){
            alert(result);
        }
    })
});

3.JSON:

        语法:以键值对形式存在,其中数据由逗号分隔,将数据保存在大括号中,中括号保存数组

// json对象
// key 必须是字符串,value可以为json数据类型(字符串,数字,对象,数组,布尔或null)
{
    "name":"admin",
    "pwd":"root"
}

// json数组
{
    "id":1,
    "attr":
    [
        {"name":"admin1","pwd":"root1"},
        {"name":"admin2","pwd":"root2"}
    ]
}