AJAX

---

1. 解释

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

• AJAX 是在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的艺术

2. AJAX XHR

2.1 XHR的创建

-XMLHttpRequest 是 AJAX 的基础

    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");    }

2.2 XHR 请求

• XMLHttpRequest 对象用于和服务器交换数据

2.2.1 向服务器发送请求

open(method,url,async)

• 规定请求的类型、URL 以及是否异步处理请求

• method：请求的类型；GET 或 POST

• url：文件在服务器上的位置

• async：true（异步）或 false（同步）

send(string)

• 将请求发送到服务器

• string：仅用于 POST 请求

2.2.2 GET 还是 POST

• 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

• 然而，在以下情况中，请使用 POST 请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）

  • 向服务器发送大量数据（POST 没有数据量限制）

  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

2.2.3 GET

一个简单的 GET 请求：

xmlhttp.open("GET","demo_get.asp",true);xmlhttp.send();

通过GET方法发送信息

xmlhttp.open("GET","demo_get.asp?name=Bill&password=123456",true);xmlhttp.send();

消除缓存影响

xmlhttp.open("GET","demo_get.asp?t"+Math.random(),true);xmlhttp.send();

2.2.3 POST

一个简单的 POST 请求：

xmlhttp.open("POST","demo_post.asp",true);xmlhttp.send();

通过POST方法发送信息

xmlhttp.open("POST","demo_post.asp?name=Bill&password=123456",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send();

setRequestHeader(header,value)

• 向请求添加 HTTP 头。

• header: 规定头的名称

• value: 规定头的值

2.2.4 url

• open() 方法的 url 参数是服务器上文件的地址

• 该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

2.2.5 async

• XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true

2.3 XHR 响应

2.3.1 服务器响应

• responseTest : 获得字符串形式的响应数据

• responseXML : 获得 XML 形式的响应数据

2.3.2 responseText

• 如果来自服务器的响应并非 XML

  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

2.3.3 responseXML

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

  xmlDoc=xmlhttp.responseXML;txt="";x=xmlDoc.getElementsByTagName("ARTIST");for (i=0;i<x.length;i++) {    txt=txt + x[i].childNodes[0].nodeValue + "<br />";}document.getElementById("myDiv").innerHTML=txt;

2.4 readystate

2.4.1 onreadystatechange 事件

• 当请求被发送到服务器时，我们需要执行一些基于响应的任务。

• 每当 readyState 改变时，就会触发 onreadystatechange 事件。

• readyState 属性存有 XMLHttpRequest 的状态信息

2.4.1.1 XMLHttpRequest对象的三个重要的属性

• onreadystatechange

  • 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

  • onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

• readyState

  • 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化

  • 1: 服务器连接已建立

  • 2: 请求已接收

  • 3: 请求处理中

  • 4: 请求已完成，且响应已就绪

• status

  • 200: “OK”

  • 404: 未找到页面

2.4.1.2 readyState 等于 4 且状态为 200 时，表示响应已就绪

    xmlhttp.onreadystatechange=function() {        if (xmlhttp.readyState==4 && xmlhttp.status==200) {            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;        }    }

2.4.2 使用 Callback 函数

• callback 函数是一种以参数形式传递给另一个函数的函数

• 如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

• 该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

  function myFunction(){    loadXMLDoc("ajax_info.txt",function(){        if (xmlhttp.readyState==4 && xmlhttp.status==200){            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;        }    });}

2. JQuery AJAX

2.1 jQuery load()

• load() 方法从服务器加载数据，并把返回的数据放入被选元素中

  $(selector).load(URL,data,callback);

  • 必需的 URL 参数规定您希望加载的 URL

  • 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合

  • 可选的 callback 参数是 load() 方法完成后所执行的函数名称

• 文件 “demo_test.txt”

  `<h2>jQuery and AJAX is FUN!!!</h2>``<p id="p1">This is some text in a paragraph.</p>`

• 把文件 “demo_test.txt” 的内容加载到指定的 <div> 元素中

  $("#div1").load("demo_test.txt");

• 把 “demo_test.txt” 文件中 id=”p1” 的元素的内容，加载到指定的 <div> 元素中

  $("#div1").load("demo_test.txt #p1");

• 可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

  • responseTxt - 包含调用成功时的结果内容

  • statusTXT - 包含调用的状态

  • xhr - 包含 XMLHttpRequest 对象

• 下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息

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

2.2 jQuery $.get()

• $.get() 方法通过 HTTP GET 请求从服务器上请求数据

  $.get(URL,callback);

  • 必需的 URL 参数规定您希望请求的 URL

  • 可选的 callback 参数是请求成功后所执行的函数名

• 使用 $.get() 方法从服务器上的一个文件中取回数据

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

• $.get() 的第一个参数是我们希望请求的 URL（”demo_test.asp”）。

• 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态

2.3 jQuery $.post()

• $.post() 方法通过 HTTP POST 请求从服务器上请求数据

  $.post(URL,data,callback,dataType);

  • 必需的 URL 参数规定您希望请求的 URL

  • 可选的 data 参数规定连同请求发送的数据

  • 可选的 callback 参数是请求成功后所执行的函数名

  • 可选的 规定预期的服务器响应的数据类型,默认执行智能判断（xml、json、script 或 html）

• 该函数是简写的 Ajax 函数，等价于:

  $.ajax({    type: 'POST',    url: url,    data: data,    success: success,    dataType: dataType});

• 使用 $.post() 连同请求一起发送数据

  $("button").click(function(){    $.post("demo_test_post.asp",{name:"Donald Duck",city:"Duckburg"},function(data,status){        alert("Data: " + data + "\nStatus: " + status);    });});

  • $.post() 的第一个参数是我们希望请求的 URL (“demo_test_post.asp”)。

  • 然后我们连同请求（name 和 city）一起发送数据

  • “demo_test_post.asp” 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果

  • 第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态