jQuery篇之AJAX（jQuery解决了AJAX不同浏览器兼容问题）

目录
    1. 原生 AJAX
    2. JQuery AJAX

AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）
局部更新网页，无需重新加载整个网页

1. AJAX原生使用

var xmlhttp;
if (window.XMLHttpRequest){ 
    // 大多数浏览器 code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}else{
    // 旧版本IE code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest 对象:AJAX 的基础,所有现代浏览器均支持。

onreadystatechange

/* readyState状态改变后就会调用
readyState
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成，且响应已就绪
*/
xmlhttp.onreadystatechange=function(){
/*
收到响应后的处理方法：
状态文本
    xmlhttp.statusText
请求成功是否状态值(200，404)
    xmlhttp.status  
所有响应头
    xmlhttp.getAllResponseHeaders()
指定的响应头
    xmlhttp.getResponseHeader('Last-Modified')
状态值
    xmlhttp.readyState 见上
*/
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
      // 以字符串形式获取
      xmlhttp.responseText;
      // 以xml形式获取
      xmlhttp.responseXML;      
    }else if(xmlhttp.status==404){  // 路径错误
    }
}

GET

简单也更快

// 设置（请求方式，请求路径，是否异步：绝大多数情况下：true）,并发送请求
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

POST

// 可向服务器发送大量数据（POST 没有数据量限制）
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

2. JQuery AJAX

ajax (请求数据（最底层），默认：get方式)

  $.ajax({
    url:"https://www.imooc.com/data/check.php",
    data: { num: $("#txtNumber").val() },
    dataType:"text",
    success: function (data) {
      $("ul").append("<li>你输入的<b>  "
      + $("#txtNumber").val() + " </b>是<b> "
      + data + " </b></li>");
    }
  });

  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);

ajaxSetup （设置Ajax请求的公共 参数、函数回调）

jQuery.ajaxSetup([options])或$.ajaxSetup([options])
    设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值

             $.ajaxSetup({
                    dataType:"text",
                    success:function(data){
                        $("ul").append("<li>你输入的<b>  "
                            + $("#txtNumber").val() + " </b>是<b> "
                            + data + " </b></li>");
                    }
            });

            // 将不再需要设置dataType为text、success方法
            $.ajax({
                  data: { num: $("#txtNumber").val() },
                  url: "https://www.imooc.com/data/check.php"
            });    // 请求成功后会调用上面的success方法
            $.ajax({
                  data: { num: $("#txtNumber").val() },
                  url: "https://www.imooc.com/data/check.php"
            }); 

serialize （序列化表单元素值，生成标准URL编码文本字符串）

$("form").serialize()
    将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求

生成数据格式：name=cx&sexSelect=0&LoveCheckbox=on

$("form").serializeArray();

  var params = { width:1900, height:1200 };
  var str = jQuery.param(params);

width=1900&height=1200

各种回调方法

  开始请求前调用  
  $("#txt").ajaxSend(function(e,xhr,opt){
    $(this).html("Requesting " + opt.url);
  });
  开始请求时调用
  $("#txt").ajaxStart(function(){
  });
  请求stop后调用
  $("#txt").ajaxStop(function(){
  });
  请求完成后调用
  $("#txt").ajaxComplete(function(){
  });
  请求出错时调用
  $("#txt").ajaxError(function(){
  });
  请求成功后调用
  $("#txt").ajaxSuccess(function(){
  });


例：
        <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.ajax({
                        url: "https://www.imooc.com/data/info_f.php",
                        dataType: "json",
                        success: function (data) {
                            $this.attr("disabled", "true");
                        $("ul").append("<li>我的名字叫：" + data.name + "</li>");
                        }
                    });
                })
                $("#divload").ajaxStart(function(){
                    $(this).html("正在请求数据...");
                });
                $("#divload").ajaxStop(function(){
                    $(this).html("数据请求完成！");
                });
            });
        </script>

避免和其他三方库冲突

重命名$为cx

var cx = $.noConflict();
cx(document).ready(function(){
  cx("button").click(function(){
    cx("p").text("hello");
  });
});

load（请求服务器数据（html内容），并把返回的数据显示到指定的元素中）

    $(selector).load(url,[data],[callback])
    参数：url，请求参数，获取数据后的回调（异步）

例：

    // 将获取到的结果加载到ul中，替换掉img，请求失败时为img
    $("ul").html("<img src='Images/Loading.gif' alt=''/>")
           .load("https://www.imooc.com/data/fruit_part.html",function(){
           });

    $("#div1").load("https://www.baidu.com",function(responseTxt,statusTxt,xhr){    
        // responseTxt，状态，XMLHttpRequest对象
        $(this).attr("disabled","true");
        if(statusTxt=="success")
          alert("外部内容加载成功！");
        if(statusTxt=="error")
          alert("Error: "+xhr.status+": "+xhr.statusText);
    });

getJSON (请求 JSON格式数据)

  jQuery.getJSON(url,[data],[callback])
  $.getJSON(url,[data],[callback])

例：

  $.getJSON("demo_ajax_json.js",function(result){
    $.each(result, function(i, field){
      $("div").append(field + " ");
    });
  });

getScript (请求并执行 js脚本文件)

jQuery.getScript(url,[callback])
$.getScript(url,[callback])

例：
  $.getScript("https://www.imooc.com/data/sport_f.js",function(){
  });

get（请求数据GET方式）

$.get(url,[callback])

例：
    $.get("demo_test.asp",function(data,status){
        alert("Data: " + data + "\nStatus: " + status);
    });

post （请求数据POST方式）

请求数据
$.post(url,[data],[callback])

例：（地址，参数，获得结果后）
    $.post("demo_test_post.asp",{
        name:"Donald Duck",
        city:"Duckburg"
      },function(data,status){
        alert("Data: " + data + "\nStatus: " + status);
      });