jQuery、Ajax和JSON笔记

jQuery

文本框失去焦点，给出提示信息

function fn(e) {
	if ($(this).val() === ""){
		$(this).css('border','2px solid red')
		$(this).val(e.data);
	}else {
		$(this).val('yes');
	}
}

function a() {
	$("input:last").focusout('慕课网', fn)
}
a();

监听input值的改变

// target[1..3]为监听的控件
    // change触发后，改变#result中的文本
    $('.target1').change(function(e) {
        $("#result").html(e.target.value)
    });

    //监听select：
    $(".target2").change(function(e) {
        $("#result").html(e.target.value)
    })

     //监听textarea：
    $(".target3").change(function(e) {
        $("#result").html(e.target.value)
    })

this和e.target

this指触发事件的元素：js中事件是会冒泡的，所以this是可以变化的，无论你鼠标点击在什么位置，触发事件的元素都是ul，所以this指ul

**event.target不会变化，它永远是直接接受事件的目标DOM元素；**如果你点击到了ul内部的li，则e.target指的就是li，但是如果你点击的是ul其他的非li部分，则this和e.target是一样的。

如果不是通过冒泡产生的事件，则this和e.target没有区别

this和event.target都是dom对象：如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；

元素的隐藏和显示

//点击button
//执行0.3s隐藏
//执行0.6s显示
$("button").click(function() {
	$("#a1").hide("fast").show("slow")
    $("#a1").toggle("fast")// 如果是隐藏的就显示，如果是显示的就隐藏
});

Ajax

XMLHttpRequest：可以不刷新整个页面使前台和服务器异步交换数据。

异步刷新主要有三个部分：

• HTML页面
• 使用XMLHttpRequest和Web服务器进行数据异步交换
• 使用JS操作DOM，实现动态局部刷新

创建XHR对象： var requeat = new XMLHttpRequest()

发送请求：

• request.open(method, url, [async]); // 默认async=true
• request.setRequestHeader(“填写头信息”);//如果需要
• request.send([body信息]);// POST请求需要填写参数

获取响应

request.onreadystatechange = function(){
	if(request.readState === 4 && request.status === 200){
		// 响应返回成功
	}
}

• .responseTest：获得字符串形式的响应数据
• .responseXML：获得XML形式的响应数据
• .status和.statusText：以数字和文本形式返回HTTP状态码
• getAllResponseHeader：获取所有的响应报头
• getResponseHeader(‘xx’)：查询响应中某个字段的值

JSON

语法：json数组在[]中书写，对象在{}中书写，布尔值和null直接书写，其余类型在“”中书写。

使用 var jsonobj = JSON.parse({‘data’ : ‘aaa’}); 来解析json

json校验工具

jQuery中的Ajax

• jQuery.ajax([settings])
• type : 类型，“POST”或“GET”，默认为“GET”
• url : 发送请求的地址
• data : 是一个对象，连同请求发送到服务器的数据
• dataType : 预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断。一般采用json, “json”
• success : 是一个方法，请求成功后的回调函数。传入返回数据，以及包含成功代码的字符串。只要response状态码是200就代表成功
• error : 一个方法，请求失败时调用此函数。传入XMLHttpRequest对象

$(document).ready(function(){
    $("#发送请求").click(function(){
        $.ajax({
            type : "GET",
            url : "url?param=" + $("#控件").val(),
            dataType : "json",
            //此时data已经完成解析，为json数据
            success : function(data){
                alert(data.name + data.password);
            },
            //请求失败的回调函数有一个XMLHttpRequest对象参数，能拿到HTTP响应
            error : function(XHR){
                alert("状态码" + XHR.status);
            },
            data : {
                //jQuery中属性名不需要加""
                name : $("#控件").val(),
                password : $("#控件").val()
            }
        })
    })
})

常用语法	说明
$(selector).load(url,[data],[callback])	请求加载服务器中数据
$.get(url,[callback])	发起GET请求
$.post(url,[jsondata],[callback])	发起POST请求
$(selector).serialize()	将内容序列化，可以用于url传多个相同参数时使用，仅属于form提交的数据转化
$.param(obj)	对任意对象进行序列化，用于组成URL传参
$.ajaxSetup({property : data})	用于设置全局Ajax默认项
$(selector).ajaxStart(function())	在Ajax请求发出前触发函数
$(selector).ajaxStop(function())	在Ajax请求发出后触发函数
$.isEmptyObject(obj)	判断obj是否为空
$.contains(node_a, node_b)	判断node_a是否包含node_b