Ajax 学习笔记
2017-05-04 20:10
246 查看
1、ajax是(asychronous javascript and xml,异步的javascript和xml)的缩写,是一种用来改善用户体验的技术,其实质是利用浏览器提供的一个特殊对象(XMLHttpRequest)异步地向服务器发送请求。服务器返回部分数据,浏览器利用这些数据对当前页面做部分更新。整个过程,页面无刷新,不打断用户的操作。异步指的是,当这个对象向服务器发送请求的时候,浏览器不会销毁当前页面,用户仍然可以对当前页面做其他操作。如检验“用户名被占用”场景。
2、获取ajax对象
因为ajax对象并没有标准化,所以要区分浏览器。
function getXmlHttpRequest(){
var xhr = null;
if(window.XMLHttpRequest){ //非IE浏览器
xhr = new XMLHttpRequest();
}else{ //IE浏览器
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
3、ajax对象的重要属性
(1)onreadystatechange:用来绑定一个事件处理函数,该函数用来处理readystatechange事件。当ajax对象的readystate属性发生了任何的改变(比如,从0变成了1),就会触发readystatechange事件。
(2)readyState:有5个值(0,1,2,3,4),用于获取ajax对象与服务器进行通信的状态。其中,4表示ajax对象已经获取了服务器返回的所有数据。
(3)responseText:获取服务器返回的文本。
(4)responseXML:获取服务器返回的XML。
(5)status:获取服务器返回的状态码。
4、编程步骤
step1. 获得ajax对象;
var xhr = getXmlHttpRequest();
step2. 利用ajax对象发送请求;
方式一:发送get请求;
a. xhr.open('get', 'check_uname.do?username=Sally&age=22', true);
ps. param1:请求方式;param2:请求地址;param3:true表示让ajax对象发送异步请求,false表示发送同步请求,浏览器不会销毁当前页面,但是会锁定当前页面,用户不能对当前页面做其他操作。
b. xhr.onreadystatechange=handler;绑定好事件处理函数。
c. xhr.send(null); ajax对象把相关数据打包发送给服务器。
方式二:发送post请求;
a. xhr.open('post','check_uname.do',true);
b. xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
c. xhr.onreadystatechange=handler;
d. xhr.send('username=Sally');
ps. 按照http协议的要求,如果发送的是post请求,应该包含有一个消息头(content-type),默认情况下,ajax对象不会发送该消息头,所以,需要调用setRequestHeader方法来添加。
step3. 写服务器端的程序。一般只需要返回部分数据,不再是一个完整的页面。
step4. 写事件处理函数(handler),该函数处理服务器返回的数据,对当前页面做部分更新。
if(xhr.readyState == 4 && xhr.status == 200){
var txt = xhr.responseText;
部分更新...
}
5、编码问题
(1)发送get请求
a. 乱码产生的原因:如果是IE浏览器,会使用GBK字符集对中文参数值进行编码,其他浏览器会使用“utf-8”字符集。服务器端默认会使用ISO-8859-1来解码。
b. 解决方式:
step1. 设置服务器参数,让服务器统一使用“utf-8”来解码。conf/server.xml-->URIEncoding="utf-8"
step2. 让客户端统一编码。可以使用encodeURI函数对请求参数值进行统一的编码,该函数是js内置的一个函数。
(2)发送post请求
a. 乱码产生的原因:浏览器会使用"utf-8"来编码,服务器端默认会使用"iso-8859-1"来解码。
b. 解决方式:getParameter方法前面加入:request.setCharacterEncoding("utf-8");
6、JSON
JSON是(javascript object notation,JS对象声明)的缩写, 是一种轻量级的数据交换格式(轻量级相对于XML而言,XML文档大且解析速度慢,JSON文档更小,解析速度更快)。数据交换指的是将数据转换成一种与平台无关的数据格式,然后转交给接收方来处理。
JSON语法
(1)表示一个对象。
{属性名:属性值,属性名:属性值...}
a. 属性名必须使用双引号括起来;
b. 属性值可以是number,string,true/false,null,object五种数据类型;
c. 属性值如果是string,必须使用双引号括起来。
(2)表示由对象组成的数组。
[{},{}...],其中{}表示一个对象,[]表示由对象组成的数组。
使用JSON做数据交换
(1)java对象转换成JSON字符串:利用json官方的工具(json-lib.jar)中的JSONObject和JSONArray类,JSONObject可以把单个对象转换成JSON字符串,JSONArray可以把多个对象组成的数组或List转换成JSON字符串。
(2)JSON字符串转换成javascript对象:利用一些javascript框架(prototype.js中的evalJSON()),js内置的函数eval()也可以转换,但经常有一些安全问题,所以少用。
编程步骤:
step1. 建表;
step2. 实体类;
step3. DAO;List<> findAll(int num);
step4. Servlet,调用DAO,将查询到的数据转换成JSON字符串;
step5. JSP。
7、网景公司发明了javascript语言,微软发明了jscript语言。
ECMA组织制定了ECMAScript标准,规定了语法、数据类型、函数;
W3C组织制定了DOM标准/规范,做网页解析;
还存在BOM规范,其中有window,location,history...对象。
8、jQuery对Ajax的支持
(1)load方法:
<1>作用:向服务器发送异步请求,并且将服务器返回的数据直接添加到符合要求的节点之上(obj.innerHTML = 服务器返回的数据)。
<2>用法:$obj.load(uri, [data]);
uri:是一个字符串,用来设置请求地址,比如$obj.load('getPrice.do');
data:用来设置请求参数,可以是一个请求字符串的形式,比如'username=zs&age=22',也可以是一个对象,比如{'username':'zs', 'age':22}。如果请求参数使用第一种格式来发送,则load方法会使用get方式来提交,这是默认方式;如果请求参数使用第二种方式来发送,则load方法会使用post方式来提交。
(2)$.get和$.post方法:
<1>作用:向服务器发送异步请求,并且可以对服务器返回的数据进行处理。$.get底层发送get请求,而$.post底层发送post请求,用法完全一样。
<2>用法:$.get(uri, [data], [callback], [type]);
uri:是一个字符串,用来设置请求地址;
data:可以是字符串或对象,用来设置请求参数,两种方式都是用get方式来提交;
callback:回调函数,用来处理服务器返回的数据,不会立即执行,等事件产生之后才会执行;该函数格式如下:
function(obj),obj是服务器返回的数据,或处理结果;
type:服务器返回的数据的类型,html文档,text文本,json字符串,xml文档,script脚本;
(3) 缓存问题
<1>IE浏览器在发送get请求时,会查看请求地址是否访问过,如果访问过,则不再发送新的请求,而是直接使用之前缓存的结果。
<2>解决方法:
方式一:在请求地址后面添加一个随机数:$.get('quoto.do?'+Math.random(),function(){});
方式二:改为发送post请求;$.post('quoto.do',function(){});
(4)$.ajax方法:
用法:$.ajax({选项参数名:选项参数值,...});
常见的选项参数如下:url:请求地址;type:请求方式;data:请求参数,格式:字符串形式或对象形式;dataType:服务器返回的数据类型;success:回调函数,用来处理服务器返回的数据;error:回调函数,当服务器处理发生了异常,可以用该回调函数来处理。
2、获取ajax对象
因为ajax对象并没有标准化,所以要区分浏览器。
function getXmlHttpRequest(){
var xhr = null;
if(window.XMLHttpRequest){ //非IE浏览器
xhr = new XMLHttpRequest();
}else{ //IE浏览器
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
3、ajax对象的重要属性
(1)onreadystatechange:用来绑定一个事件处理函数,该函数用来处理readystatechange事件。当ajax对象的readystate属性发生了任何的改变(比如,从0变成了1),就会触发readystatechange事件。
(2)readyState:有5个值(0,1,2,3,4),用于获取ajax对象与服务器进行通信的状态。其中,4表示ajax对象已经获取了服务器返回的所有数据。
(3)responseText:获取服务器返回的文本。
(4)responseXML:获取服务器返回的XML。
(5)status:获取服务器返回的状态码。
4、编程步骤
step1. 获得ajax对象;
var xhr = getXmlHttpRequest();
step2. 利用ajax对象发送请求;
方式一:发送get请求;
a. xhr.open('get', 'check_uname.do?username=Sally&age=22', true);
ps. param1:请求方式;param2:请求地址;param3:true表示让ajax对象发送异步请求,false表示发送同步请求,浏览器不会销毁当前页面,但是会锁定当前页面,用户不能对当前页面做其他操作。
b. xhr.onreadystatechange=handler;绑定好事件处理函数。
c. xhr.send(null); ajax对象把相关数据打包发送给服务器。
方式二:发送post请求;
a. xhr.open('post','check_uname.do',true);
b. xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
c. xhr.onreadystatechange=handler;
d. xhr.send('username=Sally');
ps. 按照http协议的要求,如果发送的是post请求,应该包含有一个消息头(content-type),默认情况下,ajax对象不会发送该消息头,所以,需要调用setRequestHeader方法来添加。
step3. 写服务器端的程序。一般只需要返回部分数据,不再是一个完整的页面。
step4. 写事件处理函数(handler),该函数处理服务器返回的数据,对当前页面做部分更新。
if(xhr.readyState == 4 && xhr.status == 200){
var txt = xhr.responseText;
部分更新...
}
5、编码问题
(1)发送get请求
a. 乱码产生的原因:如果是IE浏览器,会使用GBK字符集对中文参数值进行编码,其他浏览器会使用“utf-8”字符集。服务器端默认会使用ISO-8859-1来解码。
b. 解决方式:
step1. 设置服务器参数,让服务器统一使用“utf-8”来解码。conf/server.xml-->URIEncoding="utf-8"
step2. 让客户端统一编码。可以使用encodeURI函数对请求参数值进行统一的编码,该函数是js内置的一个函数。
(2)发送post请求
a. 乱码产生的原因:浏览器会使用"utf-8"来编码,服务器端默认会使用"iso-8859-1"来解码。
b. 解决方式:getParameter方法前面加入:request.setCharacterEncoding("utf-8");
6、JSON
JSON是(javascript object notation,JS对象声明)的缩写, 是一种轻量级的数据交换格式(轻量级相对于XML而言,XML文档大且解析速度慢,JSON文档更小,解析速度更快)。数据交换指的是将数据转换成一种与平台无关的数据格式,然后转交给接收方来处理。
JSON语法
(1)表示一个对象。
{属性名:属性值,属性名:属性值...}
a. 属性名必须使用双引号括起来;
b. 属性值可以是number,string,true/false,null,object五种数据类型;
c. 属性值如果是string,必须使用双引号括起来。
(2)表示由对象组成的数组。
[{},{}...],其中{}表示一个对象,[]表示由对象组成的数组。
使用JSON做数据交换
(1)java对象转换成JSON字符串:利用json官方的工具(json-lib.jar)中的JSONObject和JSONArray类,JSONObject可以把单个对象转换成JSON字符串,JSONArray可以把多个对象组成的数组或List转换成JSON字符串。
(2)JSON字符串转换成javascript对象:利用一些javascript框架(prototype.js中的evalJSON()),js内置的函数eval()也可以转换,但经常有一些安全问题,所以少用。
编程步骤:
step1. 建表;
step2. 实体类;
step3. DAO;List<> findAll(int num);
step4. Servlet,调用DAO,将查询到的数据转换成JSON字符串;
step5. JSP。
7、网景公司发明了javascript语言,微软发明了jscript语言。
ECMA组织制定了ECMAScript标准,规定了语法、数据类型、函数;
W3C组织制定了DOM标准/规范,做网页解析;
还存在BOM规范,其中有window,location,history...对象。
8、jQuery对Ajax的支持
(1)load方法:
<1>作用:向服务器发送异步请求,并且将服务器返回的数据直接添加到符合要求的节点之上(obj.innerHTML = 服务器返回的数据)。
<2>用法:$obj.load(uri, [data]);
uri:是一个字符串,用来设置请求地址,比如$obj.load('getPrice.do');
data:用来设置请求参数,可以是一个请求字符串的形式,比如'username=zs&age=22',也可以是一个对象,比如{'username':'zs', 'age':22}。如果请求参数使用第一种格式来发送,则load方法会使用get方式来提交,这是默认方式;如果请求参数使用第二种方式来发送,则load方法会使用post方式来提交。
(2)$.get和$.post方法:
<1>作用:向服务器发送异步请求,并且可以对服务器返回的数据进行处理。$.get底层发送get请求,而$.post底层发送post请求,用法完全一样。
<2>用法:$.get(uri, [data], [callback], [type]);
uri:是一个字符串,用来设置请求地址;
data:可以是字符串或对象,用来设置请求参数,两种方式都是用get方式来提交;
callback:回调函数,用来处理服务器返回的数据,不会立即执行,等事件产生之后才会执行;该函数格式如下:
function(obj),obj是服务器返回的数据,或处理结果;
type:服务器返回的数据的类型,html文档,text文本,json字符串,xml文档,script脚本;
(3) 缓存问题
<1>IE浏览器在发送get请求时,会查看请求地址是否访问过,如果访问过,则不再发送新的请求,而是直接使用之前缓存的结果。
<2>解决方法:
方式一:在请求地址后面添加一个随机数:$.get('quoto.do?'+Math.random(),function(){});
方式二:改为发送post请求;$.post('quoto.do',function(){});
(4)$.ajax方法:
用法:$.ajax({选项参数名:选项参数值,...});
常见的选项参数如下:url:请求地址;type:请求方式;data:请求参数,格式:字符串形式或对象形式;dataType:服务器返回的数据类型;success:回调函数,用来处理服务器返回的数据;error:回调函数,当服务器处理发生了异常,可以用该回调函数来处理。
相关文章推荐
- Ajax学习笔记(六)
- AJAX IN ACTION 学习笔记(三)
- Ajax基础教程整理,学习笔记
- AJAX学习笔记(一)
- Ajax 学习笔记(3)
- Ajax 学习笔记(2)
- Ajax 学习笔记(1)
- Ajax学习笔记 0
- AJAX 学习笔记(4) GET与POST
- Ajax 学习笔记1
- ajaxPro /prototype.js 学习笔记
- Ajax.NET(学习资料笔记一)
- ajaxPro /prototype.js 学习笔记
- ajax学习笔记(一)
- ASPNET AJAX RC1.0 学习笔记
- Atlas 学习笔记: ajax 改进 by Atlas
- ajax学习笔记一:动态更改div位置
- AJAX IN ACTION 学习笔记(二)
- AJAX 学习笔记(2) Ajax标准交互模式
- Ajax 学习笔记(1)