AJAX

---

JavaScript-ajax

参考自w3school

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

---

AJAX - 创建 XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础。

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象：

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

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

---

AJAX - 向服务器发送请求

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

向服务器发送请求：

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);xmlhttp.send();

方法描述open(method,url,async)

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

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

• string：仅用于 POST 请求

---

GET 请求

一个简单的 GET 请求：

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

在上面的例子中，您可能得到的是缓存的结果。为了避免这种情况，请向 URL 添加一个唯一的 ID：

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

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);xmlhttp.send();

---

POST 请求

一个简单 POST 请求：

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

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Bill&lname=Gates");

方法描述setRequestHeader(header,value)

向请求添加 HTTP 头。

• header: 规定头的名称
• value: 规定头的值

---

url - 服务器上的文件

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

xmlhttp.open("GET","ajax_test.asp",true);

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

---

异步 - True 或 False？
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

xmlhttp.open("GET","ajax_test.asp",true);

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。
通过 AJAX，JavaScript 无需等待服务器的响应，而是：

• 在等待服务器响应时执行其他脚本
• 当响应就绪后对响应进行处理

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }xmlhttp.open("GET","test1.txt",true);xmlhttp.send();

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：

xmlhttp.open("GET","test1.txt",false);

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
注释：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

xmlhttp.open("GET","test1.txt",false);xmlhttp.send();document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

---

AJAX - 服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性描述responseText获得字符串形式的响应数据。responseXML获得 XML 形式的响应数据。

---

responseText 属性

如果来自服务器的响应并非 XML，请使用 responseText 属性。
responseText 属性返回字符串形式的响应，因此您可以这样使用：

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

---

responseXML 属性

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：
请求 books.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;

---

AJAX - onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：

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

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

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

status

200: “OK”

404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

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

---

使用 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;    }  });}

<html><head><script type="text/javascript">var xmlhttp;function loadXMLDoc(url,cfunc){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=cfunc;xmlhttp.open("GET",url,true);xmlhttp.send();}function myFunction(){loadXMLDoc("/ajax/test1.txt",function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  });}</script></head><body><div id="myDiv"><h2>Let AJAX change this text</h2></div><button type="button" onclick="myFunction()">通过 AJAX 改变内容</button></body></html>

jQuery-ajax

下面的表格列出了所有的 jQuery AJAX 方法

方法 描述 $.ajax() 执行异步 AJAX 请求 .ajaxPrefilter()|在每个请求发送之前且被.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项 $.ajaxSetup() 为将来的 AJAX 请求设置默认值 $.ajaxTransport() 创建处理 Ajax 数据实际传送的对象 $.get() 使用 AJAX 的 HTTP GET 请求从服务器加载数据 $.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码的数据 $.getScript() 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript $.param() 创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串） $.post() 使用 AJAX 的 HTTP POST 请求从服务器加载数据 ajaxComplete() 规定 AJAX 请求完成时运行的函数 ajaxError() 规定 AJAX 请求失败时运行的函数 ajaxSend() 规定 AJAX 请求发送之前运行的函数 ajaxStart() 规定第一个 AJAX 请求开始时运行的函数 ajaxStop() 规定所有的 AJAX 请求完成时运行的函数 ajaxSuccess() 规定 AJAX 请求成功完成时运行的函数 load() 从服务器加载数据，并把返回的数据放置到指定的元素中 serialize() 编码表单元素集为字符串以便提交 serializeArray() 编码表单元素集为 names 和 values 的数组

---

jQuery ajax() 方法

ajax() 方法用于执行 AJAX（异步 HTTP）请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

语法

$.ajax({name:value, name:value, ... })

该参数规定 AJAX 请求的一个或多个名称/值对。
下面的表格中列出了可能的名称/值：

名称 值/描述 async 布尔值，表示请求是否异步处理。默认是 true。 beforeSend(xhr) 发送请求前运行的函数。 cache 布尔值，表示浏览器是否缓存被请求页面。默认是 true。 complete(xhr,status) 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。 contentType 发送数据到服务器时所使用的内容类型。默认是：”application/x-www-form-urlencoded”。 context 为所有 AJAX 相关的回调函数规定 “this” 值。 data 规定要发送到服务器的数据。 dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。 dataType 预期的服务器响应的数据类型。 error(xhr,status,error) 如果请求失败要运行的函数。 global 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 ifModified 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 jsonp 在一个 jsonp 中重写回调函数的字符串。 jsonpCallback 在一个 jsonp 中规定回调函数的名称。 password 规定在 HTTP 访问认证请求中使用的密码。 processData 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。 scriptCharset 规定请求的字符集。 success(result,status,xhr) 当请求成功时运行的函数。 timeout 设置本地的请求超时时间（以毫秒计）。 traditional 布尔值，规定是否使用参数序列化的传统样式。 type 规定请求的类型（GET 或 POST）。 url 规定发送请求的 URL。默认是当前页面。 username 规定在 HTTP 访问认证请求中使用的用户名。 xhr 用于创建 XMLHttpRequest 对象的函数。

---

例子
使用 AJAX 请求改变 <div> 元素的文本：

$("button").click(function(){    $.ajax({url:"demo_test.txt",success:function(result){    $("#div1").html(result);    }});});

---

jQuery ajaxSetup() 方法

ajaxSetup() 方法为将来的 AJAX 请求设置默认值。

语法

 $.ajaxSetup({name:value, name:value, ... })

该参数为带有一个或多个名称/值对的 AJAX 请求规定设置。
下面的表格中列出了可能的名称/值：

名称 值/描述 async 布尔值，表示请求是否异步处理。默认是 true。 beforeSend(xhr) 发送请求前运行的函数。 cache 布尔值，表示浏览器是否缓存被请求页面。默认是 true。 complete(xhr,status) 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。 contentType 发送数据到服务器时所使用的内容类型。默认是：”application/x-www-form-urlencoded”。 context 为所有 AJAX 相关的回调函数规定 “this” 值。 data 规定要发送到服务器的数据。 dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。 dataType 预期的服务器响应的数据类型。 error(xhr,status,error) 如果请求失败要运行的函数。 global 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 ifModified 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 jsonp 在一个 jsonp 中重写回调函数的字符串。 jsonpCallback 在一个 jsonp 中规定回调函数的名称。 password 规定在 HTTP 访问认证请求中使用的密码。 processData 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。 scriptCharset 规定请求的字符集。 success(result,status,xhr) 当请求成功时运行的函数。 timeout 设置本地的请求超时时间（以毫秒计）。 traditional 布尔值，规定是否使用参数序列化的传统样式。 type 规定请求的类型（GET 或 POST）。 url 规定发送请求的 URL。默认是当前页面。 username 规定在 HTTP 访问认证请求中使用的用户名。 xhr 用于创建 XMLHttpRequest 对象的函数。

---

例子
为所有 AJAX 请求设置默认 URL 和 success 函数：

$("button").click(function(){    $.ajaxSetup({url:"demo_ajax_load.txt",success:function(result){        $("div").html(result);    }});    $.ajax();});

---

jQuery get() 方法

$.get() 方法使用 HTTP GET 请求从服务器加载数据。

语法

$.get(URL,data,function(data,status,xhr),dataType) 

参数 描述 URL 必需。规定您需要请求的 URL。 data 可选。规定连同请求发送到服务器的数据。 function(data,status,xhr) 可选。规定当请求成功时运行的函数。
额外的参数：

• data - 包含来自请求的结果数据
• status - 包含请求的状态（”success”、”notmodified”、”error”、”timeout”、”parsererror”）
• xhr - 包含 XMLHttpRequest 对象

dataType 可选。规定预期的服务器响应的数据类型。
默认地，jQuery 会智能判断。
可能的类型：

• “xml” - 一个 XML 文档
• “html” - HTML 作为纯文本
• “text” - 纯文本字符串
• “script” - 以 JavaScript 运行响应，并以纯文本返回
• “json” - 以 JSON 运行响应，并以 JavaScript 对象返回
• “jsonp” - 使用 JSONP 加载一个 JSON 块，将添加一个 “?callback=?” 到 URL 来规定回调

---

例子

请求 “test.php”，但是忽略返回结果：

 $.get("test.php");

请求 “test.php” 并连同请求发送一些额外的数据（忽略返回结果）：

 $.get("test.php", { name:"Donald", town:"Ducktown" });

请求 “test.php” 并传递数据数组到服务器（忽略返回结果）：

 $.get("test.php", { 'colors[]' : ["Red","Green","Blue"] });

请求 “test.php” 并提醒请求的结果：

 $.get("test.php", function(data){     alert("Data: " + data); });

---

jQuery getJSON() 方法

getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。

语法

 $.getJSON(url,data,success(data,status,xhr)) 

参数 描述 url 必需。规定将请求发送到哪个 URL。 data 可选。规定发送到服务器的数据。 success(data,status,xhr) 可选。规定当请求成功时运行的函数。
额外的参数：

• data - 包含从服务器返回的数据
• status - 包含请求的状态（”success”、”notmodified”、”error”、”timeout”、”parsererror”）
• xhr - 包含 XMLHttpRequest 对象

---

例子
使用 Ajax 请求获取 JSON 数据，并输出结果：

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

---

jQuery getScript() 方法

getScript() 方法使用 AJAX 的 HTTP GET 请求获取和执行 JavaScript。

语法

 $(selector).getScript(url,success(response,status)) 

参数 描述 url 必需。规定将请求发送到哪个 URL。 success(response,status) 可选。规定当请求成功时运行的函数。
额外的参数：

• response - 包含来自请求的结果数据
• status - 包含请求的状态（”success”、”notmodified”、”error”、”timeout”、”parsererror”）

---

例子
使用 AJAX 请求，获取和运行 JavaScript：

$("button").click(function(){    $.getScript("demo_ajax_script.js");});

---

jQuery param() 方法

param() 方法创建数组或对象的序列化表示形式。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

语法

 $.param(object,trad)

参数 描述 object 必需。规定要序列化的数组或对象。 trad 可选。布尔值，指定是否使用参数序列化的传统样式。

---

实例
输出序列化对象的结果：

personObj=new Object();personObj.firstname="John";personObj.lastname="Doe";personObj.age=50;personObj.eyecolor="blue"; $("button").click(function(){  $("div").text($.param(personObj));});

输出：firstname=John&lastname=Doe&age=50&eyecolor=blue

---

jQuery post() 方法

$.post() 方法使用 HTTP POST 请求从服务器加载数据。

语法

 $(selector).post(URL,data,function(data,status,xhr),dataType) 

参数 描述 URL 必需。规定将请求发送到哪个 URL。 data 可选。规定连同请求发送到服务器的数据。 function(data,status,xhr) 可选。规定当请求成功时运行的函数。
额外的参数：

• data - 包含来自请求的结果数据
• status - 包含请求的状态（”success”、”notmodified”、”error”、”timeout”、”parsererror”）
• xhr - 包含 XMLHttpRequest 对象

dataType 可选。规定预期的服务器响应的数据类型。
默认地，jQuery 会智能判断。
可能的类型：

• “xml” - 一个 XML 文档
• “html” - HTML 作为纯文本
• “text” - 纯文本字符串
• “script” - 以 JavaScript 运行响应，并以纯文本返回
• “json” - 以 JSON 运行响应，并以 JavaScript 对象返回
• “jsonp” - 使用 JSONP 加载一个 JSON 块，将添加一个 “?callback=?” 到 URL 来规定回调

---

例子
使用 HTTP POST 请求从服务器加载数据：

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

---

jQuery serialize() 方法

serialize() 方法通过序列化表单值创建 URL 编码文本字符串。
您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

语法

 $(selector).serialize()

实例
输出序列化表单值的结果：

$("button").click(function(){    $("div").text($("form").serialize());});

---

jQuery serializeArray() 方法

serializeArray() 方法通过序列化表单值来创建对象（name 和 value）的数组。
您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。

语法

 $(selector).serializeArray()

实例
输出以数组形式序列化表单值的结果：

$("button").click(function(){    x=$("form").serializeArray();    $.each(x, function(i, field){        $("#results").append(field.name + ":" + field.value + " ");    });});

---

Ext JS-AJAX

Ext.data.Connection的一个单例。该类是用来和你的服务端代码进行交互的。

Ext.Ajax.request()方法

Parameters：

• options : Object

  一个包含如下属性的属性对象:

  (由于此参数对象还会作为参数传给回调函数, 所以此对象中还可以包含一些其他的自定义参数用于在回调函数中处理.)

  • url : String/Function

    发送请求的URL, 或一个返回URL字符串的函数, 函数的作用域为scope属性值.默认为当前Connection对象的url属性值.

  • params : Object/String/Function

    一个包含所有发送给服务器的请求参数的属性对象, 或一个url编码字符串, 或一个能返回前二者之一的函数. 函数的作用域为scope属性值.

  • method : String

    请求使用的HTTP方式, 默认为当前Connection对象的method属性值,或当method为空时, 无参数就使用”GET”, 有参数就使用”POST”.注意: 此参数名称是区分大小写的, 所以应该全为大写.

  • callback : Function

    在收到HTTP响应之后调用的函数. 此回调函数无论响应结果为成功或失败都会执行. 函数参数如下:

    Parameters

    • options : Object

      调用request函数时的参数.

    • success : Boolean

      如果请求成功则为’true’.

    • response : Object

      包含了响应数据的XMLHttpRequest对象

  • success : Function

    在请求成功返回时调用此函数. 函数参数如下:

    Parameters

    • response : Object

      包含了响应数据的XMLHttpRequest对象.

    • options : Object

      调用request函数时的参数.

  • failure : Function

    在请求返回失败时调用此函数. 函数参数如下:

    Parameters

    • response : Object

      包含了响应数据的XMLHttpRequest对象.

    • options : Object

      调用request函数时的参数.

  • scope : Object

    执行回调函数时的作用域: 即回调函数中”this”所指的对象. 如果url或params参数被指定为返回参数值的函数时, 那么此作用域也这对这些函数起作用. 默认为浏览器的window对象.

  • timeout : Number

    本次请求的超时时间(毫秒).默认为30秒.

  • form : Ext.Element/HTMLElement/String

    提交参数的表单的 <form> 元素对象或<form> 元素的ID

  • isUpload : Boolean

    仅当与form参数一同使用时有意义.

    ‘true’表示表单对象是一个文件上传栏(当form表单设置了属性enctype "multipart/form-data"时, 此参数自动为’true’).

    • 文件上传功能无法通过普通的”Ajax”技术实现, 因为它们不支持XMLHttpRequests. 于是我们用标准的提交form表单的方式取而代之:我们使用一个临时的<form>元素, 并将其 href=”http://www.w3.org/TR/REC-html40/present/frames.html#adef-target”>target属性指定一个动态生成的隐藏的<iframe>, 此iframe插入到当前页面文档中并且在收到返回数据之后被删除.

    服务器的响应由浏览器进行解析, 用来为IFRAME创建页面文档. 如果服务器端使用JSON发送响应对象, 那么响应头中的 href=”http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.17”>Content-Type必须设置为”text/html”来通知浏览器将文本保持原样的插入页面文档中.

    从页面文档重新读取响应文本, 创建一个包含responseText响应文本属性的虚拟XMLHttpRequest对象,用来满足事件触发和回调函数的要求.

    需要注意的是文件上传时的数据包是以 href=”http://www.faqs.org/rfcs/rfc2388.html”>multipart/form的内容类型发送的, 而一些服务器端技术(特别是像JEE)可能需要一些特殊处理来从数据包内容中重新读取参数名称和参数值.

  • headers : Object

    请求头信息.

    
    
  • xmlData : Object

    发送的XML文本. 注意: 使用此参数将取代params参数来发送请求数据.
    所有params中的参数将被追加到URL后面.

    
    
  • jsonData : Object/String

    发送的JSON数据. 注意: 使用此参数将取代params参数来发送请求数据.
    所有params中的参数将被追加到URL后面.

    
    
  • disableCaching : Boolean

    设为’true’时即会在GET方式的请求中添加一个不重复的参数来禁用缓存.

    
    
  • withCredentials : Boolean

    设为’true’时即会给XHR对象添加withCredentials属性.