JS AJAX请求 – JavaScript高级教程 JSAJAX请求|JavaScript

上一章JavaScript教程请查看：JS cookie及其用法
在本教程中，我们将了解什么是Ajax以及如何用JavaScript实现它。
Ajax是什么？Ajax代表异步Javascript和Xml，Ajax只是一种从服务器加载数据并有选择地更新web页面部分内容而无需重新加载整个页面的方法。
基本上，Ajax所做的就是利用浏览器内置的XMLHttpRequest (XHR)对象在后台异步地向web服务器发送和接收信息，而不会阻塞页面或干扰用户体验。
Ajax已经变得如此流行，以至于在某种程度上很难找到不使用Ajax的应用程序。一些大型ajax驱动的在线应用程序的例子是：Gmail、谷歌地图、谷歌文档、YouTube、Facebook、Flickr，以及许多其他应用程序。
注意：Ajax不是一项新技术，事实上，Ajax甚至根本不是一项真正的技术。Ajax只是一个术语，用来描述通过JavaScript异步地从web服务器交换数据的过程，而不需要刷新页面。
提示：不要被AJAX中的术语X(即XML)弄糊涂。它只是因为历史原因而存在。可以使用JSON、HTML或纯文本等其他数据交换格式代替XML。
了解Ajax的工作原理为了执行Ajax通信，JavaScript使用内置在浏览器中的特殊对象—XMLHttpRequest (XHR)对象—向服务器发出HTTP请求并接收响应中的数据。
所有现代浏览器(Chrome、Firefox、IE7+、Safari、Opera)都支持XMLHttpRequest对象。
下面的插图演示了Ajax通信的工作原理:

文章图片
由于Ajax请求通常是异步的，所以一旦发送了Ajax请求，脚本的执行就会继续，也就是说，在服务器响应返回之前，浏览器不会停止脚本的执行。
在下一节中，我们将逐一讨论这个过程中涉及的每一个步骤:
发送请求并检索响应在执行客户机和服务器之间的Ajax通信之前，首先必须实例化一个XMLHttpRequest对象，如下所示:

var request = new XMLHttpRequest();

现在，向服务器发送请求的下一步是使用XMLHttpRequest对象的open()方法实例化新创建的请求对象。
open()方法通常接受两个参数——要使用的HTTP请求方法，如“GET”、“POST”等，以及发送请求的URL，如下所示:

request.open("GET", "info.txt"); -Or- request.open("POST", "add-user.php");

提示: 该文件可以是任何类型的，比如.txt或.xml，也可以是服务器端脚本文件，比如.php或.asp，它们可以在服务器上执行一些操作(例如插入或从数据库读取数据)，然后再将响应发送回客户机。
最后，使用XMLHttpRequest对象的send()方法将请求发送到服务器。

request.send(); -Or- request.send(body);

注意: send()方法接受一个可选的主体参数，该参数允许我们指定请求的主体。这主要用于HTTP POST请求，因为HTTP GET请求没有请求体，只有请求头。
GET方法通常用于向服务器发送少量数据。然而，POST方法用于发送大量数据，比如表单数据。
在GET方法中，数据作为URL参数发送。但是，在POST方法中，数据作为HTTP请求体的一部分发送到服务器。通过POST方法发送的数据在URL中不可见。
有关这两种方法的详细比较，请参阅HTTP GET与POST一章。
在下一节中，我们将进一步研究Ajax请求的实际工作方式。
执行Ajax GET请求GET请求通常用于从服务器获取或检索不需要对数据库进行任何操作或更改的某种信息，例如，根据一个术语获取搜索结果，根据用户id或名称获取用户详细信息，等等。
下面的示例将向你展示如何使用JavaScript发出Ajax GET请求。

< !DOCTYPE html> < head> < meta charset="utf-8"> < title>JavaScript Ajax GET Demo< /title> < script> function displayFullName() { // 创建XMLHttpRequest对象 var request = new XMLHttpRequest(); // 实例化请求对象 request.open("GET", "greet.php?fname=John& lname=Clark"); // 为readystatechange事件定义事件监听器 request.onreadystatechange = function() { // 检查请求是否成功 if(this.readyState === 4 & & this.status === 200) { // 将来自服务器的响应插入到HTML元素中 document.getElementById("result").innerHTML = this.responseText; } }; // 将请求发送到服务器 request.send(); } < /script> < /head> < body> < div id="result"> < p>结果DIV框的内容将被服务器响应< /p> < /div> < button type="button" onclick="displayFullName()">显示全名< /button> < /body> < /html>

当请求是异步的，send()方法在发送请求后立即返回。因此，在使用XMLHttpRequest对象的readyState属性处理响应之前，必须检查响应当前在其生命周期中的位置。
readyState是一个指定HTTP请求状态的整数。另外，每次readyState属性发生变化时，分配给onreadystatechange事件处理程序的函数都会被调用。readyState属性的可能值总结如下。

值	状态	描述
0	UNSENT	已经创建了一个XMLHttpRequest对象，但尚未调用open()方法(即请求未初始化)。
1	OPENED	已调用open()方法(即建立服务器连接)。
2	HEADERS_RECEIVED	send()方法已被调用(即服务器已收到请求)。
3	LOADING	服务器正在处理请求。
4	DONE	请求已经处理，响应已经就绪。

注意：理论上，readystatechange事件应该在readyState属性每次更改时触发。但是，当readyState更改为0或1时，大多数浏览器不会触发此事件。但是，当readyState更改为4时，所有浏览器都会触发此事件。
status属性返回XMLHttpRequest响应的数字HTTP状态代码。以下是一些常见的HTTP状态码:

200 – OK。服务器成功地处理了请求。
404 – 未找到。服务器找不到请求的页面。
503 – 服务不可用。服务器暂时不可用。

请查看HTTP状态码参考以获得完整的响应码列表。
这是我们“greet.php”文件的代码，它通过将一个人的名和姓连接在一起来创建他的全名，并输出一条问候消息。

< ?php if(isset($_GET["fname"]) & & isset($_GET["lname"])) { $fname = htmlspecialchars($_GET["fname"]); $lname = htmlspecialchars($_GET["lname"]); // 通过连接姓和名来创建全名 $fullname = $fname . " " . $lname; // 显示欢迎消息 echo "Hello, $fullname! Welcome to our website."; } else { echo "Hi! Welcome to our website."; } ?>

执行Ajax POST请求POST方法主要用于向web服务器提交表单数据。
下面的示例将向你展示如何使用Ajax向服务器提交表单数据。

< !DOCTYPE html> < head> < meta charset="utf-8"> < title>JavaScript Ajax POST Demo< /title> < script> function postComment() { // 创建XMLHttpRequest对象 var request = new XMLHttpRequest(); // 实例化请求对象 request.open("POST", "confirmation.php"); // 为readystatechange事件定义事件监听器 request.onreadystatechange = function() { // 检查请求是否成功 if(this.readyState === 4 & & this.status === 200) { // 将来自服务器的响应插入到HTML元素中 document.getElementById("result").innerHTML = this.responseText; } }; // 检索表单数据 var myForm = document.getElementById("myForm"); var formData = http://www.srcmini.com/new FormData(myForm); // 将请求发送到服务器 request.send(formData); } < /script> < /head> < body> < form id="myForm"> < label>Name:< /label> < div>< input type="text" name="name">< /div> < br> < label>Comment:< /label> < div>< textarea name="comment">< /textarea>< /div> < p>< button type="button" onclick="postComment()">Post Comment< /button>< /p> < /form> < div id="result"> < p>结果DIV框的内容将被服务器响应< /p> < /div> < /body> < /html>

如果你不使用FormData对象发送表单数据，例如，如果你向服务器发送表单数据的查询字符串格式，即request.send (key1 = value1& key2 = value2)，那么你需要显式地设置请求头使用setRequestHeader()方法,如下:

request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

必须在调用open()之后，但在调用send()之前调用setRequestHeader()方法。
常见的请求头有application/x-www-form-urlencoded、multipart/form-data、application/json、application/xml、text/plain、text/html等。
注意：FormData对象提供了一种简单的方法来构造一组表示表单字段及其值的键/值对，这些字段和值可以使用XMLHttpRequest.send()方法发送。如果表单的编码类型设置为multipart/form-data，则传输的数据与表单的submit()方法用于发送数据的格式相同。
这是我们的confirmation.php文件，简单地输出用户提交的值。

< ?php if($_SERVER["REQUEST_METHOD"] == "POST") { $name = htmlspecialchars(trim($_POST["name"])); $comment = htmlspecialchars(trim($_POST["comment"])); // 检查表单字段值是否为空 if(!empty($name) & & !empty($comment)) { echo "< p>Hi, < b>$name< /b>. 评论已成功收到.< p>"; echo "< p>以下是你的输入: < b>$comment< /b>< /p>"; } else { echo "< p>请填写表格中的所有字段!< /p>"; } } else { echo "< p>请再试一次.< /p>"; } ?>

出于安全原因，浏览器不允许跨域Ajax请求。这意味着你只能对来自与原始页面相同域的url发出Ajax请求，例如，如果你的应用程序运行在域“mysite.com”上，则不能对“othersite.com”或任何其他域发出Ajax请求。这通常称为同源策略。
但是，你可以从任何域加载图像、样式表、JS文件和其他资源。
【JS AJAX请求 – JavaScript高级教程】提示：查看jQuery Ajax方法以快速无缝地实现Ajax，jQuery框架提供了非常方便的方法来实现Ajax功能。