Ajax

Ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。　

开发模式

 
利用ajax j2ee开发组织机构
重要的技术和 Ajax 开发模式可以从现有的知识中获取。例如，在一个发送请求到服务端的应用中，必须包含请求顺序、优先级、超时响应、错误处理及回调，其中许多元素已经在Web 服务中包含了。同时，随着技术的成熟还会有许多地方需要改进，特别是UI部分的易用性。
Ajax 开发与传统的 B/S开发有很大的不同。这些不同引入了新的编程问题，最大的问题在于易用性。由于 Ajax 依赖浏览器的 JavaScript 和XML，浏览器的兼容性和支持的标准也变得和 JavaScript 的运行时性能一样重要了。这些问题中的大部分来源于浏览器、服务器和技术的组合，因此必须理解如何才能最好的使用这些技术。
综合各种变化的技术和强耦合的客户服务端环境，Ajax 提出了一种新的开发方式。Ajax 开发人员必须理解传统的 MVC 架构，这限制了应用层次之间的边界。同时，开发人员还需要考虑 B/S 环境的外部和使用 Ajax 技术来重定型 MVC 边界。最重要的是，Ajax 开发人员必须禁止以页面集合的方式来考虑 Web 应用而需要将其认为是单个页面。一旦 UI 设计与服务架构之间的范围被严格区分开来后，开发人员就需要更新和变化的技术集合了。 

 优缺点

 

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。
Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。就像DHTML应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
对应用Ajax最主要的批评就是，它可能破坏浏览器的后退与加入收藏书签功能。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的可能差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。不过开发者已想出了种种办法来解决这个问题，HTML5之前的方法大多是在用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态）。
关于无法将状态加入收藏或书签的问题，HTML5之前的一种方式是使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持追踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）HTML5以后可以直接操作浏览历史，并以字符串形式存储网页状态，将网页加入网页收藏夹或书签时状态会被隐形地保留。上述两个方法也可以同时解决无法后退的问题。
进行Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。如果不给予用户明确的回应，没有恰当的预读数据，或者对XMLHttpRequest的不恰当处理，都会使用户感到厌烦。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。
　　　
 
示例  
	$('#b1').on('click',function () {
				{#alert(123)#}
				// 点击按钮 朝后端发送post请求
				$.ajax({
					url:'',  // 控制发送给谁 不写就是朝当前地址提交
					type:'post',  // 发送方式是post请求
					data:{'i1':$('#i1').val(),'i2':$('#i2').val()},  // 发送的数据
					success:function (data) {  // data形参用来接收异步提交的结果
						{#alert(data)#}
						// 将后端计算好的结果 通过DOM操作 渲染到第三个input矿中
						$('#i3').val(data)
					}
				})
			})

　　

在django中 使用ajax:
　　 
contentType前后端传输数据编码格式
   前后端传输数据编码格式
      1.urlencoded
      2.formdata
      3.json
   
   form表单
      默认使用的编码格式是urlencoded
         数据格式:name=jason&pwd=123
         django后端针对urlencoded编码格式的数据会自动解析并放到request.POST中供用户获取
   
      可以修改为formdata 传文件
         django后端针对只要是符合urlencoded编码格式的数据(name=jason&pwd=123)都会自动解析并放到request.POST中供用户获取
         如果是文件 只要你指定的编码是formdata 就会自动解析并放到request.FILES中
      总结:前后端传输数据的时候 一定要保证数据格式和你的编码格式是一致的 不能骗人家!!!
   
   ajax提交数据
      ajax默认数据提交方式也是urlencoded
      
      ajax发送json格式数据
         django后端针对json格式的数据 并不会自动解析放到request.POST或者request.FILES里面
         它并不会解析json格式数据 而是将它原封不动的放在request.body中了
         $('#b1').on('click',function () {
            alert(123)
            // 点击按钮 朝后端发送post请求
            $.ajax({
               url:'',  // 控制发送给谁 不写就是朝当前地址提交
               type:'post',  // 发送方式是post请求
               data:JSON.stringify({'username':'jason','password':123}),  // 发送的数据
               contentType:'application/json',  // 告诉后端你这次的数据是json格式

               success:function (data) {  // data形参用来接收异步提交的结果
                  alert(data)
                  // 将后端计算好的结果 通过DOM操作 渲染到第三个input矿中
                  $('#i3').val(data)
               }

            })
         )




ajax传输文件
     ajax传输文件
   $('#b1').on('click',function () {
       ajax传输文件 建议使用内置对象formdata
      var formData = new FormData();   既可以传普通的键值对 也可以传文件
       添加普通键值
      formData.append('username','jason');
      formData.append('password','123');
       传文件
       如何获取文件标签所存储的文件对象?  固定语法
       1.先用jQery查找到存储文件的input标签
       2.将jQuery对象转成原生js对象
       3.利用原生js对象的方法 .files[0]获取到标签内部存储的文件对象
       4.一定要指定两个参数都为false
      formData.append('my_file',$('#d1')[0].files[0]);
      $.ajax({
         url:'',   控制发送给谁 不写就是朝当前地址提交
         type:'post',   发送方式是post请求
         data:formData,  发送的数据

          ajax发送文件需要指定两个额外的参数
         processData:false,   告诉前端不要处理数据
         contentType:false,   不适用任何编码  因为formdata对象自身自带编码 django后端也能够识别formdata对象

         success:function (data) {   data形参用来接收异步提交的结果
            {#alert(data)#}
             将后端计算好的结果 通过DOM操作 渲染到第三个input矿中
            $('#i3').val(data)
         }

      })
   })
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Sunbreaker/p/11574736.html