Ajax学习总结（一）
Ajax学习(一)
一、 什么是ajax
1、Ajax(Asynchronous JavaScript and XML)使用脚本操纵HTTP的Web应用架构。
2、所有的浏览器都支持XMLHttpRequest对象，它定义了用脚本操纵HTTP的API。
3、HTTP请求四部分组成：
（1）HTTP请求方法或“动作”
（2）请求的URL
（3）一个可选的请求头集合，其中可能包括身份验证信息
（4）一个可选的请求主体
服务器返回的HTTP响应三部分组成：
（1） 一个数字和文字组成的状态码，用来显示请求的成功和失败
（2） 一个响应头的集合
（3） 响应主体
二、 ajax的工作原理
1、 代码中的实现步骤：
（1） 指定请求
request.open(‘post’,url),request.setRequestHeader(‘Content-Type’,’text/plain;charset=utf-8’),request.send(msg)
（2） 取得响应
request.getResponseHeader(‘Content-Type’),request.responseText
如果服务器向发送诸如对象或数组这样的结构化数组作为其响应，它应该传输JSON编码的字符串数据。当接收它时，可以把responseText属性传递给JSON.parse().
项目中的使用：（1）后台生成的JSON字符串方式 JSONArray.toString()传递给前台，前台jQuery的$(url,function(data){});中data直接使用JSON字符串。不确定jQuery是否进行了处理，还是java的JSON串转成字符串后前台可以直接使用。（2）Upload向前台传递信息采用的是JSON编码的字符串，如“{‘status’:0 , ‘appId’ : ‘19388383892’}”，到dropzone插件responseText得到文本数据后通过eval（）转换成JSON。最好不要使用eval()函数，而使用JSON.parse()。
2、编码请求主体
（1）表单的编码请求：表单中的数据编码到一个字符串中并随请求发送。编码方式：对每个表单元素的名字和值执行普通的URL编码（使用十六进制转移码替换特殊字符）。
（2）JSON的编码请求：JSON.stringify(data)
（3）XML编码的请求：
/*create an XML document with root element
var doc =document.implementation.createDocument("","query",null);
var query = document.documentElement;var find = document.createElement("find");
query.appendChild(find);
find.setAttribute("zipCode",where);
find.setAttribute("radius",radius);
find.appendChild(docu.createTextNode(what));
（4）上传文件：XHR2 API允许通过send()向服务器传送file对象来实现文件上传。文件类型是二进制大对象类型中的一个子类。
（5）multipart/form-data请求：HTML表单同时包含文件上传元素和其他元素。
重点：引申问题---request中contentType的重要性，contentType在ajax提交表单的设置看“AJAX POST请求参数以formdata和request payload数据在servlet的获取方式”
3、HTTP进度事件
（1）XMLHttpRequest对象x，设置x.onprogress以监控响应的下载速度，并设置x.upload.onprogress以监控请求的上传速度。
（2）除了像type和timestamp这样常用的Event对象属性外，与这些progress事件相关联的事件对象还有3个属性：loaded表示目前传送的字节数值。total是自”Content-Length”头传输的数据的整体长度，如果不知道长度，则为0。如果知道长度，lengthComputable为true，否则为false。
if("onprogress" in (new XMLHttpRequest())){
request.onprogress = function(e){
if(e.lengthComputable){
progress.innerHTML =Math.round(100 * e.loaded/e.total) + "% Complete"; }
} }
三、 jquery的ajax实现
jQuery定义了为ajax定义了一个高级工具方法jQuery.ajax()及四个高级工具函数jQuery.getScript()、jQuery.getJSON()、jQuery.get()、jQuery.post()，记住其使用的参数设置基本就可使用jQuery的ajax方法。
四、 问题记录
1、使用XMLHttpRequest请求JavaScript脚本，然后使用全局eval()执行这个脚本。但在这种情况下不需要使用XMLHttpRequest对象，因为