Ajax

Ajax

Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)

最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容

不需要任何浏览器插件,但需要用户允许 JavaScript 在浏览器上执行


发送请求的方式/标签

方式一:浏览器输入地址,回车

方式二:在html中,使用script/link/img请求外部资源时,会自动发送请求

方式三:a标签,form表单标签,需要手动控制提交产生请求,往往需要在新的页面上获得响应信息

方式四:运行js代码产生请求

我们通过事件触发JS代码运行发送请求,响应后我们可以通过JS代码动态处理是否要跳转页面,还是将要响应的信息通过DOM编程显示在dom树中


Ajax的实现方式

原生JS的实现方式,代码繁琐,涉及到回调函数问题

使用第三方封装好的工具 jquery

使用框架 VUE axios


使用原生JS的实现方式

借助于XMLHttpRequest类实异步请求(xhr)

其对象有以下方法:

  • readState 返回xhr的状态,其中4为正常响应
  • status 返回xhr的响应状态码,其中200为正常响应
  • responseText 返回后端响应体中的数据,可选择使用Dom编程直接显示或使用Bom编程跳转页面
  • open 设置请求的发送方式和请求资源的路径和参数
  • send 发送请求
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function getMessage() {
            //实例化一个xmlHttpRequest
            var xhr = new XMLHttpRequest();

            //设置XMLHttpRequest对象的回调函数
            //xhr.readState 1 2 3 4
            //xhr.status 响应状态码 响应行状态码
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    //xhr.responseText 后端响应回来的响应体中的数据
                    //使用Dom编程在页面中显示信息
                    var inputEle = document.getElementById("message")
                    inputEle.value = xhr.responseText
                    //使用Bom编程的window对象跳转指定位置
                    // window.location.href="http://www.baidu.com"
                }
            }

            //设置请求的发送方式和请求资源的路径及参数
            xhr.open("GET", "/hello?username=zhangshan")

            //发送请求
            xhr.send()
        }
    </script>
</head>
<body>
<button onclick="getMessage()">按钮</button>
<input type="text" name="" id="message">
</body>
</html>