Ajax

程序员文章站 2022-06-10 19:20:19

...

Ajax简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
XMLHttpRequest 是AJAX 的基础。

创建XMLHttpRequest

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

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");
}

发送XMLHttpRequest

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

方法

描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

XMLHttpRequest发送请求头

setRequestHeader(header,value) 向请求添加 HTTP 头。

方法	描述
setRequestHeader(header,value)	向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值

方法

描述

setRequestHeader(header,value)

向请求添加 HTTP 头。

header: 规定头的名称
value: 规定头的值

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","portal/roles",false);
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    console.log(xmlhttp.responseText);
  }
}
xmlhttp.send();

XMLHttpRequest属性

readyState

HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。5 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义：

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

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

response

响应实体的类型由 responseType 来指定，可以是 ArrayBuffer，Blob，Document，JavaScript 对象 (即 "json")，或者是字符串。如果请求未完成或失败，则该值为 null。

responseText

目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。

如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。

如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用 Unicode UTF-8。

responseXML

对请求的响应，解析为 XML 并作为 Document 对象返回。

status

由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。

statusText

这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常。

XMLHttpRequest方法

abort()

取消当前响应，关闭连接并且结束任何未决的网络活动。

这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。

getAllResponseHeaders()

把 HTTP 响应头部作为未解析的字符串返回。

如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 "\r\n" 隔开。

getResponseHeader()

返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。

该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。

open()

初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。

send()

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

setRequestHeader()

向一个打开但未发送的请求设置或添加一个 HTTP 请求。

XMLHttpRequestEventTarget事件

onabort	当请求中止时触发, 当调用`xhr.abort()`后触发
onload	当请求成功时触发, 此时`xhr.readystate=4`
onloadend	在请求成功或者失败时触发；load、abort、error、timeout事件发生之后
onloadstart	当请求开始时触发, 调用`xhr.send()`方法后立即触发，若`xhr.send()`未被调用则不会触发此事件
onreadystatechange	当readyStateChange属性改变时触发
ontimeout	当timeout属性指定的时间已经过去但响应依旧没有完成时触发, `xhr.timeout`不等于0，由请求开始即`onloadstart`开始算起，当到达`xhr.timeout`所设置时间请求还未结束即`onloadend`，则触发此事件。
onerror	当请求因错误失败时触发。注意404等状态码不是error，因为此时响应仍然是成功完成的。
onprogress	当响应主体正在下载重复触发（约每隔50ms一次）

XMLHttpRequest.upload

upload.onloadstart	开始上传
upload.onprogress	在上传阶段(即`xhr.send()`之后，`xhr.readystate=2`之前)触发，每50ms触发一次；
upload.onload	上传成功
onload.onloadend	上传操作结果之后执行，无论成功或者失败

上传文件示例

<div>
    <input id="file" type="file" onchange="change(this)">
    <input type="button" id="btn" onclick="sent()" value="开始">
    <script>
        var file = null;

        function change(event) {
            file = event;
        }

        function sent() {
            var xmlhttp = new XMLHttpRequest();
            console.log(xmlhttp.readyState);

            var form = new FormData(); // FormData 对象
            form.append("rolePermissionRelationExcel", file); // 文件对象
            xmlhttp.open("POST", "/home/test");
            xmlhttp.setRequestHeader('enctype', "multipart/form-data");

            console.log(xmlhttp.readyState);
            xmlhttp.onloadstart = function () {
                console.log("onloadstart function");
            }

            xmlhttp.upload.onloadstart = function () {
                console.log("upload.onloadstart function");
            }

            xmlhttp.upload.onprogress = function progressFunction(event) {
                console.log("upload.onprogress function");
            }

            xmlhttp.upload.onload = function () {
                console.log("upload.onload function");
            }

            xmlhttp.upload.onloadend = function () {
                console.log("upload.onloadend function");
            }

            xmlhttp.onprogress = function () {
                console.log("onprogress function");
            }

            xmlhttp.onload = function () {
                console.log("onload function");
            }

            xmlhttp.onloadend = function () {
                console.log("onloadend function");
            }

            xmlhttp.onreadystatechange = function () {
                console.log(xmlhttp.readyState);
            }

            xmlhttp.send(form);
        }
    </script>
</div>

输出结果（因为近期csdn没有添加图片，只有copy结果了）

(index):55 0
(index):62 1
(index):64 onloadstart function
(index):68 upload.onloadstart function
(index):72 upload.onprogress function
(index):76 upload.onload function
(index):80 upload.onloadend function
(index):96 2
(index):96 3
(index):84 onprogress function
(index):96 4
(index):88 onload function
(index):92 onloadend function

设置过期时间和过期事件处理程序

xmlhttp.timeout = 500;
xmlhttp.ontimeout = function () {
    console.log("ontimeout function")
}

设置错误处理程序

xmlhttp.onerror = function () {
    console.log("onerror function")
}

xhr.withCredentials

在CORS标准中做了规定，默认情况下，浏览器在发送跨域请求时，不能发送任何认证信息（credentials）如"cookies"和"HTTP authentication schemes"。除非xhr.withCredentials为true（xhr对象有一个属性叫withCredentials，默认值为false）。

cookies也是一种认证信息，在跨域请求中，client端必须手动设置xhr.withCredentials=true，且server端也必须允许request能携带认证信息（即response header中包含Access-Control-Allow-Credentials:true），这样浏览器才会自动将cookie加在request header中。

另外，要特别注意一点，一旦跨域request能够携带认证信息，server端一定不能将Access-Control-Allow-Origin设置为*，而必须设置为请求页面的域名。

示例：

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "http://localhost:8080/regions");
xmlhttp.withCredentials = true
xmlhttp.send();

resp.setHeader("Access-Control-Allow-Origin", "http://localhost:63168");
resp.setHeader("Access-Control-Allow-Method", "*");
resp.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, WithCredentials");
resp.setHeader("Access-Control-Allow-Credentials", "true");

上一篇：浙大版《数据结构（第2版）》题目集-习题2.8 输出全排列 (20分)

下一篇：新一代Ajax API Fetch 局部刷新技术

Ajax

Ajax简介

创建XMLHttpRequest

发送XMLHttpRequest

XMLHttpRequest发送请求头

onreadystatechange 事件

XMLHttpRequest属性

readyState

response

responseText

responseXML

status

statusText

XMLHttpRequest方法

abort()

getAllResponseHeaders()

getResponseHeader()

open()

send()

setRequestHeader()

XMLHttpRequestEventTarget事件

XMLHttpRequest.upload

上传文件示例

设置过期时间和过期事件处理程序

设置错误处理程序

xhr.withCredentials

Ajax+ASP和Flash+ASP数据读取取方法有些相似的实现方法

ajax菜鸟教程（jq请求ajax的方法）

ajax提交图片上传（ajax上传图片到服务器操作）

jQuery+ajax的资源回收处理机制分析

jquery文件上传插件（ajax异步上传多个文件方法）

jquery与ajax获取特殊字符实例详解

AJAX FCKEditor Rich Editor整合篇第1/2页

jQuery+PHP+ajax实现微博加载更多内容列表功能

php+ajax做仿百度搜索下拉自动提示框(有实例)

spring mvc利用ajax向controller传递对象的方法示例