AJAX快速入门

✅作者简介:大家好,我是Philosophy7?让我们一起共同进步吧! 个人主页:Philosophy7的csdn博客
系列专栏: 数据结构与算法
哲学语录: 承认自己的无知,乃是开启智慧的大门
如果觉得博主的文章还不错的话,请点赞+收藏⭐️+留言支持一下博>主哦

在这里插入图片描述

目录

    • 一、什么是AJAX
    • 二、同步和异步
      • ①同步:
      • ②异步:
    • 三、快速入门
    • 四、XMLHttpRequest
      • ①XMLHttpRequest对象方法
      • ②XMLHttpRequest 对象属性

一、什么是AJAX

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

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

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

二、同步和异步

①同步:

浏览器页面发送请求到服务器,服务器处理请求的过程中,浏览器页面不能做其他的操作。只能等待服务器响应结束后才能做后续的操作

②异步:

浏览器页面发送请求给服务器,在服务器处理请求的过程中,浏览器页面还可以做其他的操作。

三、快速入门

DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

    <div id="demo">
        <h2>让 AJAX 更改这段文本h2>
        <button type="button" onclick="loadDoc()">更改文本button>
    div>

<script type="application/javascript">
    function loadDoc(){
        //1.创建XMLHttpRequest对象
        var xhttp = new XMLHttpRequest();
        //2.onreadystatechange属性 --- 发送变化时被调用的函数
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("demo").innerHTML = this.responseText; //responseText属性 以字符串返回响应数据
            }
        };
        //open方法用于规定请求相关信息
        xhttp.open("GET", "ajax_info.txt", true);

        //发送请求
        xhttp.send();
    }
script>

body>
html>

四、XMLHttpRequest

Ajax 的核心是 XMLHttpRequest 对象。

①XMLHttpRequest对象方法

方法 描述
new XMLHttpRequest() 创建新的 XMLHttpRequest 对象
abort() 取消当前请求
getAllResponseHeaders() 返回头部信息
getResponseHeader() 返回特定的头部信息
open(method, url, async, user, psw) 规定请求method:请求类型 GET 或 POSTurl:文件位置async:true(异步)或 false(同步)user:可选的用户名称psw:可选的密码
send() 将请求发送到服务器,用于 GET 请求
send(string) 将请求发送到服务器,用于 POST 请求
setRequestHeader() 向要发送的报头添加标签/值对

②XMLHttpRequest 对象属性

属性 描述
onreadystatechange 定义当 readyState 属性发生变化时被调用的函数
readyState 保存 XMLHttpRequest 的状态。0:请求未初始化1:服务器连接已建立2:请求已收到3:正在处理请求4:请求已完成且响应已就绪
responseText 以字符串返回响应数据
responseXML 以 XML 数据返回响应数据
status 返回请求的状态号200: "OK"403: "Forbidden"404: “Not Found”
statusText 返回状态文本(比如 “OK” 或 “Not Found”)

你可能感兴趣的:(笔记,ajax,javascript,前端)