jQuery基础（二）：事件与Ajax

一. 事件

JavaScript和HTML之间的交互是通过事件Event实现的，当文档或浏览器窗口发生一些特定的交互的时候，会触发浏览器生成一个时间对象，这个对象可以被捕获。与原生js相比，jquery提供了更加优雅的事件处理语法，增强了事件处理的能力。

$(document).ready() 是jquery中最重要的一个事件函数，用于替代原生js中的window.onload() 方法，$(function(){}); 是一种简写形式，当dom树结构加载和解析完毕之后，该函数绑定的方法就会被调用

为元素绑定事件：jquery中可以使用bind(type, [data], fn)方法来为jquery对象绑定事件，其中type是事件的类型，data属性是传递给事件对象的额外数据对象，fn是指绑定的事件处理函数。事件的类型有很多，常见的有鼠标的单击和双击click、dbclick，元素获取或者失去焦点focus、blur

<div id="panel">
    <h5>什么是jQuery?</h5>
    <div style="display:none">
        jQuery是一个优秀的javascript函数库！
    </div>
</div>

<script type="text/javascript">
    // 基本的时间绑定
    $("#panel h5").bind("click", function(){
        // this关键字是指携带相应行为的DOM元素
        $(this).next().show();
    });
    
    // 常见的事件绑定可以简写
    $("#panel h5").click(function(){
        var $content = $(this).next();
		// 判断元素的可见性
        if($content.is(":visible")){
            $content.hide();
        } else {
            $content.show();
        }
	});
</script>

事件冒泡：如果页面上有多个元素同时响应一个事件，那么事件会按照dom的层次结构像水泡一样不断向上直到顶端。

// 停止事件冒泡
$(".content").click(function(event){
    // do something...
    
    event.stopPropagation();	// event是指当前事件对象
});

// 有些网页内容是有默认行为的，比如单击超链接会跳转、单击提交按钮会提交表单，
// 有时需要阻止这些默认行为，比如提交表单之前需要对表单数据进行校验
$("#submit").click(function(event){
    // do something....
    
    event.preventDefault();		// 阻止默认行为
});

二. Ajax基础

1. Ajax的概念：ajax允许浏览器通过javascript向服务器发送HTTP请求接收数据，无需刷新整个页面！
2. XMLHttpRequest对象：该对象是浏览器的内置对象，使用该对对象可以向服务器发送HTTP请求接收数据

// 创建XMLHttpRequest对象
var request = new XMLHttpRequest();

// 初始化XMLHttpRequest对象，requestType请求类型GET/POST，url请求的地址，
// async是否异步模式，默认是异步模式，如果是同步模式会锁定页面
request.open(requestType,  url, async);

// XMLHttpRequest对象包含一个readystate属性，该属性的值是一个数字，用于表示请求的当前状态
// 0 ---- 对象刚创建，未调用opne()方法初始化
// 1 ---- 已调用open()方法初始化，未发送http请求
// 2 ---- 请求已发送
// 3 ---- 开始接收来自服务端的数据
// 4 ---- 服务端响应完毕（200/404/500...）

// readyState的属性值变化会触发readyStateChange事件，为事件绑定处理函数
function reqReadyStateChange(){
    // 服务端响应完毕
    if(request.readyState == 4){
        // http状态码200，请求成功
        if(request.status == 200){
            // responseText表示服务端返回的数据
            alert(request.responseText);
        } else {
            alert("The server retutn a status code of " + request.status);
        }
    }
}

request.onreadystatechange = reqReadyStateChange;

// 发送请求，接收一个字符串类型的参数，参数为发送给服务器的请求体，如果不包含请求体，
// 则将null作为值传入（必须）
request.send(null);

三. jQuery对ajax的封装

jQuery将ajax封装在$.ajax(url, [setting])中，该方法是jquery中ajax的底层方法，$.get()和$.post()都是对$.ajax()的封装

$.ajax()中的参数详情：

• async：是否为异步请求，默认是异步的
• data：发送到服务器的数据
• dataType：预期服务端返回的数据类型，xml、json、text、jsonp
• success：请求成功后的回调函数

$.ajax({
    url:"xxx",
    type:"POST",
    data:{key-value},
    success:function(data){	// data是服务端返回的数据
        alert(data);
    }
});

$.get(url, data, callback, type) 通过GET请求获取数据：

• url：请求的地址
• data：待发送给服务端的数据
• callback：请求成功后的回调函数
• type：返回数据的格式xml、json、text

$.get({"xxx url", {name:"znker"},
      function(data){	// data服务端返回的数据
    	alert(data);
	}, "json"
});