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<query>*/
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对象，因为<script>元素本身操纵HTTP脚本的能力完全可以实现加载并执行脚本。<script>能实现跨域HTTP请求，而XMLHttpRequest禁止。不是很理解。

 

 

参考文档：

《JavaScript权威指南第6版》