前端篇—ajax

最新推荐文章于 2024-07-23 13:28:07 发布

wolf67

最新推荐文章于 2024-07-23 13:28:07 发布

阅读量201

点赞数

分类专栏： Django 文章标签： django js ajax

本文链接：https://blog.csdn.net/weixin_42016382/article/details/102513339

版权

前言

1. 什么是ajax？

AJAX（Asynchronous JavaScript and XML）：异步的 JavaScript 和 XML，即使用Javascript语言与服务器进行异步交互。

2. ajax还有一个最大的特点： 当服务器响应时，不用刷新整个浏览器页面，而可以局部刷新。

与服务器异步交互
浏览器页面局部刷新
return 服务端返回的数据不直接返回给页面，而是返回给ajax的回调函数处理

3. 优缺点
优点：

使用js技术向服务器发送异步请求
无须刷新整个页面
服务器响应局部内容，所有ajax性能高

缺点：

ajax不适合所有场景，很多时候还是要使用同步交互
ajax虽然提高了用户体验，但向服务器发送请求的次数增多了，导致服务器压力增大
因为是通过js技术完成的，所有还需要处理浏览器兼容性问题

4. AJAX技术

四步操作：

创建核心对象
使用核心对象打开与服务器的连接
发送请求
注册监听，监听服务器响应

XMLHttpRequest

open(请求方式，是否异步)
send(请求体)
onreadystatechange：指定监听函数，在xmlhtpp对象的状态发生变化是被调用
readyState：当前xmlhttp对象的状态，其中4状态标识服务器响应结束
status：服务器响应的状态码，只有服务器响应结束时才有，200表示响应成功
responseText：获取服务器的响应体

一、基于JS的ajax实现

1.1 基础

创建XMLHttpRequest对象的方法，为了解决浏览器兼容问题，用try创建相应的对象

function createXMLHttpRequest(){
   
        var xmlHttp;
        try{
   
            xmlHttp = new XMLHttpRequest();
        }catch(e){
   
            // 适用于IE6
            try{
   
                xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
            }catch(e){
   
                //适用于IE5.5，以及更早的IE斑斑
                try{
   
                    xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
                }catch(e){
   }
            }
        }
        return xmlHttp;
    }

var xmlhttp = XMLHttprequest()				// 1. 创建XMLHttpRequest对象

xmlhttp.open('GET', 'url', true)			// 2.与服务器链接open('method', 'url', true)
// method: 连接方式
// url：指向的url
// true/false：异步/同步

xmlhttp.send('')							// 3. 传请求体的内容
// 如果是get请求，.send(null)

xmlhttp.onreadystatechange=function(){
   		// 4.监听
        console.log(xmlhttp.status);		// 响应状态代码 200/404
        console.log(xmlhttp.readyState);	// 状态码：目前执行到第几步 /0/1/2/3/4
    }

status
0：初始化未完成状态，创建XMLHttpRequest对象
1：请求开始，open()方法被调用，还没有send()
2：请求发送完成，send()方法被调用
3：开始读取服务器响应
4：读取服务器响应结束
注意： 如果onreadystatechange()监听函数写在open()和send()之后，readystate将没有0和1，

1.2 完整代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wolf's web</title>
</head>
<body>
    <button onclick="func1();">提交</button>
</body>
</html>

<script>
    function createXMLHttpRequest(){
    
        var xmlHttp;
        try{
    
            xmlHttp = new XMLHttpRequest();
        }catch(e){
    
            // 适用于IE6
            try{
    
                xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
            }catch(e){
    
                //适用于IE5.5，以及更早的IE斑斑
                try{
    
                    xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
                }catch(e){
    }
            }
        }
        return xmlHttp;
    }
    
    function func1(){
    
        var xmlhttp = createXMLHttpRequest();

        xmlhttp.onreadystatechange=function(){
    
            if(xmlhttp.readyState===4 && xmlhttp.status===200){
    		// 响应成功时执行
                var data = xmlhttp.responseText;
                alert(data)
            }
        };
        
		// GET请求：
        // xmlhttp.open('GET', '/ajax/index', true);
        // 第一个参数为请求方式，GET/POST，第二个参数为指向的url，第三个参数默认为true用异步，false改为同步
        // xmlhttp.send(null);      // 发送数据，GET方法时传null
        // 监听
		
		// POST求情：
		xmlhttp.open('POST', '/ajax/index/', true);
        // 设置post请求头,在连接之后设置
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp.send('name=wolf');	// 将数据发送到后端
		
    }
</script>

1.3 应用

注册用户时，实时监测用户名是否可用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
</head>
<body>
	<!--post请求表单-->
    <form action

最低0.47元/天解锁文章

wolf67

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端篇—ajax

文章目录前言前言什么是ajax？AJAX（Asynchronous JavaScript and XML）：异步的 JavaScript 和 XML，即使用Javascript语言与服务器进行异步交互。ajax还有一个最大的特点：当服务器响应时，不用刷新整个浏览器页面，而可以局部刷新。与服务器异步交互浏览器页面局部刷新优缺点优点：使用js技术向服务器发送异步...
复制链接

扫一扫