原生ajax请求-CSDN博客

本文介绍了AJAX（异步JavaScript和XML）的概念，其优点与缺点，以及XML在AJAX中的作用。详细讲解了XMLHttpRequest的核心对象和GET、POST请求的使用示例，以及如何处理跨域、SEO和缓存问题。

摘要由CSDN通过智能技术生成

原生AJAX

1.1Ajax简介：
AJAX全称为：Asynchronous javaScript And XML 就是异步的js和xml

通过AjAx可以在浏览器中向服务器发送异步请求最大的优点是无刷新获取数据

AjAx不是一种新的语言而是将现有的标准组合起来的一种新的使用方式

1.2 XML简介
XML是可扩展标记语言

XML被用来传递和存储数据

XML和HTML很相似但是HTML是预定义标签而XML没有预定义标签大部分是自定义标签

1.3 AJAX特点：
优点：
无需刷新页面与服务器进行通信

允许你根据用户事件更新页面部分内容

缺点：
不能回退没有浏览历史

存在跨域问题（后期可以使用JSONP、CORS解决跨域问题）

SEO不友好

1.4 AJAX的使用
核心对象：

XMLHttpRequest() AJAX的所有操作的基于该对象

使用步骤：

创建对象
const xml = new XMLHttpRequest()

设置请求信息
xml.open(method,url)

3.发送请求

xml.send()

4.处理事件

xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
console.log(text);
}
}

xml.responseXML 接收相应数据

xhr.responseText 接收文本格式的响应数据

解决IE缓存性问题

由于浏览器的缓存机制，ajax只会发送一次请求剩下的多次请求不会发送给浏览器而是直接加载缓存中的数据
解决方式：
xhr.open(“get”,“/testAJAX?t=”+Date.now());
AJAX的请求状态
xhr.readyState 查看当前请求状态
0：表示 XMLHttpRequest() 实例已经生成但是open()方法没有调用
1：表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。
2：表示send()方法已经执行并且头信息和状态码已经收到
3：表示接收服务器传来的body部分数据
4：表示服务器数据已经完全接收或者接收失败

1.使用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: 200px;
            border: 1px solid lightgreen;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        // 获取元素
        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/server?a=100&b=400&c=300')

            //3. 发送
            xhr.send()
            // onreadystatechange:当状态发生变化的时候
            xhr.onreadystatechange = function () {
                // 判断（服务器返回所有的结果）
                if (xhr.readyState === 4) {
                    // 判断响应状态码200 404 403 401 500
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理结果

                        // console.log(xhr.status); //状态码
                        // console.log(xhr.statusText); //状态字符串
                        // console.log(xhr.getAllResponseHeaders()); // 所有响应头
                        // console.log(xhr.response); //响应体

                        // 设置result的文本
                        result.innerHTML = xhr.response
                    }
                }
            }
        }
    </script>
</body>
</html>

2.使用AJAX POST请求

<!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 POST 请求</title>
    <style>
        #result {
            width: 200px;
            height: 200px;
            border: 1px solid lightpink;
        }
    </style>

</head>

<body>
    <div id="result">

    </div>
    <script>
        // 获取元素
        const result = document.getElementById('result')

        // 绑定事件
        result.onmouseover = function () {
            //1.创建对象
            const xhr = new XMLHttpRequest()

            // 2.初始化 设置请求方法和url
            xhr.open('POST', 'http://127.0.0.1:8000/server')

            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            xhr.setRequestHeader('name', 'baidu')
            // 3.发送
            xhr.send()
            // xhr.send('a=100&b=200&c=300')
            // xhr.send('a:100&b:200&c:300')

            // 4.事件绑定
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response
                    }

                }
            }
        }
    </script>
</body>