AJAX-页面无需刷新技术

最新推荐文章于 2024-09-16 13:07:33 发布

Z.Meng

最新推荐文章于 2024-09-16 13:07:33 发布

阅读量2.5k

点赞数 2

分类专栏： Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/zm17671443092/article/details/108062246

版权

Ajax 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

AJAX-页面无需刷新技术

在这里插入图片描述

一什么是ajax？

1.1.Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新技术）。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。
1.2Ajax的应用场景：
1.2.1 检查用户名是否已被注册：
很多站点的注册页面都具被自动检测用户名是否存在的友好提示，该功能整体页面并没有刷新，但仍然可以异步与服务器进行数据交换，查询用户输入的用户名是否存在数据库。
1.2.2 省市级联下拉框联动：
很多站点都存在输入用户地址的操作，在完成地址输入时，用户所在的省份是下拉框，当选择不同的省份时会出现不同市区的选择，这就是最常见的省市联动效果。
1.2.3 内容自动补全：
不管时专注于搜索的百度，还是站点内商品搜索的淘宝，都有搜索的功能，在i搜索框输入查询关键字时，整个页面没有刷新，但会根据关键字显示相关查询字条，这个过程是异步的。
百度的搜索补全功能：
淘宝的搜索补全功能：

二为什么要用ajax？

Ajax应用程序的优势在于：

1.1. 通过异步模式，提升了用户体验
1.2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
1.3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
1.4. AJAX最大的特点是什么。
Ajax可以实现动态不刷新（局部刷新）
就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

2同步方式与异步方式的区别：

2.1同步方式发送请求：发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会一直处于等待过程中。
2.2异步方式发送请求：发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。
在这里插入图片描述

3. Ajax的原理分析：

在这里插入图片描述

AJAX引擎会在不刷新浏览器地址栏的情况下，发送异步请求：
1.使用JavaScript获取浏览器内置的AJAX引擎（XMLHttpRequest对象）
2.使用js确定请求路径和请求参数
AJAX引擎对象根据请求路径和请求参数进行发送请求
1.服务器接收到Ajax引擎的请求进行处理：
2.服务器获得请求参数数据
3.服务器处理请求业务（调用业务层代码）
4.服务器响应数据给Ajax引擎
Ajax引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据更新到浏览器页面的具体位置：
1.通过设置给Ajax引擎的回调函数获取服务器响应的数据
2.使用JavaScript在指定的位置，显示响应的数据，从而局部修改页面的数据，达到局部刷新的目的。

三如何使用用ajax？

3.1使用原生js

3.1.1创建Ajax引擎对象
3.1.2为Ajax引擎对象绑定监听（监听ajax对象的状态变化，监听服务器已将数据响应给引擎）
3.1.3创建请求消息建立连接
3.1.4发送请求消息

	// 1.创建  ajax请求 依赖一个对象xhr对象
		var xhr;
		if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari
		  	xhr = new XMLHttpRequest();
		}
		else{//  IE6, IE5
		  xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		console.log(xhr)
		console.log("状态码:" + xhr.readyState) //0 1 2 3 4
		console.log("响应码:" + xhr.status)
		// http响应的结果：(重点)
		// 1xx   信息类
		// 2xx   成功   200
		// 3xx   重定向   304  302   301 
		// 4xx   客户端错误  404
		// 5xx   服务端错误  
		console.log("响应的内容:" + xhr.responseText)   //响应的文本
		// 2.监听   监听xhr对象的状态变化   onreadystatechange
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4){   //表示ajax的请求已经发送完成，但是不知道成功还是失败
				if(xhr.status == 200){   //前提条件是完成，此时是成功的状态
					console.log(xhr.responseText)
				}
			}
		}
		// 3.创建请求消息 建立连接
		// xhr.open("请求方式（常见的get和post http的请求方式一共有8种）"，请求的地址,boolean表示同步还是异步)
		xhr.open("GET","02.php",true)
		// 状态有 0 -> 1
		// 4.发送请求消息
		xhr.send( null )

3.2Ajax引擎连接状态readyState值0~4变化过程：
在这里插入图片描述

xhr.readyState的状态从0到4发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

这里状态值4只能说明接收到了服务器的响应服务器处理ajax请求结束，但是不能代表正确的获取了服务器的响应，需要配合http状态码200两个条件就可以说明正确的获取了服务器响应。只有这两个条件满足，xmlhttp.responseText才可以获取到正确的响应数据。

使用post方式提交：

		// get接口测试可以直接在浏览器中完成。因为浏览器的地址栏中所有的方式全部为get
		// post接口的测试.
		// 	有很多工具，例如postman  
		// 	一定要选择发送方式，数据要放在body中，选择x-www-form-urlencoded
		// 1.创建xhr对象
		var xhr;
		if (window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		}else{
		 	xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		// 2.监听函数
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4){
				if(xhr.status == 200){
					console.log(xhr.responseText)
				}else{
					console.log("发生错误的响应码:" + xhr.status)
				}
			}
		}
		// 3.建立连接    post请求的参数不需要拼接
		xhr.open("POST","02.php",true);
		// 3.5 设置一个请求头
		// post请求在发送之前，得把post请求的参数格式指定一下
		// text/html
		// multipart/form-data
		// multipart/json
		// application/x-www-form-urlencoded
		// ...
		xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
		// 4.发送  post请求的参数写在send中
		// key1=value1&key2=value2
		xhr.send("username=jack&score=100")

3.2使用jquery

3.2.1使用get

$('button').on('click',function(){
            $.ajax({
                type:'GET', //提交方式
                url:'02.php', //地址
                data:{
                    'username':$('input').val(),
                    'score':100
                },
                success:function(data){   //请求成功
                   console.log(data);
                },
                error:function(err){    //请求失败
                  console.log(err);
                }
            })
        })

3.2.2使用post

        $('button').on('click',function(){
            $.ajax({
                type:'post', //提交方式
                url:'02.php', //地址
                data:{
                    'username':$('input').val(),
                    'score':100
                },
                success:function(data){   //请求成功
                   console.log(data);
                },
                error:function(err){    //请求失败
                  console.log(err);
                }
            })
        })