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":"[e-mail]"    },    {        "name":"李四",        "sex":"女",        "email":"[e-mail]"    }]

<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": "[e-mail]"    },    {        "name": "李四",        "sex": "女",        "email": "[e-mail]"    }];    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>