Ajax

Posted 2021-03-16 beotat

                          Ajax
Ajax 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax = 异步 javascript + XML。
Ajax 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

     Ajax 用于创造动态性更强的应用程序
     Ajax 可用来与数据库进行动态通信
     Ajax 可用来与 XML 文件进行交互通信
     创建 XMLHttpRequest 对象
     XMLHttpRequest 是 Ajax 的基础。
     XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

语法:variable = new XMLHttpRequest();

为了应对所有的现代浏览器，包括 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 对象的 open()和send()方法：

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

open(method, url, async)：规定请求的类型，URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
（该文件可以是任何类型的文件，比如 .txt 和 .xml；或者服务器脚本文件，比如 .asp 和 .php（在传回响应之前，能够在服务器上执行任务））
async：true（异步）或 false（同步）
send(string) ：将请求发送到服务器

string：仅用于 POST 请求
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

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

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
为了得到的是缓存的结果，请向 URL 添加一个唯一的 ID。
如果希望通过 GET 方法发送消息，请向 URL 添加信息。

如果需要像 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：规定头的值
异步—— True or false?
通过 Ajax，JavaScript 无需等待服务器的响应，而是：

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理
JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或者缓慢，应用程序会挂起或停止。
当使用 async = false 时，请不要编写onreadystatechange函数——把代码放到send()语句后面即可。

用 JavaScript 写一个完整的 Ajax 代码并不复杂，但是需要注意：Ajax请求是异步执行的。

服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText：获得字符串形式的响应数据

如果来自服务器的响应并非 XML -> 使用 responseText 属性
responseText 属性返回字符串形式的响应
responseXML：获得 XML 形式的响应数据

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析 -> 使用 responseXML 属性。
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时，表示响应已就绪。
onreadystatechange 事件被触发5次（0~4），对应着 readyState 的每个变化。

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

JQuery Ajax - ajax()方法
实例
$(document).ready(function() {
$("#b01").click( function() {
htmlobj = $.ajax({ url:" /jquery/test1.txt", async: false});
$("#myDiv").html(html(htmlobj.responseText);
});
});
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button id="b01" type="button">Change Context</button>
定义和用法
ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 Ajax 实现。简单易用的高层实现见 $.get，$.post等。

$.ajax()返回其创建 的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax()可以不带任何参数直接使用。