AJAX笔记

一、ajax实现步骤：1、创建XMLHttpRequest对象
           2、设置回调函数
            xmlHttp.onreadystatechange = function() {
                if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {
                // 根据不同的返回类型处理响应
            }
           3、初始化XMLHttpRequest组件
            xmlHttp.open( type, url, async );

        get:xmlHttpRequest.open("GET",url,true);
        post:xmlHttpRequest.open("POST",url,true);
            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
           4、发送请求
            xmlHttp.send( null / string );

        get:xmlHttpRequest.send(null);
        post:xmlHttpRequest.send(数据信息);

二、XMLHttpRequest对象和ActiveX对象
    //  兼容写法
    // 如果是 IE7+,FF 等高级浏览器
    if(window.XMLHttpRequest) {
    return new XMLHttpRequest();
    }
    // 如果是IE 5,IE6 低版本浏览器
    if( window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP");
    }

三、XMLHttpRequest对象的属性
    onreadystatechange  处理服务器响应的函数

    readyState        服务器响应的状态信息：
                0请求未初始化
                1服务器连接已建成
                2请求已发送
                3请求处理中
                4请求已完成
    
    status            200：相应正确返回
                404：未找到页面
    
    responseTest        获取字符串形式的响应数据

    responseXML        获取XML形式的相应数据

四、XMLHttpRequest对象的方法
    open(method,url,async)   创建http请求；
                 method：请求的类型：GET或POST
                 url:服务器请求地址
                 async:是否异步请求，true(异步)或false(同步)

    send(string)         将请求发送到服务器
                 注意：string仅用于post方法，get方法为空或null
    
    setRequestHeader()       指定请求的某个HTTP头

    getResposeHeader()     从响应中获取指定的HTTP头

五、文本和 XML方式响应的区别
    文本：    var username = xmlHttpRequest.responseText;
        //省略其他代码……
     
    XML：   var dom = xmlHttpRequest.responseXML;
        ......
        if(dom){
            var userNodes = dom.getElementsByTagName("username");
            if( userNodes.length > 0 ){
                var username= userNodes[0].firstChild.nodeValue;
                //省略其他代码……
            }
        }

六、jQuery 实现 AJAX （简化原生 JavaScript 实现 AJAX ）
    $.ajax()方法

    $.ajax( {
        url : " 发送的请求地址",
        type : " 请求方式",
        data : " 要发送的数据",
        dataType : " 服务器返回的数据类型", // "xml html script json text"
        beforeSend : function(data) { // 码 发送请求前执行的代码 },
        success : function(data) { // 码 发送成功后执行的代码 },
        error : function() { // 码 请求失败执行的代码 }
    } );

    
   $.get() 方法
   是$.ajax()方法中类型为GET请求的简化版
    $.get() 方法
    $.get(
        " 发送的请求地址" ,
        要发送的数据 key/value ,
        回调函数 ,
        "返回内容格式，xml, html, script, json, text "
    );

 $.post() 方法
是$.ajax()方法中类型为POST请求的简化版
    $.post() 方法
    $.post(
        " 发送的请求地址" ,
        要发送的数据 key/value ,
        回调函数 ,
        " 返回内容格式，xml, html, script, json, text "
    );

$.getJSON() 方法
是$.get()方法中返回数据类型为JSON的简化版
    $.getJSON() 方法
    $.getJSON(
        " 发送的请求地址" ,
        要发送的数据 key/value ,
        回调函数
    );

$.getScript() 方法
通过 HTTP GET请求载入并执行一个JavaScript 文件
    $.getScript() 方法
    $. getScript(
        " 发送的请求地址" ,
        回调函数
    );

 serialize() 用于序列化表单内容为字符串
 好处：不用逐个去获取表单元素的值，拼凑参数序列
    serialize()
    $("form").serialize() ;
    // 返回参数序列
    single=Single&check=check2&radio=radio1