Ajax最细详解（应用场景｜实现Ajax｜数据编码格式｜携带数据文件 ｜ 回调函数）

一、AJAX简介

		AJAX全称: Asynchronous Javascript And XML	翻译成中文就是‘异步的JavaScript和XML’
		即使用JavaScript语言与服务器进行异步交互也是用XML进行数据传输（不只是XML）
		XML 应用于 Web 开发的许多方面 常用于简化数据的存储和共享

		AJAX不是什么新的编程语言 而是一种使用现有标准的新方法
		AJAX最大的优点是不需要重新加载整个页面的情况下 可以与服务器交换数据并更新网页内容
		（简单的来说就是 在网页前端刚输入完数据 后端其实已经验证完数据了 不需要等点击提交了）
		AJAX不需要任何浏览器插件 但需要用户允许JavaScript在浏览器上执行
		
		同步交互：客户端发送一个请求后 需要等待服务器响应结束后 才能发送第二个请求
		异步交互：客户端发出一个请求后 无需等待服务器响应结束 就可以发出第二个请求

二、AJAX应用场景

		搜索引擎根据用户输入的命令关键词 自动提示该关键字是否通过检验
		很多网站注册的时候都会使用到AJAX技术 当文件框发生了输入变化 使用AJAX技术向服务端发送一个请求
		然后服务器会把查询到的结果响应给浏览器 期间浏览器是不用刷新的 最后把后端返回的结果展示出来 这就是AJAX
		 · 整个过程中页面没有刷新 只是刷新了页面中的局部位置
		 · 当请求发出后 浏览器还可以进行其他操作 无需等待服务器的响应

		当用户输入密码之后光标移动到其他表单上 浏览器会使用AJAX技术向服务器发送请求 
		服务器会查看用户输入的密码是否符合字母、数字、符号其中两种 如果不符合则会把信息返回给前端

三、实现AJAX

		我们来做一个简单的ajax基本操作 用一个算法来展示
		
		html
		    <form action="" method="post">
		        <input type="text" id="d1">+<input type="text" id="d2">=<input type="text" id="d3">
		        <input type="sumbit" value="计算" id="b1">
		    </form>			# 这个时候我们点击完计算之后数据是清空的页面也刷新了 那我们怎样实现Ajax的效果呢 ？

		正题			# 直接不使用form表单
			<input type="text" id="d1">+<input type="text" id="d2">=<input type="text" id="d3">
	        <input type="button" value="计算" id="b1">		
	        
		<script>
	        $('#b1').click(function (){		# 给这个按钮绑定一个点击事件
	            $.ajax({			# 点击这个按钮发送ajax请求
	                url:'' ,      	# 控制往哪发送 等价于form表单action参数
	                type:'post',    # 等价于from表单中的method参数
	                data:{'name':'Like'},   #  要发送给后端的数据
	                success:function (args) {   #  异步肯定有一个回调机制 对应的函数是success	ares会接受所有的数据 名字可以随意取
	                    alert(args)		#  朝后端发送的请求都会被success函数接受 并回馈
	                }               
	            })
	        })			'''这个时候我们可以看到 后端接收到了信息 并且回馈了前端信息 这就是ajax'''
	    </script>
	 

		'''现在知道了怎样接收信息和反馈那就可以实现刚刚的操作了'''
		
        <input type="text" id="d1">+<input type="text" id="d2">=<input type="text" id="d3">
        为了模仿出效果更高 直接把提交按钮取消 当第二个文本框失去焦点 直接让后端返回给第三个文本框
        
        script
       	        $('#d2').blur(function () {
		            $.ajax({
		                url:'',
		                type:'post',
		                data:{'i1':$('#d1').val(),'i2':$('#d2').val()}, // 发送给后端的数据 两个ID值
		                success:function (args) {
		                    $('#d3').val(args)	# 把反馈的信息给文本框3
		                }
		            })
		        })
		 
		 views
			 	def one_ajax(request):
				    if request.method == 'POST':
				        i1 = request.POST.get('i1')
				        i2 = request.POST.get('i2')
				        res = int(i1) + int(i2)		# 前端获取的是字符串转换成整形
				        return HttpResponse(res)
				    return render(request, 'oneajax.html')

四、数据编码格式

		我们前后端数据交互格式其实有很多种（普通键值对、文件、Json格式）每一种格式发过去之后 它是怎样动态识别的呢 ？
		我们通过网页右键检查>Network>Content-Type这个数据表示当前数据是什么编码的 可以通过form表单中的enctype去修改类型
		针对不同的格式数据Django后端会有不同的响应 
		Form-data 所有的数据都会被解析到request.files里面二进制是无法查阅的
		Urlencoded会被解析到request.post里面
		application/json它的数据格式是json格式这个格式form发送不了 只有Ajax可以发送

			'''模拟Ajax发送数据'''
	
	html 
		   <button id="d1">点击我发送数据</button>
		   <script>
		        $('#d1').click(function () {
		            $.ajax({
		                url:'',
		                type:'post',
		                data:JSON.stringify({'name':'Like', 'pwd':123}),    // 必须json格式
		                contentType:'application/json', // 要制定模式 默认Urlencoded
		                success:function (args) {
		                    
		                }
		            })
		        })
		    </script>
		    
	views
			def ajaxjson(request):
		    if request.is_ajax():   # 判断当前是不是ajax请求专门的方法
		        if request.method == 'POST':
		            print(request.POST)     # <QueryDict: {}>
		            print(request.FILES)    # <MultiValueDict: {}>
		            '''Django后端针对json格式数据处理不了 会放在request.body里面'''
		            print(request.body)     # b'{"name":"Like","pwd":123}'
		            '''Django它不会去处理需要我们自己去处理'''
		            json_bytes = request.body
		            import json
		            json_dict = json.loads(json_bytes)	# Json解码
		            print(json_dict, type(json_dict))	
		    return render(request, 'ajaxjson.html')
			

五、AJAX携带文件数据

		html
			    <input type="text" id="d1">
			    <input type="file" id="d2">
			    <button id="b1">点击我发送数据</button>
			    
			    <script>
			        $('#b1').click(function (){
			            // 1.产生内置对象
			            let forData = new FormData();
			            // 2.添加普通数据
			            forData.append('username',$('#d1').val())
			            // 3.添加文件数据
			            forData.append('file', $('#d2')[0].files[0])
			            // 4.发送ajax请求
			            $.ajax({
			                url:'',
			                type:'post',
			                data:forData,  // 本身含有编码 不需要做声明
			                contentType:false, // 不使用任何编码 必须添加固定格式
			                processData:false, // 不处理数据对象
			                success:function () {
			
			                }
			            })
			        })
			    </script>

		views
				def ajaxjson(request):
			    if request.is_ajax():   # 判断当前是不是ajax请求专门的方法
			        if request.method == 'POST':
			            print(request.POST)     # <QueryDict: {'username': ['Like']}>
			            print(request.FILES)    # <MultiValueDict: {'file': [<InMemoryUploadedFile: 勋章电子证书.png (image/png)>]}>
			
			    '''后端还是通过这两个方法获取文件 ajax后端还是一样的 
			    只是前端不一样需要添加contenttype,processdata'''

六、回调函数

			'''如果后端给前端返回一个Json字符串那HttpResponse与JsonResponse有什么却别呢 ？'''
			
	HttpResponse
                success:function (args) {
                    alert(args)  // 正常来说应该是个Json格式 但是基于网络应该是bytes类型
                    console.log(typeof args)    // string 我们就是来看 是不是帮我们自动解码
                    console.log(args)       // {"name": "Like", "pwd": 123}
                    console.log(args.name)
                    // undefined  普通字符类型意味着不能直接点 要手动转换了
                    let mydata = JSON.parse(args)	# json.parse转换
                    console.log(typeof mydata)
                    console.log(mydata)
                    console.log(mydata.name)
                    }
                    	
    JsonResponse
    			success:function (args) {
                    console.log(typeof args)	// object
                    console.log(args)       // {name: 'Like', pwd: 123}
                    }
    
			'''
			针对JsonResponse会自动反序列化 针对HttpResponse不会反序列化
			其实也很好理解 HR主要是用来返回字符串类型的 前端会认为给的是字符串 而JR一看是Json会自动序列化
			如果不想手动序列化有一个参数可以让HR自动反序列化就是
				datatype:'JSON',
			'''

技术小白记录学习过程，有错误或不解的地方请指出，如果这篇文章对你有所帮助请点点赞收藏+关注谢谢支持 !!!