Ajax_ajax async: false,-CSDN博客

本文链接：https://blog.csdn.net/C_hydar/article/details/86980712

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()可以不带任何参数直接使用。

注意： 所有的选项都可以通过$.ajaxSetup()函数来全局设置。

语法

jQuery.ajax([settings])

参数	描述
settings	可选。用于配置 Ajax 请求的键值对集合。可以通过`$.ajaxSetup()`设置任何选项的默认值。

settings参数

回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。

数据类型

$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是 XML，那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。如果见得到其他类型，比如 HTML，则数据就以文本形式来对待。

通过 dataType 选项还可以指定其他不同数据处理方式。除了单纯的 XML ，还可以指定 html、json、jsonp、script 或者text。

其中， text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将 XMLHttpRequest 的 responseText 或者 responseHTML 属性传递给 success 回调函数。

注意： 我们必须确保网页服务器报告的 MIME 类型与我们选择的 dataType 所匹配。比如说，XML的话，服务器端就必须声明 text/ xml 或者 application/ xml 来获得一致的结果。

如果指定为 html 类型，任何内嵌的 JavaScript 都会在 HTML 作为一个字符串返回之前执行。
类似地，指定 script 类型的话，也会先执行服务器端生成 JavaScript，然后再把脚本作为一个文本数据返回。
如果指定为 json 类型，则会把获取到的数据作为一个 JavaScript 对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，它首先尝试使用 JSON.parse()。如果浏览器不支持，则使用一个函数来构建。

JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用 jsonp 类型。
使用这种类型的话，会创建一个查询字符串参数callback=?，这个参数会加在请求的 URL 后面。服务器端应当在 JSON 数据前加上回调函数名，以便完成一个有效的 JSONP 请求。
如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的 jsonp 参数。

注意： JSONP 是 JSON 格式的扩展。它要求一些服务器端的代码来检测并处理查询字符串参数。

如果指定了 script 或者 jsonp 类型，那么当从服务器接收到数据时，实际上是用了 <script>标签而不是 XMLHttpRequest 对象。这种情况下，$.ajax()不再返回一个 XMLHttpRequest 对象，并且也不会传递事件处理函数，比如 beforeSend。

发送数据到服务器

默认情况下，Ajax 请求使用 GET 方法。如果要使用 POST方法，可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。

data 选项既可以包含一个查询字符串，比如 key1=value1&key2=value2，也可以是一个映射，比如{key1: 'value1', key2: 'value2'}。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置 processData 选项为 contentType 选项的值，用其他合适的 MIME 类型来取代默认的 application/ x-www-form-urlencoded。

高级选项

global 选项用于阻止响应注册的回调函数，比如 .ajaxSend，或者 ajaxError，以及类似的方法。这在有些时候很有用，比如发送的请求非常频繁且简短的时候，就可以在 ajaxSend 里禁用这个。

如果服务器需要 HTTP 认证，可以使用用户名和密码可以通过 username 和 password 选项来设置。

Ajax 请求是限时的，所以错误警告被捕获并处理后，可以用来提升用户体验。请求超时这个参数通常就保留其默认值，要不就通过 jQuery.ajaxSetup 来全局设定，很少为特定的请求重新设置 timeout 选项。

默认情况下，请求总会被发出去，但浏览器有可能从它的缓存中调取数据。要禁止使用缓存的结果，可以设置 cache 参数为 false。如果希望判断数据自从上次请求后没有更改过就报告出错的话，可以设置 ifModified 为 true。

scriptCharset 允许给 <script> 标签的请求设定一个特定的字符集，用于 script 或者 jsonp 类似的数据。当脚本和页面字符集不同时，这特别好用。

Ajax 的第一个字母是 asynchronous 的开头字母，这意味着所有的操作都是并行的，完成的顺序没有前后关系。$.ajax() 的 async 参数总是设置成true，这标志着在请求开始后，其他代码依然能够执行。强烈不建议把这个选项设置成 false，这意味着所有的请求都不再是异步的了，这也会导致浏览器被锁死。

$.ajax 函数返回它创建的 XMLHttpRequest 对象。通常 jQuery 只在内部处理并创建这个对象，但用户也可以通过 xhr 选项来传递一个自己创建的 xhr 对象。返回的对象通常已经被丢弃了，但依然提供一个底层接口来观察和操控请求。比如说，调用对象上的 .abort() 可以在请求完成前挂起请求。