CRainyDay

关于 AJAX 你知道什么?

什么是 AJAX?

AJAX是干什么的?

一.什么是AJAX

  • ①AJAX, 即Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).
  • ②AJAX 不是新的编程语言, 而是一种使用现有标准的新方法或技术.
  • ③AJAX 是与服务器交换数据并更新部分网页的技术, 在不重新加载整个页面的情况下.

现在, 凡是允许浏览器与服务器通信而无须刷新当前页面的技术都被称作 Ajax.
Ajax最早是由Google使用的.

1.如何实现Ajax

  • Flash
  • Java applet
  • 框架: 如果使用一组框架构造了一个网页, 可以只更新其中一个框架, 而不必惊动整个页面
  • 隐藏的iframe
  • XMLHttpRequest: 该对象是对JS的一个扩展, 可以使网页与服务器进行通信. 这是创建Ajax应用的最佳选择

实际上, 通常把Ajax当成XMLHttpRequest

2.Ajax原理

ajax

3.Ajax工具包

Ajax并不是一项新技术, 它实际上是几种技术, 每种技术各尽其职, 以一种全新的方式聚合在一起.

  • 服务端语言: 服务器需具备向浏览器发送特定信息的能力. Ajax与服务器端语言无关
  • XML(eXtensible Markup Language, 可扩展标记语言)是一种描述数据的格式. Ajax程序需要某种格式化的格式来在服务器和客户端之间传递消息, XML是其中一种选择.
  • XHTML(eXtensible HyperText Markup Language,可扩展超文本标记语言)(现在是HTML5.0)和CSS(Cascading Style Sheets,层叠样式表)标准化呈现在前端
  • DOM(Document Object Model,文档对象模型)实现动态的显示和交互
  • 使用XMLHttpRequest对象进行异步数据读取
  • 使用JS绑定和处理数据

4.Ajax的缺陷

  • 由JS和Ajax引擎导致的浏览器的兼容问题
  • 页面局部刷新, 导致后退等功能失效
  • 对流媒体的支持没有Flash、Java applet好
  • 一些手持设备(如手机等)支持性差

二.XMLHttpRequest

  • XMLHttpRequest最早在IE5中以ActiveX组建形式出现, 非W3C标准
  • 创建XMLHttpRequest对象的方法不一样: IE5将其实现为一个ActiveX对象, 其他浏览器实现为一个本地JS对象
  • 虽然在不同浏览器上的实现方法是兼容的, 但是XMLHttpRequest实例的属性和方法是相同的.

1.创建方式

1
2
3
4
5
6
7
8
9
function getHTTPObject(){
var xhr = false;
if(window.XMLHttpRequset){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}

2.XMLHttpRequest的方法和属性

方法 描述
open(“method”,”url”) 建立对服务器的调用.Method参数可以是GET、POST或PUT.URL参数可以是相对URL或绝对URL
send(content) 向服务器发送请求
setRequestHeader(“header”,”value”) 把指定首部设置为所提供的值, 在设置任何首部之前必须调用open()
abort() 停止当前请求
getResponseHeader(‘’header’’) 返回指定首部的值
getAllResponseHeaders() 把http请求的所有响应首部作为键/值返回
属性 描述
onreadystatechange 每个状态的改变都会触发这个事件的处理器, 通常会调用一个JS函数
readyState 请求状态, 有五个: 0->未初始化, 1->正在加载, 2->已经加载, 3->交互中, 4->完成.
responseText 服务器的响应, 表示一个串
responseXML 服务器的响应, 表示为XML, 这个对象可解析为DOM对象
status 服务器的http状态码(200->OK, 404->NotFound, 等)
statusText http状态码的相应文本(OK或NotFound, 等)

3.简单的发送请求

  • 利用XMLHttpRequest实例与服务器通信包含以下3个关键部分:
  1. onreadystatechange事件处理函数
  2. open方法
  3. send方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<head>
<meta charset="UTF-8">
<script type="text/javascript">
window.onload = function() {
//1.获取a节点并为其添加一个onclick响应函数
document.getElementsByTagName("a")[0].onclick = function(){
//3.创建一个 XMLHttpRequest 对象
var request = new XMLHttpRequest();
//4.准备发送请求的数据: url
var url = this.href;
var method = "GET";
//5.调用 XMLHttpRequest 对象的open方法,准备请求
request.open(method,url);
//6.调用 XMLHttpRequest 对象的send方法,发送请求
request.send(null);
//7.为 XMLHttpRequest 对象添加 onreadystatechange响应函数
request.onreadystatechange = function(){
//8.判断响应是否完成: XMLHttpRequest 对象的readyState属性值为4时
if(request.readyState==4){
//9.再判断响应是否可用: XMLHttpRequest 对象status属性值为200
if(request.status==200||request.status==304){
//10.打印相应结果: responseText
alert(request.responseText);
}
}
};
//2.取消a节点的默认行为
return false;
};
};
</script>
</head>
<body>
<!--在html文件的同级目录下的ajax.txt文件,内容:Hello Ajax!-->
<a href="ajax.txt">发送</a>
</body>
注意: readyState 的值为4时响应成功, 但并不代表响应可用, 当status值(200,即OK)表示响应可用时才可使用

onreadystatechange:

  • 该事件处理函数由服务器触发, 而不是用户触发
  • 在Ajax执行过程中, 服务器会通知客户端当前的通信状态. 这依靠更新 XMLHttpRequest 对象的readyState属性来实现. 改变readyState属性是服务器对客户端连续操作的一种方式. 每次readyState属性值的改变都会触发onreadystatechange事件

open(method,url,asynch):

  • 该方法允许我们用一个Ajax调用向服务器发送请求(其实是建立一个请求).
  • method: 请求类型, 类似”GET”或”POST”的字符串. 若只想从服务器获取信息, 而不需发送信息, 使用GET(GET请求也可通过URL附加的查询字符串来发送数据, 但有长度限制). 若需向服务器发送数据, 用POST请求.
  • 某些情况下, 有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL下. 如果对每个请求的响应不同, 就会带来不好的效果. 此时, 我们会在请求的URL后附加时间戳, 来确保URL的唯一性, 起到禁用缓存的效果.
  • asynch: 表示请求是否异步, 一般取默认值true

send(data):
GET请求时, data = null; POST请求时, data为相应数据.

4.POST请求

只需要在GET的基础上将method改为”POST”,并在open()和send()方法之间添加下面语句:

1
setRequestHeader("ContentType","application/x-www-form-urlencoded");
注意: 在开发过程中, 我们一般不用原生的方式来向服务器发送请求.一般用框架来实现, 例如: jQuery、axios等

 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有