首页 > 编程语言 > 详细

javascript学习笔记——Ajax

时间:2019-10-16 21:14:05      阅读:72      评论:0      收藏:0      [点我收藏+]

AJAX是什么?

  • Asynchronous JavaScript & XML
  • web开发的一种技术
  • 异步发送 & 请求数据
  • 不需要重新刷新当前页面

 

ajax工作流程图:

技术分享图片

 

 

 

XHLHttpRequest对象

  • 对象类型的API
  • 在浏览器环境下使用
  • 用于客户端和服务端数据的传递和接收
  • 用于请求XML数据(JSON,纯文本text)

 

其他类似的技术 / 库

  • jquery
  • axios
  • superagent
  • fetch API
  • prototype
  • node HTTP

 

ajax请求的两种方式

  1. onload
  2. onreadystatechange

 

index.html

<!DOCTYPE html>
<html>
<head>
    <title>ajax - 请求纯文本</title>
</head>
<body>
    <button id="btn">请求纯文本</button>
    <p id="text"></p>
</body>
</html>

 

js

<script>
        document.getElementById(‘btn‘).addEventListener(‘click‘,loadText);
        let text = document.getElementById(‘text‘);

        function loadText(){
            // 1 创建XMLHTTPRequest对象,用于连接客户端与服务端
            let xhr = new XMLHttpRequest();
            // console.log(xhr);

            // 2
            xhr.open(‘GET‘,‘./sample.txt‘,true);

            // 3 请求的方式(两种)onload() 和 onreadystatechange()
                        // readyState 状态码
            // 0: 请求未初始化
            // 1: 服务器连接已建立
            // 2: 请求已接收
            // 3: 请求处理中
            // 4: 请求已完成,且响应已就绪
            // 
            // HTTP 状态码
            // 200 - 服务器成功返回网页
            // 404 - 请求的网页不存在
            // 503 - 服务器暂时不可用

            // 3.1
            xhr.onload = function(){
                if (this.status == 200 && this.readyState == 4) {
                    console.log(this.readyState);
                    console.log(this.responseText);
                }
            }

            // 3.2
            // xhr.onreadystatechange = function(){
            //     if (this.status == 200 && this.readyState == 4) {
            //         text.innerHTML = this.responseText;
            //     }else if(this.status == 404){
            //         console.log(‘网页不存在!!‘);
            //     }
            // }

            // 4 发送请求
            xhr.send();
        }
    </script>    

 

ajax请求不同数据

  • ajax请求纯文本
  • ajax请求json
  • ajax请求github真实接口
  • ajax请求PHP接口

 

javascript学习笔记——Ajax

原文:https://www.cnblogs.com/woshinixxk/p/11687342.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!