AJAX01

最新推荐文章于 2021-08-06 10:53:16 发布

李小小小白

最新推荐文章于 2021-08-06 10:53:16 发布

阅读量108

点赞数

分类专栏：程序员开发文章标签：笔记

本文链接：https://blog.csdn.net/liqazwsxedcrfv/article/details/85788018

版权

程序员开发专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1.什么是AJAX

Asynchronous Javascript And Xml
Asynchronous：异步的
Xml：可扩展的标签语言（eXtensible Markup Language）（用于存储数据，较繁琐）
JSON：JavaScript Object Notation，用来取代繁琐的Xml
Html：用于网页的显示
解释：通过JS异步的向服务器发送请求，并接收响应回来的XML(JSON)格式的数据
同步请求：当客户端向服务器发送请求时，服务器在处理的过程中，浏览器只能等待，效率低
异步请求：当客户端向服务器发送请求时，服务器在处理的过程中，客户端可以做其他的操作，不需要一直等待
AJAX优点：1.异步访问，2.局部刷新
使用场合：1.搜索建议，2.表单的验证，3.前后端完全分离

2.AJAX的核心对象 - 异步对象

1.异步对象（XMLHttpRequest）
简称"xhr"，称为“异步对象”，代替浏览器向服务器发送异步的请求并接收响应
2.创建异步对象
主流的异步对象是XMLHttpRequest类型的，并且主流的浏览器（IE7+,Chrome,Firefox,Safari,Opera）全部都支持XMLHttpRequest。但在IE低版本的浏览器中（IE7以及以下），就不支持XMLHttpRequest。使用ActiveXObject()来创建异步对象
检测是否支持XMLHttpRequest：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button onclick="btnClick()">测试XHR</button>
    <script>
        function btnClick() {
            alert(window.XMLHttpRequest)
        }
    </script>
</body>
</html>

结果为：
function XMLHttpRequest() {
    [native code]
}

支持XMLHttpRequest：
var xhr = new XMLHttpRequest()
不支持XMLHttpRequest：
var xhr = new ActiveXObject("Microsoft.XMLHTTP")

练习：根据不同的浏览器支持性创建不同的异步对象
1.声明一个方法 - createXhr()
2.方法中判断浏览器支持XMLHttpRequest还是ActiveXObject
3.根据支持性创建不同的异步对象并返回

<body>
    <button onclick="createXhr()">创建</button>
    <script>
        function createXhr() {
            if (window.XMLHttpRequest){
                var xhr = new XMLHttpRequest()
            }else {
                var xhr = new ActiveXObject("Microsoft.XMLHTTP")
            }
            alert(xhr)
        }
    </script>
</body>

3.xhr的成员

1.方法 - open()

作用：创建请求
语法：open(method, url, async)
method：请求方法，取值‘get’,‘post’
url：请求地址，字符串
async：是否采用异步的方式（true：异步，false：同步）

例如: xhr.open('get','/server',true)

2.属性 - readyState

作用：请求状态，通过不同的请求状态值来表示xhr与服务器的交互情况，由0-4共5个值组成:

0：请求尚未初始化
1：已经与服务器建立了连接
2：服务器端开始接收请求
3：服务器正在处理请求
4：响应已经完成

3.属性 - status

作用：服务器端的响应状态码

200：服务器端正确处理所有请求并给出响应
404：请求资源不存在
500：服务器内部错误

4.属性 - responseText

作用：响应数据
注意：只有在readyState为4，并且status为200的时候，responseText才是有用的数据

5.事件 - onreadystatechange

作用：每当readyState的值发生改变的时候都要触发的操作 - 回调函数
为xhr绑定onreadystatechange事件

xhr.onreadystatechange = function(){
	//判断xhr的readyState是否为4并xhr的status是否为200，如果以上条件达成，则可以接收响应数据
	if (xhr.readyState==4&&xhr.status==200){
		console.log(xhr.responseText)
	}
}

6.方法 - send(body)

作用：通知xhr向服务器发送请求
语法：xhr.send(body)
body：是请求体
get请求的话：body的值为null
post请求的话：body的值为要提交的数据

4.AJAX的操作步骤

1.GET请求
1.创建xhr对象
2.创建请求 - open()
3.设置回调函数 - onreadystatechange
4.发送请求 - send()
例如：

<body>
    <!--传统的网页访问-->
    <h2>
        <a href="/02-server">去往/02-server</a>
    </h2>
    <button onclick="btnAjax()">使用AJAX发送请求</button>
    <h2 id="show"></h2>
    <script>
        function createXhr() {
            var xhr = null
            //判断浏览器对xhr的支持性
            if (window.XMLHttpRequest){
                xhr = new XMLHttpRequest()
            }else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP")
            }
            return xhr
        }
        function btnAjax() {
            //1.创建xhr对象
            var xhr = createXhr()
            //2.创建请求
            xhr.open('get','/02-server',true)
            //3.设置回调函数
            xhr.onreadystatechange = function(){
                //判断readyState是否为４并且status是否为200
                if (xhr.readyState==4&&xhr.status==200){
                    //接收响应数据
                    var resText = xhr.responseText
                    //讲resText放在#show中显示
                    document.getElementById('show').innerHTML = resText
                }
            }
            //4.发送请求
            xhr.send(null)
        }
    </script>
</body>

点击按钮前：
在这里插入图片描述
点击按钮后：

当前的url并没有发生改变

李小小小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX01

1.什么是AJAXAsynchronous Javascript And AmlAsynchronous：异步的Xml：可扩展的标签语言（eXtensible Markup Language）（用于存储数据，较繁琐）JSON：JavaScript Object Notation，用来取代繁琐的XmlHtml：用于网页的显示解释：通过JS异步的向服务器发送请求，并接收响应回来的XML(J...
复制链接

扫一扫

专栏目录