2021-10-07

AJAX详解

1.1 AJAX简介

AJAX全称是Asynchronous JavaScript And XML, 就是异步的JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。AJAX不是新的编程语言,而是一种将现有的标准组合在一起使用的新的方式。
AJAX的作用:
(1)实现页面懒加载;
(2)实现用户名校对,是否是重复用户名
(3)在搜索框中输入关键字是,显示与此关键字相关的关键字

1.2 XML简介

XML 可扩展标记语言
XML 被设计用来传输和存储数据
XML和HTML类似,不同的是HTML中都是预定义标签,而XML 中没有预定义标签,全都是自定义标签,用来表示一些数据。
AJAX在向服务发送请求后,服务器响应后会向前端JS发送XML文件,并进行解析,但是现在已经被JSON格式取代了。

1.3AJAX的特点

优点:
(1) 可以无需刷新页面与服务器进行通信。
(2) 允许根据用户事件来更新部分页面内容。
缺点:
(1) 没有浏览历史,不能回退
(2) 存在跨域问题(同源)
(3) SEO(页面优化)不友好

1.4 AJAX的状态

0(未初始化)还没有调用send()方法
1(载入)已调用send()方法,正在发送请求
2(载入完成)send()方法执行完成,已接收到全部响应内容
3(交互)正在解析响应内容
4(完成)响应内容解析完成,可以在客户端调用

1.5如何实现一个AJAX

Ajax创建异步对象XMLHttpRequest
操作XMLHTTPRequest对象
(1) 设置请求参数(请求方式,请求页面的相对路径,是否异步)
(2) 设置回调函数,一个处理服务器响应的函数,使用onreadystatechange
(3) 获取异步对象的readyState属性,该属性存有服务器响应的状态信息。每当readyState改变时,onreadystatechange函数就会被执行
(4) 判断响应报文的状态,若为200说明服务器正常运行并返回响应数据。
(5) 读取响应数据,可以通过responseText属性来取回由服务器返回的数据

以下代码时用AJAX完成一个get请求:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: 2px solid rgba(94, 14, 160, 0.877);
        }
    </style>
    <script>
        window.onload = function(){
            // 获取button元素
            const btn = document.getElementsByTagName('button')[0];
            const result = document.getElementById('result')
            // 绑定事件
            btn.onclick = function(){
                // 1.创建对象
                const xhr = new XMLHttpRequest();
                // 2. 初始化 设置请求方法和url
                xhr.open('GET', 'http://127.0.0.1:8000/sever?a=100&b=200&c=300');
                // 3. 发送
                xhr.send();
                // 4. 事件绑定 处理服务端返回的结果
                // on when 当。。时候
                // readystate 是xhr对象中的属性 表示状态0  1 2 3 4
                // change 改变
                xhr.onreadystatechange = function(){
                    // 判断响应状态吗 200 404 403 401 500
                    // 2XX成功
                    if(xhr.readyState == 4){
                        if(xhr.status >= 200&&xhr.status<300){
                        // 处理结果 行 头 空行 体
                        // 1.响应行
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText)//状态字符串
                        // console.log(xhr.getAllResponseHeaders);//所有响应头
                        // console.log(xhr.response);//响应体
                            // 设置result文本
                            result.innerHTML = xhr.response
                        }else{

                        }
                    }
                    
                }

            }
        }
        
    </script>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值