Ajax技术

最新推荐文章于 2024-06-14 12:42:21 发布

shi_zi_183

最新推荐文章于 2024-06-14 12:42:21 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/shi_zi_183/article/details/112981487

版权

Ajax技术

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

优势

传统的网页（即不用ajax技术的网页），想要更新内容或者提交一个表单，都需要重新加载整个网页。使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。使用ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的web用户界面。
利用ajax可以做：注册时，输入用户名自动检查用户是否已经存在。登陆时，提示用户名密码错误。删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。

XHR

XHR全名是xmlHttpRequest，是Java原生的HTTP请求函数。
XHR实现Ajax的基本步骤：
1、创建该对象
2、注册回调方法
3、设置和服务器端交互的相应参数 open方法
4、设置服务器发送数据，启动和服务器端交互 send发送
5、判断服务器端的交互是否完成，服务器端是否正确放回了数据
XHR是一个类，如果要使用需要实例化出一个对象，其提供了许多属性与方法：
1、readyState：Http请求的状态，XMLHttpRequest初次创建时，这个属性的值从0开始，直到接受到完整的HTTP响应，这个值增加到4。5个状态中每一个都有一个相关联的非正式的名称。

状态	名称	描述
0	Uninitialized	初始化状态。XHR对象已创建或已被abort（）方法重置。
1	Open	open（）方法已调用，但是send（）方法未调用。请求还没有被发送。
2	Send	Send（）方法已调用，HTTP请求已发送到Web服务器。未接收到响应。
3	Receiviong	所有响应头都已经接收到。响应体开始接受但未完成
4	Loaded	HTTP响应已经全部接受

readyState的值不会递减，除非当一个请求在处理过程中的时候调用了 abort()或 open()方法。每次这个属性的值增加的时候，都会触发 onreadystatechange事件句柄。

2、responseText：目前为止从服务器接受到的响应体（不包括头部），或者如果还没有接受到数据的话，就是空字符串。
如果readyState小于3，这个属性就是一个空字符串。当readyState为3，这个属性返回目前已经接受的响应部分。如果readyState为4，这个属性保存了完整的响应体。如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用Unicode UTF-8

3、responseXML：对请求的响应，解析为XML并作为Document对象返回。如果响应体不是text/xml返回null
4、status：由服务器返回的HTTP状态代码，如200表示成功，而404表示“NotFound”错误。当readyState小于3的时候读取这一属性会导致一个异常。
5、statusText：这个属性用名称而不是数字指定了请求的HTTP的状态代码。与status一样，当readyState小于3的时候读取这一属性会导致一个异常。
6、abort()：取消当前响应，关闭连接并且结束任何未决的网络活动。这个方法把XMLHttpRequest对象重置为readyState为0的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。
7、getAllResponseHeaders()：把HTTP响应头部作为解析的字符串返回。如果readyState小于3，这个方法返回null。否则，它返回服务器发送的所有HTTP响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符“隔开”。
8、getResponseHeader()：返回指定的HTTP响应头部的值。其参数是要返回的HTTP响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。该方法的返回值是指定的HTTP响应头部的值，如果没有接受到这个头部或者readyState小于3则为空字符串。如果接受到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。
9、open()：初始化HTTP请求参数，例如URL和HTTP方法，但是并不发送请求。在使用XHR对象时，要调用的第一个方法，它接受5个参数：

1）metho 要发送的请求的类型（“get”，“post”）。
2）url 请求的URL。
3）sync 表示是否异步发送请求的布尔值（默认true）true为异步，flase为同步，如果是同步进程将被阻塞，直到响应完全接受。
4）username password 参数是可选的，为url所需的授权提供认证资格。

10、send()：发送HTTP请求，使用传递给open方法的参数，以及传递给该方法的可选请求体。

在XHR请求中要发送的数据体. 可以是:
	可以为 Document, 在这种情况下，它在发送之前被序列化.
	为 XMLHttpRequestBodyInit, 从 per the Fetch spec （规范中）可以是 Blob,BufferSource, FormData, URLSearchParams, 或者 USVString 对象.
	null
如果body没有指定值，则默认值为 null .

11、setRequestHeader()：向一个打开但未发送的请求设置或添加一个HTTP请求头，两个参数：

1）header：属性名称
2）value：属性值
例如：xhr.setRequestHeader("Content-type","application/json;charset=utf-8");

<!doctype html>
<html>
	<head>
    	<meta charset="utf-8">
        <title>Document</title>
    </head>
    <body>
    	<h2>点击的时候发送请求报文——不刷新页面</h2>
        <input type="button" value="get请求">
        <h3></h3>
    </body>
</html>
<script>
	document.querySelector('input').onclick=function(){
		var xhr =new XMLHttpRequest();
		xhr.open('get','index.php?name=Tom');//get传值
		xhr.onload=function(){
			console.log(xhr.responseText);
			document.querySelector('h3').innerHTML=xhr.responseText;
		}
		xhr.send(null);//post传值
	}
</script>

ajax传输数据格式

XML
可扩展标记语言，标准通用标记语言的子集，简称XML。是一种用于标记电子文件使其具有结构性的标记语言。

服务器响应如果使用xml格式，需要在响应头声明格式。
header（’Content-type:text/xml;charset=utf-8‘）
内容前需要声明xml

<?xml version="1.0" encoding="utf-8"?>

Javascript使用xml格式需要，使用进行xml解析。
xhr.responseXML

找到对应标签下的内容方式与解析html方式相同
xhr.responseXML.querySelector(‘name’).innerHTML

JSON
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

服务器传输json并不依赖与响应头中的json声明，但推荐声明有利于前端开发
header（’Content-type:text/json;charset=utf-8‘）

json载体是字符串所以Javascript当作文本解析
xhr.responseText；

JavaScript中可以实现js对象与json的转换

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); json转化为js
var json = JSON.stringify({a: 'Hello', b: 'World'}); js转化为json

jQuery AJAX

get()：通过远程HTTP GET 请求载入信息。
这是一个简单的GET请求功能以取代复杂$.ajax。请求成功时可调用函数。如果需要在出错时执行函数，请使用$.ajax。

语法：$(selector).get(url,data,success(response,status,xhr),dataType)

参数	描述
url	必需。规定将请求发送的哪个URL
data	可选。规定连同请求发送到服务器的数据
success（response，status，xhr）	可选。规定当请求成功时运行的函数。额外的参数：response-包含来自请求的结果数据；status-包括请求的状态；xhr-包括XMLHttpRequest对象
dataType	可选。规定预计的服务器响应的数据类型。默认地，jQuery将智能判断。可能的类型：xml，html，text，script，json，jsonp

根据响应的不同的 MIME 类型，传递给 success 回调函数的返回数据也有所不同，这些数据可以是 XML root 元素、文本字符串、JavaScript 文件或者 JSON 对象。也可向 success 回调函数传递响应的文本状态。

post()：方法通过HTTP POST 请求从服务器载入数据。

语法：jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

参数	描述
url	必需。规定把请求发送到哪个URL
data	可选。映射或字符串值。规定连同请求发送服务器的数据
success（data，textStatus，jpXHR）	可选。请求成功时执行的回调函数。
dataType	可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script或html）

对于 jQuery 1.5，所有 jQuery 的 AJAX 方法返回的是 XMLHTTPRequest 对象的超集。由 $.post() 返回的 jQuery XHR 对象或 "jqXHR,"实现了约定的接口，赋予其所有的属性、方法，以及约定的行为。出于对由 $.ajax() 使用的回调函数名称便利性和一致性的考虑，它提供了 .error(), .success() 以及 .complete() 方法。这些方法使用请求终止时调用的函数参数，该函数接受与对应命名的 $.ajax() 回调函数相同的参数。
jQuery 1.5 中的约定接口同样允许 jQuery 的 Ajax 方法，包括 $.post()，来链接同一请求的多个 .success()、.complete() 以及 .error() 回调函数，甚至会在请求也许已经完成后分配这些回调函数。

**.ajax()**当get(),post()无法满足项目要求的时，可以使用更灵活的ajax()

ajax（）方法通过HTTP请求加载远程数据。

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

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

语法：jQuery.ajax([settings])

可以通过$ajaxSetup()设置任何选项的默认值（全局设定）

参数	描述
async	类型：Boolean，默认值：true默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
beforeSend（XHR）	类型：Function。发送请求前可修改XMLHttpRequest对象的函数，如添加自定义HTTP头。XMLHttpRequset对象是唯一的参数。这是一个Ajax事件。如果返回false可以取消本次ajax请求。
cache	类型：Boolean。默认值：true，dataType为script和jsonp时默认为false。设置为false将不缓存此页面。
complete（XHR，TS）	类型：Function请求完成后回调函数（请求成功或失败之后均调用）。参数：XMLHttpRequest对象和一个描述请求类型的字符串。这是一个Ajax事件。
contentType	类型：string。默认值：“application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给$.ajax()那么它必定会发送给服务器（即使没有数据要发送）。
context	类型：Object这个对象用于设置Ajax相关回调函数地上下文。也就是说，让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递地options参数）。
data	类型：string发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。
dataFilter	类型：Function给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
dataType	类型：String预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:“xml”: 返回 XML 文档，可用 jQuery 处理。“html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）“json”: 返回 JSON 数据。“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。“text”: 返回纯文本字符串
error	类型：Function默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 “timeout”, “error”, “notmodified” 和 “parsererror”。这是一个 Ajax 事件。
global	类型：Boolean是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
ifModified	类型：Boolean仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 ‘etag’ 来确定数据没有被修改过。
jsonp	类型：String在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 “callback=?” 这种 GET 或 POST 请求中 URL 参数里的 “callback” 部分，比如 {jsonp:‘onJsonPLoad’} 会导致将 “onJsonPLoad=?” 传给服务器。
jsonpCallback	类型：String为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。
password	类型：String用于响应 HTTP 访问认证请求的密码
processData	类型：Boolean默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
scriptCharset	类型：String只有当请求时 dataType 为 “jsonp” 或 “script”，并且 type 是 “GET” 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。
success	类型：Function请求成功后的回调函数。参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。这是一个 Ajax 事件。
traditional	类型：Boolean如果你想要用传统的方式来序列化数据，那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。
timeout	类型：Number设置请求超时时间（毫秒）。此设置将覆盖全局设置。
type	类型：String默认值: “GET”)。请求方式 (“POST” 或 “GET”)，默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
url	类型：String默认值: 当前页地址。发送请求的地址。
username	类型：String用于响应 HTTP 访问认证请求的用户名。
xhr	类型：Function需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。