Ajax简介

crainyday

前端 / Ajax

发布于：2019年4月20日

字数：1.6k字

时长：6分钟

关于 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原理

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.创建方式

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个关键部分:

onreadystatechange事件处理函数

open方法

send方法

<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