关于Ajax

1.Ajax

异步 JavaScript 和 XML

Ajax 本身不是一种技术,而是一种将一些现有技术结合起来使用的方法,包括:HTMLXHTMLCSSJavaScriptDOMXMLXSLT、以及最重要的 XMLHttpRequest 对象。当使用结合了这些技术的 Ajax 模型以后,网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作。Ajax 最吸引人的特性是它的"异步"性质,这意味着它可以与服务器通信、交换数据并更新页面,而无需刷新页面。

尽管 Ajax 中的 X 代表 XML,但是 JSON 才是首选,因为它更加轻量,而且是用 JavaScript 编写的。在 Ajax 模型中,JSON 和 XML 都被用来包装信息。

2.步骤

1.创建对象

java 复制代码
//建立ajax异步对象
let xhr = new XMLHttpRequest()

2处理服务器响应

java 复制代码
httpRequest.onreadystatechange = () => {
  // 在这里处理服务器响应。
};

3发送请求

java 复制代码
httpRequest.open("GET", "http://www.example.org/some.file", true);
httpRequest.send();

3.onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。AJAX -- onreadystatechange 事件 | 菜鸟教程

4.示例

java 复制代码
//建立ajax异步对象
let xhr = new XMLHttpRequest()
//给对象添加事件
xhr.onreadystatechange = function () {
    //ajax 对象状态码 0 1 2 3 4
    if (xhr.readyState === 4 && xhr.status === 200) {
        //获取接口的响应字符串
        //console.log(xhr.responseText)

        let obj = JSON.parse(xhr.responseText)
        //console.log(obj['java.version'])
        let doc = document.body
        for (let p in obj) {
            //console.log(obj[p])
            doc.innerHTML += `<p>${p} = ${obj[p]}</p>`
        }
    }
}

//本服务器下的 get文件输出的内容
//打开ajax对象,请求方式为GET 请求路径 本服务器路径,同域 https://localhost:3333/
//xhr.open('GET', './get', true)

//xhr.open('GET', 'http://192.168.13.249:8088/', true)

// xhr.open('GET', 'http://localhost:8088/', true)
xhr.open('POST', 'http://localhost:8088/post', true)

//发送请求
xhr.send()
相关推荐
枷锁—sha4 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha6 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜21 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2435 分钟前
html复习
javascript·microsoft·html
汉得数字平台39 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法