AJAX原生

LikY03321

已于 2023-02-02 10:03:05 修改

阅读量157

点赞数

文章标签： ajax javascript 前端

于 2023-02-01 20:55:20 首次发布

本文链接：https://blog.youkuaiyun.com/LikY03321/article/details/128839294

版权

AJAX全称：Asynchronous Javascript And XML。AJAX并不是一种新的编程语言，是一种技术。AJAX实现了页面不需要刷新也能获取数据。

使用AJAX技术，关键在于XMLHttpRequest对象。

AJAX是异步操作

AJAX 的特点

优点:

可以无需刷新页面，与服务器进行通信。允许依据用户事件来更新部分页面内容

缺点:

没有浏览历史，不能回退，

存在跨域问题(同源)

SEO不友好 (搜索引擎优化，对爬虫不友好)

破坏了浏览器前进和后退机制（因为ajax自动更新机制）

一个Ajax请求多了，也会出现页面加载慢的情况。

搜索引擎的支持程度比较低。

ajax的安全性问题不太好（可以用数据加密解决）。

注：如果要使用ajax必须要有后端环境的支持（服务器端）。

原生ajax请求的五个步骤：

客户端发送请求，请求交给 XMLHttprequest，XMLHttpRequest 把请求提交给服务，服务器进行业务处理，服务器响应数据交给XMLHttpRequest 对象，XMLHttpRequest 对象接收数据，avascript 把数据写到页面上

实例化请求对象

var xmlhttp=new xmlhttprequst();

建立服务器链接

判断数据的传输方式（get/post）,打开链接（open()）

方法

描述

open(method,url,async)

规定请求的类型、URL以及是否异步处理请求。

method:请求的类型；GET或POST。

url:文件在服务器上的位置。

async:true(异步)或false(同步)

xmlhttp.open("get","http://127.0.0.1:5500",true);

监听服务器响应

如需获得来自服务器的响应，请使用XMLHttpRequest 对象的 responseText 或responseXML属性。

属性	描述
responseText	获得字符串形式的响应数据
responsexML	获得XML形式的响应数据

xmlhttp.onreadystatechange=function(){
    if(xmlhttp.status==200&&xmlhttp.readystate==4){
        document.write(xmlhttp.responseText);
    }
}

发送请求

xmlhttp.send();

5.响应成功，传递参数

<body>
    <button id="btn">点击</button>
    <div id="div1"></div>
    <script>
        document.getElementById("btn").onclick=function(){
            var xml=new XMLHttpRequest();
            xml.open("get","http://127.0.0.1:5500/jquery/demo21.html",true);
            xml.onreadystatechange=function(){
                if(xml.status==200 && xml.readyState==4){
                    document.getElementById("div1").innerHTML=xml.responseText;
                }
            }
            xml.send()
        }
        

    </script>
</body>