AJAX详解

最新推荐文章于 2024-04-03 18:23:44 发布

杰仔正在努力

最新推荐文章于 2024-04-03 18:23:44 发布

阅读量483

点赞数

文章标签： ajax javascript 服务器

本文链接：https://blog.csdn.net/m0_58878709/article/details/124562941

版权

Ajax

文章目录

Ajax
一、认识Ajax
二、Ajax使用步骤
三、跨域

一、认识Ajax

1.1 什么是Ajax

Ajax全称为Asynchronous JavaScript And XML
Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式
通过Ajax可以在浏览器中向服务器发送异步请求

1.2 异步和同步的区别

异步请求：

浏览器可以委托多个异步请求对象发送请求，无需等待请求处理完成
浏览器委托异步请求对象工作期间，浏览器处于活跃状态，可以继续向下执行其他命令

同步处理：

浏览器只能委托一个异步请求对象发送请求，必须等待请求处理完成
浏览器委托异步请求对象工作期间，浏览器处于等待状态，不能执行其他命令

1.3 Ajax的特点

Ajax的优点

1. 可以无需刷新页面而与服务器进行通信
2. 允许你根据用户事件来更新部分页面内容

Ajax的缺点

1. 没有浏览历史
2. 存在跨域问题
3. SEO 不友好

1.4 Ajax的工作原理

Ajax的工作原理就是通过XMLHttpRequest对象来向服务器进行异步请求，服务器进行处理，再由服务器响应的数据回交给XMLHttpRequest，XMLHttpRequest对象接收数据并由JavaScript进行处理

Ajax

二、Ajax使用步骤

1、创建XMlHttpRequest对象

const xhr = new XmlHtttpRequest();

2、初始化设置类型和 URL

用于说明我们创建的XMlHttpRequest对象要从哪里获取数据

xhr.open(method,URL,true);

①method：这个参数代表请求方式，请求方式可以是post，get，head，put，delete五种方式
②URL：这个参数表示请求地址，如果为空的话，就返回自己的html代码
③第三个参数true(异步)或false(同步)，默认是true

举例:仅供参考

xhr.open('GET', 'http://127.100.100.20:8000/serverHtml',true);

3、发送请求

xhr.send()

4、使用onreadystatechange属性给异步对象绑定事件

当异步对象发起请求，获取了数据都会触发这个事件,在这个事件中需要指定一个函数，在函数中处理状态的变化

            xhr.onreadystatechange = function(){
                //判断 (服务端返回了所有的结果)
                if(xhr.readyState === 4){
                    //判断响应状态码 200  404  403 401 500
                    //200~300之间表示请求成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                    }
                }
            }

readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4

状态码	状态
0	未初始化，但是已经创建了xhr实例
1	初始化异步请求对象，调用了open()方法
2	发送请求，调用了send()方法，但是还没有收到服务器回应
3	交互，正在解析数据
4	数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据

5、完整代码参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
    <style>
        #box{
            width:400px;
            height:400px;
            border:solid 1px #900;
        }
    </style>
</head>
<body>
    <button>发送请求</button>
    <div id="box"></div>

    <script>
        const btn = document.getElementsByTagName('button')[0];
        const box = document.getElementById("box");
        //绑定事件
        btn.onclick = function(){
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和 url
            xhr.open('GET', 'http://127.100.100.20:8000/serverHtml');
            //3. 发送
            xhr.send();
            //4. 事件绑定
            xhr.onreadystatechange = function(){
                //判断 (服务端返回了所有的结果)
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                    }
                }
            }
            
        }
    </script>
</body>
</html>

三、跨域

3.1什么叫跨域

跨域指的就是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的

3.2 同源策略

同源策略是一种安全策略
同源：协议、域名、端口号必须完全相同
违背同源策略就是跨域

3.3解决跨域方法

使用JSONP解决跨域

全称为：JSON with Padding，只支持get请求

优点：
兼容性好

缺点：
只支持get方法

工作原理：

使用script标签没有跨域限制的特点，来达到与第三方通讯的目的

原生使用方法：
在HTML在设置
1、创建一个script标签

const script = document.createElement('script');

2、设置标签的 src 标签,并且设置回调函数

script.src = 'http://127.0.0.1:8000/check-username'

funcation fu(data){
	console.log(data)
}

3、将script插入到文档中

document.body.appendChild(script);

在服务端中设置

app.get('/check-username',function(request, response)=>{
	const data = {
		name:"张国荣"
};
	//将数据转化为字符串
    let str = JSON.stringify(data);
    //设置响应体
    response.end(`handle(${str})`);
});

简单的配置供大家参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP</title>
</head>
<body>
    用户名: <input type="text" id="username">
    <p></p>
    <script>
        const input = document.querySelector('input');
        const p = document.querySelector('p');
        
        function fu(data){
            input.style.border = "solid 1px #900";
            //修改 p 标签的提示文本
            p.innerHTML = data.name;
        }

        input.onblur = function(){
            let username = this.value;
            const script = document.createElement('script');
            script.src = 'http://127.0.0.1:8000/check-username';
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

使用CORS解决跨域

特点

不需要在客户端做任何特殊操作，完全在服务器中进行处理

优点
支持get和post请求

缺点
浏览器兼容性差

工作原理

通过设置一个响应头来告诉浏览器，请求允许跨域，浏览器收到该响应以后就会对响应放行

app.all('/cors-server', (request, response)=>{
    //设置响应头
    //服务器告诉浏览器允许哪些站点可以跨域访问我的资源，（*）代表这里我们设置允许所有网站进行同源访问，但是我们不建议这样子写
    response.setHeader("Access-Control-Allow-Origin", "*");
    //访问我的资源
    // response.setHeader("Access-Control-Allow-Origin", " http://www.abc.com");
    //响应首部
    response.setHeader("Access-Control-Allow-Headers", '*');
    //表明服务器支持的所有跨域请求的方法 注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法
    response.setHeader("Access-Control-Allow-Method", '*');
    response.send('hello CORS');
});

以上便是ajax的学习部分，感兴趣的同学可以借鉴参考！！！

杰仔正在努力

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX详解

上手Ajax文章目录上手Ajax一、认识Ajax1.1什么是Ajax1.2异步和同步的区别1.3Ajax的特点一、认识Ajax1.1什么是AjaxAjax全称为Asynchronous JavaScript And XMLAjax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式通过Ajax可以在浏览器中向服务器发送异步请求1.2异步和同步的区别异步请求：浏览器可以委托多个异步请求对象发送请求，无需等待请求处理完成浏览器委托异步请求对象工作期间，浏览器处于活跃状态
复制链接

扫一扫