Ajax

Ajax 专栏收录该内容
1 篇文章 0 订阅

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 对象的 responseTextresponseXML 属性。
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() 可以在请求完成前挂起请求。

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值