Ajax的基本用法

最新推荐文章于 2023-03-22 20:04:24 发布

smile_team

最新推荐文章于 2023-03-22 20:04:24 发布

阅读量137

点赞数 1

分类专栏： Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/smile_team/article/details/108350504

版权

Ajax 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

### 同步交互
发送一个请求，需要等待返回，然后才能发送下一个请求
在这里插入图片描述

异步交互

发送一个请求，不需要等待返回，就能发送下一个请求
在这里插入图片描述

异步交互优势

用户操作无需像同步交互必须等待结果
异步交互只需要与服务器端交换必要的数据内容，而不是将所有数据全部更新
异步交互对带宽造成的压力相比于同步交互更小
通过Ajax实现异步交互不需要任何第三方插件，只要浏览器支持JavaScript语言即可实现

异步交互的劣势

异步交互破坏了浏览器原有的前进和后退机制
如果后面逻辑的执行依靠前面逻辑执行的结果的话，异步交互可能会造成问题
Ajax实现异步交互对搜索引擎支持较弱
Ajax实现异步交互引起一些Web安全问题，例如SQL注入攻击

Ajax是什么

Asynchronous JavaScript XML的缩写，译为异步JavaScript和XML，用来描述一种使用现在技术集合的“新”方法，使HTML页面能够快速的将数据逐步更新显示在用户界面上，不需要**重载（刷新）**整个页面

Ajax涉及的技术

HTML页面
Cascading Style Sheets（CSS）
JavaScript Object Model（Dom）
XML
XMLHttpRequest对象（实现异步交互的核心）

Ajax的工作原理

在这里插入图片描述

Ajax的核心对象

XMLHttpRequest对象，为客户端提供在客户端和服务器之间传输数据的功能
XMLHttpRequest对象提供了一个通过URL来获取数据的简单方式，并且不会使整个页面刷新

实现Ajax的执行步骤

创建Ajax的核心对象
通过核心对象的open（）方法与服务器端建立连接
构建请求所需要的数据内容，并通过核心对象的send（）方法发送给服务器端
通过核心对象提供的onreadystatechange事件监听服务器端的通信状态
接收并处理服务器端向客户端响应的数据结果
将处理结果更新到HTML页面中

通过Ajax异步请求数据

语法结构 - httpRequest.send(data)

data - 表示请求的数据内容

简单的异步交互

利用node.js创建服务器

//引入Node.js中的http模块
const http = require('http')
//定义当前服务的IP地址和端口号
const hostname = '127.0.0.1';//主机名
const port = 3000;
/*
    createServer(callback)方法 - 表示创建一个服务
    * callback - 表示回调函数
        funtion（request，response）{}
        * request - 表示请求（同于接收客户端发送给服务器端的请求）
        * response - 表示响应（用于服务器发送给客户端的处理结果）
*/
const server = http.createServer(function(req,res){
    res.statusCode = 200;
    res.setHeader('Content-Type','text/plain')
    res.end('Hello World!\n');
})

server.listen(port,hostname,function(){
    console.log(`Server running at http://${hostname}:${port}/`)
})

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异步交互</title>
    <script src="XMLHTTPRequest对象.js"></script>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        var btn = document.getElementById('btn');
        btn.addEventListener('click',function(){
            var xhr = createXMLHttpRequest();
           
           xhr.onreadystatechange = function(){//监听服务器端的通信状态 //根据需要值的多少可以调整位置
               if(xhr.readyState === 4){
                 if(xhr.status === 200){
                     console.log(xhr.responseText)
                 }
               }
           }
           xhr.open('get','http://127.0.0.1:3000')

           xhr.send(null)
        })
    </script>
</body>
</html>

smile_team

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax的基本用法

### 同步交互发送一个请求，需要等待返回，然后才能发送下一个请求异步交互发送一个请求，不需要等待返回，就能发送下一个请求异步交互优势用户操作无需像同步交互必须等待结果异步交互只需要与服务器端交换必要的数据内容，而不是将所有数据全部更新异步交互对带宽造成的压力相比于同步交互更小通过Ajax实现异步交互不需要任何第三方插件，只要浏览器支持JavaScript语言即可实现异步交互的劣势异步交互破坏了浏览器原有的前进和后退机制如果后面逻辑的执行依靠前面逻辑执行的结果的话，异步交互可
复制链接

扫一扫