AJAX技术基础（笔记）

最新推荐文章于 2022-08-19 19:18:03 发布

我要手撕源码

最新推荐文章于 2022-08-19 19:18:03 发布

阅读量292

点赞数 3

文章标签： ajax

本文链接：https://blog.csdn.net/weixin_48171371/article/details/109303639

版权

AJAX技术基础

一、AJAX技术概述

是一种客户端技术，实现客户浏览器和服务器的异步交互。
AJAX可以在不刷新整个页面的情况下使用JavaScript操作DOM对象实现页面动态更新

1.定义：

AJAX是Asynchronous JavaScript and XML的缩写（异步JavaScript与xml）
为解决客户发出请求时，服务器把整个页面都发送给客户端的问题。（只需局部更新）

2.相关技术简介：

HTML和CSS
实现数据信息的统一化、标准化显示
DOM
实现浏览器丰富的动态显示效果
XML和XST
进行浏览器和服务器的数据交换和处理
XMLHttpRequest
实现客户与服务器之间的异步请求和响应

2.1 XML和XST简介

XML（eXtensible Markup Language 可扩展的标记语言）
在HTML和SGML（SGML：Standard Generalized Markup Language）的基础上发展起来，吸取了优点，克服了SGML过于复杂和HTML的局限性的缺点
XSL（eXtensible StyleSheet Language 可扩展的样式单语言）
用来转换XML文档结构的语言。XSL可以从一个XML文档中提取信息，并使用该信息创建另一个XML文档

2.2XMLHttpRequest

XMLHttpRequest是浏览器中定义的对象，是AJAX技术中的核心对象
通过JS脚本可以创建XMLHttpRequest对象

二、XMLHttpResquest对象

概述：

使用XMLHttpRequest对象，用户可以直接从Web服务器检索数据，或向Web服务器提交XML数据而不需要刷新整个页面。
XML数据在客户端使用DOM与XSLT转换成HTML

1.创建XMLHttpRequest对象

在使用XMLHttpRequest对象发送请求和处理响应之前，必须使用JS创建一个XMLHttpRequest对象。
大多数浏览器把XMLHttpRequest实现为一个本地对象，而低版本的IE浏览器把XMLHttpRequest实现为一个ActiveX对象。所以在创建之前需要检查浏览器是否支持XMLHttpRequest对象

<%-- 跨浏览器的JavaScript脚本创建XMLHttpRequest对象 --%>
<script type="text/javascript">
        var xmlHttp;
        function createXMLHttpRequest(){
            if(window.XMLHttpRequest){
                xmlHttp = new XMLHttpRequest();
            }else{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
    </script>

2.XMLHttpRequest的常用属性

通过这些属性，在JS脚本中可以判断请求对象的状态，设置事件处理程序，检索服务器响应等。

onreadystatechange
为异步请求设置事件处理程序
每当XMLHttpRequest对象的状态发生改变时都会触发这个事件处理器，通常会调用一个js函数
readyState
该属性表示请求的状态
0：未初始化
1：正在加载
2：已加载
3：交互中
4：完成
responseText
检索服务器响应，并表示为文本
responseXML
检索服务器响应，并表示为XML DOM对象
status
检索服务器的HTTP状态码
例如，404（表示Not Found），200（表示OK）
statusText
检索服务器的HTTP状态码的文本
例如状态码为404时：NotFound
responseBody
检索响应体
该属性时IE7以后版本的window对象，但不是W3C的规范

3.XMLHttpRequest的常用方法

abort() 取消当前HTTP请求

getAllResponseHeaders() 返回所有的响应头
如果readyState属性的值不是3或4，则返回null

getResponseHeader(string header) 返回指定的响应头
如果readyState属性的值不是3或4，则返回null

open(string method, string url, boolean asych, string username, string password) 打开一个HTTP请求，但还没有发送请求（后三个参数是可选的）
调用open()将readyState的值设为1，responseText、responseXML、status和statusText属性设置初始值。
method：在open()中需要指定使用的HTTP方法(GET、POST或PUT)
url：服务器的URL（相对或绝对路径）
asych：指示这个调用时异步还是同步，默认值是true，表示请求是异步的。如果是false，浏览器会等待。知道服务器响应为止。
username、password：指定服务器端验证的用户名和密码

send(data) 向服务器发送HTTP请求并检索响应
在调用send()后，readyState属性被设置为2，当请求完成时，readyState属性被设置为4
data：可以是字符串、无符号字节数组或XML、DOM对象等。发送的数据是可选的，data可以为null。
根据open()中的asych的参数，send可以是同步或异步的。同步：send()只有在接收到全部响应后才返回；异步：该方法立刻返回。

setRequestHeaders(string header, string value) 设置请求的HTTP头
header：请求头名
value：请求头值

4.一个简单的示例

下面是一个简单的HTML页面。其中有一个按钮，当单击该按钮时将向服务器发送一个异步请求。服务器将发回一个简单的静态文本作为响应。在处理这个响应时，会在警告窗中显示该文本文件的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>simple XMLHttpRequest</title>
    <script type="text/javascript">
        //创建XMLHttpRequest对象函数
        var xmlHttp;
        function createXMLHttpRequest(){
            if(window.XMLHttpRequest){
                xmlHttp = new XMLHttpRequest();
            }else{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        //
        function startRequest(){
            //创建XMLHttpRequest对象
            createXMLHttpRequest();
            //每当XMLHttpRequest对象的状态发生改变时都会触发这个事件处理器，通常会调用一个js函数(绑定回调函数)
            xmlHttp.onreadystatechange = handleStateChange;
            //打开一个HTTP请求，此时还未发送请求
            xmlHttp.open("GET","simpleResponse.xml",true);
            //向服务器发送HTTP请求并检索响应
            xmlHttp.send(null);
        }
        //回调函数
        function handleStateChange() {
            document.getElementById("01div").innerText = "Hello";
            if(xmlHttp.readyState == 4){
                document.getElementById("01div").innerText = "Hello1";
                if(xmlHttp.status == 200){
                    document.getElementById("01div").innerText = "Hello2";
                }
            }
        }
    </script>
</head>
<body>
    <form action="#">
        <input type="button" value="开始异步请求" onclick="startRequest();"/>
    </form>
    <div id="01div">div</div>
</body>
</html>

5.AJAX的交互模式

在这里插入图片描述

1）客户触发事件

2）创建XMLHttpRequest对象

3）向服务器发出请求
a.发送请求前，应通过XMLHttpRequest对象的onreadystatechange属性设置回调函数
b.调用open()和send()
如果open()的方法设置为post，则需要设置XMLHttpRequest对象的Content-Type首部xmlHttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”)
如果没有数据作为请求体的一部分发送，data参数为null

4）服务器处理请求返回响应
服务器响应
请求的是静态资源：服务器返回该资源。
请求的是动态资源：
服务器执行该资源，然后返回
两个访问服务器响应的属性
responseText
responseXML
XMLHttpRequest对象只能处理text/html类型的结果
如果请求的是动态资源（例如Servlet），则需要将Content-Type响应头设置为text/xml
避免浏览器在本地缓存结果，需要将Cache-Control响应头设置为no-cache