@czyczk 2018-01-28T13:58:34.000000Z 字数 7697 阅读 192

Ajax

Front-End Ajax jQuery

1 基础姿势

1.1 XMLHttpRequest

XMLHttpRequest 是 Ajax 的基础，用于与后台交换数据，在不刷新页面的情况下更新内容。
除 IE5、IE6 等老浏览器不内建 XMLHttpRequest，要用 ActiveX 对象。

var xmlhttp;
if (window.XMLHttpRequest) {
    // IE7+、Firefox、Chrome、Opera 等执行
    xmlhttp = new XMLHttpRequest();
} else {
    // IE6、IE5 浏览器执行
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

1.2 向服务器发送请求

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

方法	描述
open(method, url, async)	method: GET 或 POST；url: 服务器上的文件位置；async: true 或 false。请求的文件可以是文本或脚本等。用于 AJAX 时必须使用异步。
send(string)	string: 仅用于 POST。
setRequestHeader(header, value)	向请求添加 HTTP 头。

GET 还是 POST
GET 比 POST 更简单更快，大部分情况都能用。然而以下情况只能用 POST：
1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
示例

发送 POST 请求。

xmlhttp.open("POST", "/try/ajax/demo_post.php", true);
xmlhttp.send();

若要发送表单，使用 setRequestHeader() 来添加 HTTP 头。

xmlhttp.open("POST", "/try/ajax/demo_post2.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 参数为 header, content
xmlhttp.send("fname=Henry&lname=Ford");

请求一个文本文档，并根据它覆写页面内容。

xmlhttp.open("GET", "/try/ajax/ajax_info.txt", true);
xmlhttp.send();
document.getElementById("myDiv").innerHTML = xmlhttp.resposeText;

关于服务器来的回应详见下节。

1.3 处理来自服务器的响应

包含在 xmlhttp 对象中。

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

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

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;

1.4 onreadystatechange 事件

XMLHttpRequest 中有 readyState 属性，它存着 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 的三个重要信息：

属性	描述
onreadystatechange	本身是个函数。每当 readyState 发生改变时，就触发这个函数。
readyState	存有 XMLHttpRequest 的状态。0：请求未初始化；1：服务器连接已建立；2：请求已接收；3：请求处理中；4：请求已完成，且响应已就绪。
status	200：OK；404：页面未找到。

每当 readyState 被改变时就会触发这个事件（在一个完整的请求中，这个事件被触发 5 次）。
通常我们要在状态为成功的时候，即 readyState == 4 && status == 200 时处理事件。

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

上面这种写法中，所有请求都会触发相同的事件，产生相同的行为。如果要为不同的请求定义不同的行为，可以使用回调函数（把一个函数（可以是匿名函数）作为参数）。

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

2 Starting Again with jQuery

2.1 Requests

A very basic request (minimal form):

$.ajax({ url: "address", success: handlerFunction} );

Simple handler (the contents in the address are passed into the handler function as parameters).
For example:

function logText(text) {
    console.log("Text from server is %o.", text);
}
$.ajax({ url: "server-result.txt", success: logText });

Options for request

$.ajax({ ... });

Option	Description
url	Almost always used.
success	Almost always used. Invoke the success handler function (can be an array of functions).
cache	When using "GET" method, browsers are allowed to cache the result. If cache is enabled, you may get the earlier result again.
data	Data to be sent to the URL (/ server).
dataType	..
error	The function to handle errors.
type	..
username	..
password	..

$.ajax({ url: "target.txt", success: successHandler, error: errorHandler });
$.ajax({ url: "target.txt", success: [handler1, handler2, ...] });

Cache
    In "GET" method, browsers are permitted to cache the result (if enabled in the browser as well). So you may get the same result again if the request URLs are the same. It's good to cache for the same request sometimes, but if you want to ensure you get the latest or different result for the same request, set cache to false or use "POST" method.

2.2 Handler Functions

Options for handler functions

function someHandler(text, status, request) { ... }

Option	Description
text	Contents in the requested file. Response data from server.
status	"success" or "notmodified". Meaningful in error handlers.
request	The XMLHttpRequest object mentioned in the previous sections.

3 Dealing with Dynamic Contents

3.1 Requests for Scripts

3.1.1 An Example

server-time.jsp

It is now <=% new java.util.Date() %>

someScript.js

function showTime(text) {
    $.ajax({ url: "server-time.jsp", cache: "false", success: logText });
}
function logText(text) { ... }

somePage.html

<html>
<head>
    ...
    <script src="scripts/jquery.js"></script>
    <script src="scripts/someScript.js"></script>
</head>
<body>
    ...
    <input type="button" id="showTimeButton" value="Show Time" onclick="showTime()" />
</body>

3.1.2 Unobstructive Javascript

In the example in the previous section, elements in an HTML document need to register handlers. In the fashion of jQuery, it's more encouraged to register handlers in Javascript scripts instead of in the elements.
someScript.js

$(function() {
    // This function runs after the DOM is loaded, but does not wait for images,
    // as with  window.onload in raw Javascript.
    // Use this approach to set up all event handlers
    // $("#elementId").click(someHandler);
    $("#showTimeButton").click(showTime);
});
function showTime...

3.2 Manipulating HTML Elements

3.2.1 General Procedures

$("some").html(result); // The result can be text response from the server or the proccessed text.

Usually, first prepare some elements identified with IDs in the HTML pages.
For example:

<div id="resultDiv"></div>
<span id="targetSpan"></span>

3.2.2 Do Quick Insertion

Use the built-in handler.

$(function{
    $("#show-time-button-2").click(showTime2);
});
function showTime2() {
    insertAjaxResult("show-time.jsp", "#time-result");
}

// Simplest form
$("#result-area-id").load("url");
// Most common form in real life. Pass data to the url, retrieve the contents and insert them to the element
$("#result-area-id").load("url", data);
// + an additional handler that is invoked after the built-in handler
$("#result-area-id").load("url", data, handlerFunction);

Why do we need additional handlers?
To do extra work, such as highliting the results and hiding the "waiting for data..." message.
Reminder: .load call is asynchronous!
This fails:

$("#waiting-message-div").show();
$("#result-div").load("some-url");
$("#waiting-message-div").hide();

3.3 Sending Data to the Server

Most servers want input data in form of name1=val1&name2=val2.
$.ajax({ url: ..., success: ..., data: ...});
$("#result-area-id").load("url", data);
The data can be
- a String that is sent unchanged (make sure it's URL-encoded or use .serialize())
- encapsulated as a JSON object (URL encoded automatically)
- appended on end of URL (if in GET) or POSTed
Equivalent examples:

$.ajax({ ... data: "name1=foo+bar%21&name2=baz" });

$.ajax({ ... data: { name1: "foo bar!", name2: "baz" } });

.serialize()

$.ajax({ ... data: $("#form-id").serialize() });

3.3.1 Shortcuts

.get

$.get("url", dataObj, someFunc);
$.ajax({ url: "url", data: dataObj, success: someFunc });

.post

$.post("url", dataObj, someFunc);
$.ajax({ url: "url", data: dataObj, success: someFunc, type: "post" });

.getJSON

$.getJSON("url", dataObj, someFunc);
$.ajax({ url: "url", data: dataObj, success: someFunc, dataType: "json" });

Disadvantages of shortcuts
- Inconvenient to switch from GET to POST
- No direct argument to supply error handler
- Not convenient as $.ajax when no data is to be sent

3.4 Receiving JSON Objects

function showCto() {
    $.ajax({ url: "executives.json", dataType: "json", success: showCtoHeading });
}
function showCtoHeading(companyExecutives) {
    // The receivied JSON string is automatically parsed into an object
    $("#cto-result").html("<h2>Chief Technology Officer is: " + companyExecutives.cto + "</h2>");
}

4 Promises and Deferred Objects

4.1 Making Handlers More Modular and Reusable

Replace

$.ajax({ url: remoteAddress,
         success: successHandler,
         complete: completeHandler,
         error: errorHandler });

with this:

var req = $.ajax({ url: remoteAddress });
req.done(successHandler);
req.always(completeHandler);
req.fail(errorHandler);

If additional handlers need to be added, simply do:

req.done(additionalSuccessHandler);

常见服务器状态码

服务器常用的状态码及其对应的含义如下：

200：服务器响应正常。
304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
400：无法找到请求的资源。
401：访问资源的权限不够。
403：没有权限访问资源。
404：需要访问的资源不存在。
405：需要访问的资源被禁止。
407：访问的资源需要代理身份验证。
414：请求的URL太长。
500：服务器内部错误。