ajax的简单理解及操作

最新推荐文章于 2024-07-16 16:43:05 发布

denglundebaobei

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量71

点赞数

文章标签： ajax javascript html5

本文链接：https://blog.csdn.net/denglunde/article/details/120493383

版权

1.简介

AJAX = Asynchronous JavaScript And XML.（异步的JavaScript和XML）,用于浏览器和服务器数据交互的工具,可以局部刷新页面。

详情AJAX 简介

XML（EXtensible Markup Language）指可扩展标记语言，被设计用来传输和存储数据。

AJAX 并非编程语言。

它仅仅组合了：

浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
JavaScript 和 HTML DOM（显示或使用数据）

Ajax的核心是XMLHttpRequest对象，参考文档

AJAX - XMLHttpRequest 对象

2.实例：

1）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>Document</title>
    <script>
        //1.创建实例对象
        var xhr = new XMLHttpRequest();
        //2.打开一个连接第一个参数是请求方式，第二个参数是url
        xhr.open('get','http://47.93.206.13:8002/index/findAllCategory');
        //3.发送请求
        xhr.send();
        //4.接受响应
        xhr.onreadystatechange=function(){
            if(xhr.readyStates===4&xhr.status===200){//表示请求成功
                console.log(xhr.responseText)
            }else{
                console.log(xhr.responseText);
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

2）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>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
    <script>
        var obj = {
            username:'admin2',
            password:123321
        }
        //1.创建实例对象
        var xhr = new XMLHttpRequest();
        //2.打开一个连接（请求方式，请求路径）
        xhr.open('post','http://47.93.206.13:8002/user/login');
        //设置请求头格式
        xhr.setRequestHeader('content-type','application/json');
        //3.发送请求
        xhr.send(JSON.stringify(obj));
        //JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

        //4.接受响应
        xhr.onreadystatechange=function(){
            if(xhr.readyStates===4&xhr.status===200){
                console.log(xhr.responseText);
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

denglundebaobei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax的简单理解及操作

1.简介AJAX = Asynchronous JavaScript And XML.（异步的JavaScript和XML）,用于浏览器和服务器数据交互的工具,可以局部刷新页面。详情AJAX 简介XML（EXtensible Markup Language）指可扩展标记语言，被设计用来传输和存储数据。AJAX 并非编程语言。它仅仅组合了：浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据） JavaScript 和 HTML DOM（显示或使用数据）
复制链接

扫一扫