Ajax技术

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个状态中每一个都有一个相关联的非正式的名称。

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

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 以前不可用。
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页