ajax简介

Posted 2022-10-01 ysmdbk

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax简介相关的知识，希望对你有一定的参考价值。

AJAX = Asynchronous javascript and XML（异步的 JavaScript 和 XML）。

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

原生JS的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function loadXMLDoc()
        
            // 2、创建一个XMLHttpRequest对象
            var xmlhttp;
            if (window.XMLHttpRequest)
            
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            
            else
            
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            
            //3、注册回调函数
            xmlhttp.onreadystatechange=function()
            
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                
            
            // 4、配置请求信息
            xmlhttp.open("GET","/springboot/src/main/webapp/123.txt",true);
            xmlhttp.send();
            // 5、state change发生改变调用回调函数 回调函数将xmlhttp.responseText内容写入到页面
        
    </script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<!--1、点击按钮触发loadXMLDoc这个方法-->
<button type="button" onclick="loadXMLDoc()">修改内容</button></body>
</html>

根据上面的代码解释下ajax的请求步骤

1、点击按钮触发loadXMLDoc这个方法

　　这个没啥好说的

2、创建一个XMLHttpRequest对象

　　　所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

3、注册回调函数

4、配置请求信息

　　xmlhttp.open()参数:

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

　　　　如果是同步执行，不需要重写onreadystatechange函数，把代码放到 send() 语句后面即可

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

　　xmlhttp.send();

string：仅用于 POST 请求

　　　　如果post请求中有参数需要卸载send方法中

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

5、state change发生改变调用回调函数回调函数将xmlhttp.responseText内容写入到页面

　　如果返回的内容是字符串(json) 使用:responseText

　　如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性

以上是关于ajax简介的主要内容，如果未能解决你的问题，请参考以下文章