AJAX——前端技术栈

LD白哥

已于 2023-07-16 11:43:10 修改

阅读量80

点赞数

分类专栏：前端技术栈文章标签：前端 ajax okhttp

于 2023-07-04 23:05:13 首次发布

本文链接：https://blog.csdn.net/weixin_61974247/article/details/131523824

版权

前端技术栈专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.AJAX基础

AJAX说明

AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML），是一种使用客户端脚本与服务器异步交互数据的网页开发技术。使用AJAX技术，可以实现不重新加载整个网页的前提下直接更新当前网页的局部内容。JavaScript和jQuery都能使用AJAX方式和服务器进行数据交互.

传统的Web交互

在传统的Web交互过程中，用户使用浏览器向服务器发出请求，服务器接到请求后执行请求的操作，并将执行结果返回给客户端浏览器。在服务器返回所有结果前，客户端处于等待状态，例如，用户填写注册表单后，提交所有表单数据到服务器。服务器接收数据后进行数据库操作，如查询用户名是否已注册、写入数据库等操作，然后返回注册后的网页，如提示注册成功或错误。用户必须将所有数据填写完毕提交，提交后需要等待服务器响应.

AJAX数据界面

在使用AJAX数据的页面，用户以异步方式发送请求，不会影响当前浏览器中页面的线程，可以继续网页上的下一步操作，用户不会处于等待状态。例如，用户填写注册表单中的用户名后，用户名以异步方式发送服务器进行操作，同时用户可以进行其他数据的填写过程.
AJAX技术缩短了用户的等待时间，改善了用户的操作体验，能够降低服务器的负担。但是客户端JavaScript代码处理数据能力弱，安全性不够，更多的数据处理还是借助服务器上的后端动态网页设计语言完成.

2.AJAX应用

JavaScript的AJAX应用

JavaScript中AJAX技术的核心是XMLHttpRequest对象，该对象的功能是和服务器进行异步接收或者发送数据

1.创建XMLHttpRequest对象实例

使用XMLHttpRequest对象之前必须创建XMLHttpRequest对象的实例。由于IE6浏览器使用ActiveXObject方式引入XMLHttpRequest对象，而其他浏览器中XMLHttpRequest对象时window对象的子对象，所以代码中需要针对不同浏览器创建实例。创建XMLHttpRequest对象实例的基本语法格式如下。
例如，下面代码创建一个名为xmlHttpReq的XMLHttpRequest对象实例.

var xmlHttpReq;
if(window.ActiveObject){
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTp");
}
else if(window.XMLHttpRequest){
xmlHttpReq = new XMLHttpRequest();
}

2.指定文档open()方法
使用XMLHttpRequest对象实例的open()方法指定从服务器载入文档的HTTP请求类型、文件名、是否异步方式，其基本语法格式如下。

实例名.open("http请求类型","请求文件的URL地址",是否采用异步方式);

http请求类型为GET或者POST。是否采用异步方式，默认是True使，表示使用异步方式。

3.发送数据send()方法
发送数据send()方法将open()方法指定的请求发送出来，该方法只有null一个参数，其基本语法格式如下。

实例名.send(null);

4.监听服务器完成请求状态
XMLHttpRequest对象实例的onreadstatechange事件可以监听服务器完成请求状态，其基本语法格式如下。

实例名.onreadstatechange = 监听结束回调函数

onreadystatechange事件返回readystate属性和status属性。readystate属性有5种值，当数值为4时表示服务器已经处理完毕。status属性表示请求是否成功，如果值为200则表明请求成功。回调函数需要在readystate为4和status为200时，才能访问服务器返回的数据。

5.服务器返回数据属性
XMLHttpRequest对象实例的responseText属性可以获取服务器返回的数据

两个html页面，一个用于接收返回数据，一个用于进行异步处理

用于异步处理的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>你看看，过来了吧（^—^）</h3>
</body>
</html>

用于接收返回数据的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script>
        /**
         * 这几个步骤完全是创建一个XMLHttpRequest对象实例
         */
        var xmlHttpReq;
        if(window.ActiveXObject){
            xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if (window.XMLHttpRequest){
            xmlHttpReq = new XMLHttpRequest();
        }
        //open()方法用于指定文档，设置http请求类型
        xmlHttpReq.open("get","20-5-5.html");
        //send()用于发送数据，将open()指定的请求发送出去
        xmlHttpReq.send(null);
        //用于访问服务器返回的数据
        xmlHttpReq.onreadystatechange=function () {
            if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {
                document.getElementById("target").innerHTML = xmlHttpReq.responseText;
            }
        }
    </script>
</head>
<body>
<div id="target">aa</div>
</body>
</html>

访问AJAX页面，结果如下

在这里插入图片描述
这个结果显示的是返回的异步处理页面所处理的结果

LD白哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
AJAX——前端技术栈

AJAX），是一种使用客户端脚本与服务器异步交互数据的网页开发技术。使用AJAX技术，可以实现不重新加载整个网页的前提下直接更新当前网页的局部内容。JavaScript和jQuery都能使用AJAX方式和服务器进行数据交互.在传统的Web交互过程中，用户使用浏览器向服务器发出请求，服务器接到请求后执行请求的操作，并将执行结果返回给客户端浏览器。在服务器返回所有结果前，客户端处于等待状态，例如，用户填写注册表单后，提交所有表单数据到服务器。
复制链接

扫一扫