Ajax和jQuery

1.Ajax

    1.认识Ajax
        1.Ajax应用采用异步请求模式,不用每次请求都重新加载页面。
          发送请求后不需要等待服务器响应,而是可以继续原来的操作,在服务器响应完成后,浏览器再将响应展示给用户。
    2.Ajax简介
        Ajax并不是一种全新的技术,而是整合了JavaScript、XML、CSS等几种现有技术而成。
        Ajax的关键元素包括以下内容:
            1.JavaScript语言:Ajax技术的主要开发语言
            2.XML/JSON/HTML等:用来封装请求或响应的数据格式
            3.DOM(文档对象模型):通过DOM属性或方法修改页面元素,实现页面局部刷新。
            4.CSS:改变样式,美化页面效果，提升用户体验度。
    3.XMLHttpRequest
        XMLHttpRequest对象可以提供在不刷新当前页面的情况下向服务器端发送异步请求,并接收服务器端的返回结果,从而实现局部更新当前页面的功能。
        1.创建XMLHttpRequest对象语法
            老版本IE(IE5和IE6)
            XMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            新版本IE和其他大部分浏览器(推荐使用)
            XMLHttpRequest = new XMLHttpRequest();
        2.XMLHttpRequest对象常用属性和方法
                            XMLHttpRequest
        属性名称        说明
                        返回请求的当前状态,常用值:
                        0--未初始化
                        1--开始发送请求
        readyState        2--请求发送完成
                        3--开始读取响应
                        4--读取响应结束
        
        status            返回当前请求的HTTP状态码
                        常用值:
                            200--正确返回
                            404--找不到访问对象
        responseText    以文本形式获取响应值
        responseXML        以XML形式获取响应值,并且解析成DOM对象返回
        statusText        返回当前请求的响应行状态
        onreadystatechange 返回回调函数
        
        
                            XMLHttpRequest的常用方法
        方法名称                            说明
        open(String method,String url,        用于创建一个新的HTTP请求
                boolean async,String user    参数method:设置HTTP请求方法,如POST、GET等,对大小写不敏感;
        ,String password)                    参数url:请求的URL地址
                                            参数async:可选,指定此请求是否为异步方法,默认为true
                                            参数user:可选,如果服务器需要验证,此处需要指定用户名;否则,会弹出验证窗口
                                            参数password:可选,验证信息中的密码,如果用户名为空,此值将被忽略
        
        send(String date)                    发送请求到服务器端:
                                            参数date:字符串类型,通过此请求发送的数据。此参数值取决于open方法中的method参数。如果method值为"POST",需要指定该参数,如果method值为"GET",该参数为null。
        
        abort()                                取消当前请求
        setRequestHeader(String header,        单独设置请求的某个HTTP
        String value)                            参数header:要指定的HTTP头名称
                                                参数value:要指定的HTTP头名称所对应的值
        getResponseHeader(String header)    从响应中获取指定的HTTP头信息,
                                            参数header:要获取的指定HTTP头
        getAllResponseHeaders()                获取相应的所有HTTP头信息
        
    4.使用Ajax发送请求
        1.使用Ajax发送GET请求及处理响应
            //1.创建XMLHttpRequest对象
            if(window.XMLHttpRequest){ //返回值为true时说明是新版本IE或其他浏览器
                xmlHttpRequest= new XMLHttpRequest();
            }else{ //返回值为false时说明是老版本IE浏览器(IE5和IE6)
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2.设置回调函数
            xmlHttpRequest.onreadystatechange = callBack;
            //3.初始化XMLHttpRequest组件
            var url="server.jsp?name="+name; //服务器端URL地址,name为用户名文本框获取的值
            xmlHttpRequest.open("GET",url,true);
            //4.发送请求
            xmlHttpRequest.send(null);
            //回调函数callBack中处理服务器响应的关键代码
            function callBack(){
                if(xmlHttpRequest.readyState == 4&&xmlHttpRequest.status == 200){
                    var result = xmlHttpRequest.responseText;
                    //省略将服务器返回的文本数据显示到页面的代码
                }
            }
            注意:如果send()方法不设值,在不同的浏览器下可能存在不兼容问题。
        2.使用Ajax发送POST请求及处理响应
            //1.创建XMLHttpRequest对象
            if(window.XMLHttpRequest){ //返回值为true时说明是新版本IE或其他浏览器
                xmlHttpRequest= new XMLHttpRequest();
            }else{ //返回值为false时说明是老版本IE浏览器(IE5和IE6)
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2.设置回调函数
            xmlHttpRequest.onreadystatechange = callBack;
            //3.初始化XMLHttpRequest组件
            var url="server.jsp; //服务器端URL地址,name为用户名文本框获取的值
            xmlHttpRequest.open("POST",url,true);
            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            var date = "name="+name;//需要发送的数据信息,name为用户名文本框获取的值
            //4.发送请求
            xmlHttpRequest.send(date);
            //回调函数callBack中处理服务器响应的关键代码
            function callBack(){
                if(xmlHttpRequest.readyState == 4&&xmlHttpRequest.status == 200){
                    var result = xmlHttpRequest.responseText;
                    //省略将服务器返回的文本数据显示到页面的代码
                }
            }
            
                            GET与POST方式实现Ajax的区别
            发送方式    初始化XMLHttpRequest对象            发送请求
            GET            指定XMLHttpRequest对象的open()方法    指定XMLHttpRequest对象的send()方法中的date参数为null
                        中的method参数为"GET"
            POST        1.指定XMLHttpRequest对象的open()
                        方法中method参数为"POST"
                        2.指定XMLHttpRequest对象要请求的HTTP 指定XMLHttpRequest对象的send()方法中的date参数的值,
                        头信息,该HTTP请求头信息为固定写法。      即该请求需要携带的具体数据。

2.使用jQuery实现Ajax

    1.$.ajax()方法    
        $.ajax()可以通过发送HTTP请求加载远程数据,是jQuery最底层的Ajax实现,具有较高灵活性。
        语法:
        $.ajax([settings]);
        参数settings:$.ajax()方法的参数列表,用于配置Ajax请求的键值对集合。
                                $.ajax()常用参数表
        参数                                    说明
        String url                                发送请求的地址,默认为当前页地址
        String type                                请求方式(POST或GET,默认为GET)
        Number timeout                            设置请求超时时间
        Object date或String date                 发送到服务器的数据
        String dateType                          预期服务器返回的数据类型,可用类型有XML、HTML、Script、JSON、JSONP、Text
        function beforeSend(XMLHttpRequest xhr)    发送请求前调用的函数
                                                    参数xhr:可选,XMLHttpRequest对象
        function complete(XMLHttpRequest xhr,    请求完成后调用的函数(请求成功或失败时均调用)
            String ts)                                参数xhr:可选,XMLHttpRequest对象;ts:可选,描述请求类型的字符串
        function success(Object result,String ts) 请求成功后调用的函数:
                                                    参数result:可选,由服务器返回的数据
                                                    参数ts:可选，描述请求类型的字符串
        function error(XMLHttpRequest xhr,Sring     请求失败时被调用的函数
         en,Exception e)                            参数xhr:可选，XMLHttpRequest对象
                                                    参数en:可选,错误信息
                                                    参数e:可选,捕获的异常对象
        boolean global                            默认为true,表示是否触发全局Ajax事件
        
        示例:
        $.ajax({
            url:url,            //要提交的URL路径
            type:"GET",            //发送请求的方式
            data:data,            //要发送到服务器的数据
            dataType:"text",    //指定传输的数据格式
            success:function(result){    //请求成功后要执行的代码
                //省略将服务器返回的文本数据显示到页面的代码
            },
            error : function(){            //请求失败后要执行的代码
                alert("用户名验证时出现错误,请联系管理员!");
            }
        });
    2.其他Ajax方法
        1.$.get()方法    
            $.get()方法是jQuery封装的发送HTTPGET请求从服务器加载数据的Ajax方法,具体语法如下。
                $.get(url,data,success(resp,status,xhr),dataType);
        2.$.post()方法
            $.post()是jQuery封装的发送HTTPPOST请求从服务器加载数据的Ajax方法,具体语法如下。
                $.post(url,data,success(resp,status,xhr),dataType);
        3.load()
            load()方法通过发送Ajax请求从服务器加载数据,并把返回的数据放置到指定的元素中,具体语法如下。
                $(selector).load(url,data,function(result,status,xhr));
                

3.认识JSON

    1.JSON是一种轻量级的数据交换格式。它基于JavaScript的一个子集,采用完全独立于语言的文本格式。
        1.定义JSON对象
            语法:var JSON对象 = {key:value,key:value,...};
        2.定义JSON数组
            语法:var JSON数组 = {value,value,...};
    2.$.getJSON(url,data,success(result,status,xhr))