AJAX基础和jQuery中的AJAX

AJAX是在不重新加载整个页面的情况下，与服务器交换数据并异步更新部分网页。
1. javascript使用ajax
（1）生成XMLHttpRequest对象

var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

（2）XMLHttpRequest对象向服务器发送请求

//语法xmlhttp.open(method,url,async)
xmlhttp.open("GET","TEST1.txt",true);
xmlhttp.send();

method:请求的类型有GET 或POST
url：文件在服务器上的位置
async:true（异步，默认方式），false（同步）
使用POST请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量的数据（post没有数据量的限制）
发送包含未知字符的用户输入时，post比get更稳定可靠
（3）服务器响应
使用XMLHttpRequest对象的responseText或responseXML属性获得服务器的响应
responseText:获得字符串形式的响应数据
responseXML：获得XML形式的响应数据

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>

<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
//首先创建一个对象
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)//请求完成，响应就绪
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，使用 responseXML 属性

<h2>My Book Collection:</h2>
<div id="myDiv"></div> //一个空的div
<button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button>//按钮，点击调用函数


<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
//创建对象
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    xmlDoc=xmlhttp.responseXML; //获取XML对象
    txt="";
    x=xmlDoc.getElementsByTagName("title");//取出XML中所有title
    for (i=0;i<x.length;i++)
      {
      //取出每一项及对应值
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
      }
    document.getElementById("myDiv").innerHTML=txt;
    }
  }
xmlhttp.open("GET","/example/xmle/books.xml",true);
xmlhttp.send();
}
</script>

2.jQuery中ajax技术

（1）jquery中load方法load(url,[data],[callback])

<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>

<script>
$(document).ready(function(){
  $("#btn1").click(function(){ //点击按钮触发事件
    $('#test').load('/example/jquery/demo_test.txt');
  })
})
</script>

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

<script>
$(document).ready(function(){
  $("button").click(function(){    $("#div1").load("/example/jquery/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功！");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>

（2）get()方法通过远程HTTP GET请求载入信息
$(selector).get(url,data,success(response,status,xhr),dataType)

$.get("test.php");//请求test.php网页，忽略返回值

$.get("test.cgi", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  });

post用法与get用法相似

//发送数据并输出结果
$.post("test.php", { name: "John", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
   });

3.getJSON方法
虽然load方法可以很快的加载数据到页面上，但是有时需要对获取的数据进行处理，但这样获取的内容必须先插入页面中，然后才能进行，因此它的执行效率不高。

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

首先创建一个.json格式的文件UserInfo.json:

[
    {
        "name":"张三",
        "sex":"男",
        "email":"zhangsan@163.com"
    },
    {
        "name":"李四",
        "sex":"女",
        "email":"lisi@163.com"
    }
]

<script type="text/javascript" >
        $(function () {
            $("#Button1").click(function () {
                $.getJSON("UserInfo.json", function (data) {
                    $("#divTip").empty();//清空div
                    var strHtml = "";//建立空变量，存储获取的内容
                    $.each(data, function (infoIndex, info) {
                        strHtml += "姓名：" + info["name"] + "<br>";
                        strHtml += "性别：" + info["sex"] + "<br>";
                        strHtml += "邮箱：" + info["email"] + "<br>";
                    })
                    $("#divTip").html(strHtml);
                })
            })
        })
    </script>

4 getScript方法

创建一个文件UserInfo.js:

var data = [
    {
        "name": "张三",
        "sex": "男",
        "email": "zhangsan@163.com"
    },
    {
        "name": "李四",
        "sex": "女",
        "email": "lisi@163.com"
    }
];

    var strHtml = "";
    $.each(data, function () {
        strHtml += "姓名：" + this["name"] + "<br>";
        strHtml += "性别：" + this["sex"] + "<br>";
        strHtml += "邮箱：" + this["email"] + "<br>";
    })
    $("#divTip").html(strHtml);

<script type="text/javascript" >
        $(function () {
            $("Button1").click(function () {
                $.getScript("UserInfo.js");
            })
        })
    </script>