Ajax及其应用小论文

最新推荐文章于 2024-03-13 19:52:27 发布

HenryJamHHH

最新推荐文章于 2024-03-13 19:52:27 发布

阅读量93

点赞数

文章标签： ajax Powered by 金山文档

本文链接：https://blog.csdn.net/HenryJamHHH/article/details/129568672

版权

Ajax提供与服务器异步通信的能力，可在web页面触发js事件中中服务器发出异步请求，如执行更新或查询数据库

Ajax的核心是js对象XMLHttpRequest，改对象在IE5中首次引入，使用户通过js向服务器提出请求并处理相应，不阻塞用户

当web服务器的相应返回时，使用js回调函数和CSS相应的更新页面的局部页面，而不是刷新整个页面

在页面与服务器交互的过程中不中断用户操作，用户甚至察觉不到浏览器正在与服务器进行通信

方法

XMLHttpRequest.open(method,url,async)

初始化一个请求。该方法只能在 JavaScript 代码中使用，若要在 native code 中初始化请求，请使用 openRequest()。

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

method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true（异步）或 false（同步）

XMLHttpRequest.send(string)

将请求发送到服务器。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。

string：仅用于 POST 请求

GET 请求

xmlhttp.open("GET","demo_get.asp",true);

xmlhttp.send();

在上面的例子中，您可能得到的是缓存的结果。

为了避免这种情况，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);

xmlhttp.send();

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);

xmlhttp.send();

POST 请求

xmlhttp.open("POST","demo_post.asp",true);

xmlhttp.send();

如果需要像 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");

XMLHttpRequest.setRequestHeader(header,value)

设置 HTTP 请求头的值。必须在 open() 之后、send() 之前调用 setRequestHeader() 方法。向请

header: 规定头的名称

value: 规定头的值

XMLHttpRequest.abort()

如果请求已被发出，则立刻中止请求。

事件

onreadystatechange

每当 readyState 改变时，就会触发 onreadystatechange 事件。

abort

当 request 被停止时触发，例如当程序调用 XMLHttpRequest.abort() 时。

也可以使用 onabort 属性。

error

当 request 遭遇错误时触发。

也可以使用 onerror 属性

load

XMLHttpRequest请求成功完成时触发。

也可以使用 onload 属性.

loadend

当请求结束时触发, 无论请求成功 ( load) 还是失败 (abort 或 error)。

也可以使用 onloadend 属性。

loadstart

传输开始。

也可以使用 onloadstart 属性。

progress

当请求接收到更多数据时，周期性地触发。

也可以使用 onprogress 属性。

timeout

在预设时间内没有接收到响应时触发。

属性

XMLHttpRequest.readyState 只读

返回一个无符号短整型（unsigned short）数字，代表请求的状态码，等于4表示数据已经接收完毕。

XMLHttpRequest.status 只读

服务器返回的状态码，等于200表示一切正常。

XMLHttpRequest.response 只读

返回一个 ArrayBuffer、Blob、Document，或 DOMString，具体是哪种类型取决于 XMLHttpRequest.responseType 的值。其中包含整个响应实体（response entity body）。

XMLHttpRequest.responseText 只读

返回一个 DOMString，该 DOMString 包含对请求的响应，如果请求未成功或尚未发送，则返回 null。

XMLHttpRequest.responseXML 只读

返回一个 Document，其中包含该请求的响应，如果请求未成功、尚未发送或时不能被解析为 XML 或 HTML，则返回 null。

XMLHttpRequest.responseType

一个用于定义响应类型的枚举值（enumerated value）。

XMLHttpRequest.responseURL 只读

返回经过序列化（serialized）的响应 URL，如果该 URL 为空，则返回空字符串。

XMLHttpRequest.statusText 只读

服务器返回的状态文本。

XMLHttpRequest.timeout

一个无符号长整型（unsigned long）数字，表示该请求的最大请求时间（毫秒），若超出该时间，请求会自动终止。

有时，ajax操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。

<body>

<br />

<br />

$('#btn').on('click', function () {

var data = $('#files')[0].files

if (data.length <= 0) {

return alert('请上传文件！')

}

// console.log(data);

var fd = new FormData()

fd.append('avatar',data[0])

// console.log(fd);

var xhr = new XMLHttpRequest()

xhr.open('POST','url')

xhr.send(fd)

xhr.onreadystatechange = function() {

if(xhr.readyState === 4 && xhr.status === 200) {

var result = JSON.parse(xhr.responseText)

// console.log(result);

$('img').attr('src','url' + result.url)

}

})

</script>

</body>

HenryJamHHH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax及其应用小论文

该方法只能在 JavaScript 代码中使用，若要在 native code 中初始化请求，请使用 openRequest()。返回一个 Document，其中包含该请求的响应，如果请求未成功、尚未发送或时不能被解析为 XML 或 HTML，则返回 null。返回一个 DOMString，该 DOMString 包含对请求的响应，如果请求未成功或尚未发送，则返回 null。一个无符号长整型（unsigned long）数字，表示该请求的最大请求时间（毫秒），若超出该时间，请求会自动终止。
复制链接

扫一扫