Ajax基本用法

最新推荐文章于 2022-11-26 20:24:27 发布

BoreasMan

最新推荐文章于 2022-11-26 20:24:27 发布

阅读量257

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41966617/article/details/108439063

版权

JavaScript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

同步交互与异步交互

同步交互

指发送一个请求，需要等待返回，然后才能够发送下ー个请求。同步交互相当于排队，轮到下一个的情况会因为前一个而有所不同。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-44azKsJr-1599406779157)(https://s1.ax1x.com/2020/08/29/d7RsxJ.png)]

异步交互

所谓异步交互，就是指指发送一个请求，不需要等待返回，随时可以再发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ovYho2q-1599406779159)(https://s1.ax1x.com/2020/08/29/d7R6M9.png)]

异步交互的优势

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

异步交互的缺点

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

Ajax是什么

Ajax是Asynchronous JavaScript + XML的缩写, Ajax本身不是一种新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的新方法。

使用Ajax模型，网页应用能够快速地将增量更新呈现在用户界面上，而不需要刷新整个页面。这使得程序能够更快地回应用户的操作。

Ajax 涉及的技术

Ajax 只是为实现异步交互的手段，不是一种技术，而是多种技术的整合。其中包括以下几种技术

HTML 页面
CSS
JavaScript
DOM
XML
XMLHttpRequest 对象 (实现Ajax异步交互的核心)

实现Ajax异步交互

实现Ajax的执行步骤

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

创建Ajax 的核心对象

定义函数

function createXMLHttpRequest() {
  var httpRequest;
  if (window.XMLHttpRequest) {
    // 适用于Chrome等浏览器
    httpRequest = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    // 适用于IE
    try {
      httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {}
    }
  }
  return httpRequest;
}

window原型上定义

Object.defineProperty(window, "createXMLHttpRequest", function () {
    var httpRequest;
    if (window.XMLHttpRequest) {
        // 适用于非IE浏览器
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        //   适用于IE浏览器
        try {
            // IE 7+
            httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                //   IE 6-
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }
    return httpRequest;
});

匿名函数

(function () {
  function createXMLHttpRequest() {
    var httpRequest;
    if (window.XMLHttpRequest) {
      // 适用于非IE浏览器
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
      //   适用于IE浏览器
      try {
        // IE 7+
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          //   IE 6-
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
      }
    }
    return httpRequest;
  }
  window.createXMLHttpRequest = createXMLHttpRequest;
})();

实现Ajax的步骤

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现Ajax步骤</title>
</head>

<body>
    <button id="btn">按钮</button>
</body>

</html>

<script>
    let btn = document.querySelector('#btn')

    btn.addEventListener('click', function () {
        // 实现Ajax的异步交互

        // 1.创建XMLHttpRequest对象
        let xhr = new XMLHttpRequest()
        /*
           2.调用XMLHttpRequest的open()方法
            * 作用：与服务器建立连接
            open(method,url)方法
             * method：表示当前的请求方式
             * url：表示请求的服务器地址
        */
        xhr.open("get",
            "http://127.0.0.1:5500/AJAX-%E9%87%91/Ajax%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95/02%E6%B5%8B%E8%AF%95XMLHttpRequest%E5%AF%B9%E8%B1%A1.html"
        )
        /*
            3.调用XMLHttpRequest对象的send()方法
             * 作用：将客户端页面的数据发送给服务器
             * 不传递数据时，要传入null
        */
        xhr.send(null)

        /*
            4.利用XMLHttpRequest对象的onreadystatechange事件
             * 作用：用于监听服务器的通信状态
             * 服务器端的通信状态中 存在和处理完毕信号
             * 接收服务器端返回的处理结果
        */

        xhr.onreadystatechange = function () {
            /*
                XMLHttpRequest对象的readyState属性
                 * 作用：表示服务器的通信状态
                 * 值
                  * 0：未初始化
                  * 1：open()方法被调用
                  * 2：send()方法被调用
                  * 3：正在响应
                  * 4：响应完毕
            */
            if (xhr.readyState === 4) {
                // 作用：接收服务器端的响应结果
                console.log(xhr.responseText);
            }

        }
        /*
            5.将收到的结果更新到HTML页面中
        */
    })
</script>

通过Ajax异步交互

状态码

通过 status 属性判断返回响应的状态码

xhr.onreadystatechange = function () {
    /*
     	XMLHttpRequest.onreadystatechange 会在 XMLHttpRequest 
     	的readyState 属性发生改变时触发 readystatechange 事件的时候被调用
    */

    // 通信状态为4 并且状态码为200返回数据
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
        console.log(xhr.status)
    }

}

send()方法

send()方法：向服务器端发送请求数据

参数data：表示要向服务器端发送的请求数据
请求方式
- 如果请求方式是GET send()方式只能传null 将参数添加到请求地址中
- 如果是POST方法那么参数传入请求的参数，并且设置请求头
发送数据的两种情况
- 发送数据：格式 -> name=value 如果具有多个请求数据之间使用&分隔
- 不发送数据：send()方法中必须传递null 不能为空

GET

xhr.open("get", "www.xxx.com?user=abc&pwd=123")

POST

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send("user=abc&pwd=123")

Node搭建基础服务

// 导入http模块
const http = require("http");

const hostname = "127.0.0.1";
// 端口号
const port = 3000;
/*
  createServer方法：创建一个服务器
    * request：表示请求
    * respone：表示响应
*/
const server = http.createServer(function (req, res) {
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/plain");
  res.end("Hello world");
});

server.listen(port, hostname, () => {
  console.log(`http://${hostname}:${port}`);
});

* request：表示请求
* respone：表示响应

*/
const server = http.createServer(function (req, res) {
res.statusCode = 200;
res.setHeader(“Content-Type”, “text/plain”);
res.end(“Hello world”);
});

server.listen(port, hostname, () => {
console.log(http://${hostname}:${port});
});

BoreasMan

关注

0
点赞
踩
0

收藏

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

同步交互与异步交互同步交互指发送一个请求，需要等待返回，然后才能够发送下ー个请求。同步交互相当于排队，轮到下一个的情况会因为前一个而有所不同。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-44azKsJr-1599406779157)(https://s1.ax1x.com/2020/08/29/d7RsxJ.png)]异步交互所谓异步交互，就是指指发送一个请求，不需要等待返回，随时可以再发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不
复制链接

扫一扫