Ajax
1.ajax(asynchronousjavascript and xml)
(1)ajax是什么?
ajax是一种用来改善用户体验的技术,其实质是
利用浏览器提供的一个特殊对象(XMLHttpRequest
对象)异步地向服务器发送请求,服务器一般只需要
返回部分数据(文本或者xml文档),浏览器利用这些
数据更新当前页面。整个过程,页面刷新,不打断
用户的操作。
注:
异步:ajax对象向服务器发送请求时,
浏览器不会销毁当前页面,用户仍然可
以对当前页面做其它操作。
(2)ajax对象如何获得
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
//非ie浏览器
xhr = newXMLHttpRequest();
}else{
xhr = newActiveXObject(
'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 = getXhr();
step2,使用ajax对象发送请求。
1)get请求
xhr.open('get',
'check_uname.do?uname=Tom',true);
请求地址
xhr.onreadystatechange=f1;
xhr.send(null);
注:
true:发送异步请求(浏览器不会销毁
当前页面,用户仍然可以对当前页面做其它
操作)。
false:发送同步请求(浏览器不会销毁
当前页面,浏览器会锁定当前页面,用户
不能够对当前页面做其它操作)。
step3,编写服务器端的程序,一般不需要返回
完整的页面,只需要返回部分数据。
step4,编写事件处理函数f1
function f1(){
//必须等到ajax对象获得了服务器返回的
//所有数据。
if(xhr.readyState== 4){
vartxt = xhr.responseText;
//使用txt更新当前页面。
}
}
1.编码问题
(1)发送get请求
1)乱码问题产生的原因:
ie浏览器提供的ajax对象在发送get请求时,会
对中文使用gbk编码,而其它浏览器使用utf-8编码。
服务器端,默认情况下,会使用iso-8859-1去解码。
2)如何解决
step1,让服务器使用utf-8来解码。
修改tomcat的配置文件(conf/server.xml)
<ConnectorURIEncoding="utf-8">
注:只针对get请求有效。
step2,使用encodeURI函数对请求地址进行处理。
注:encodeURI是js内置的函数,直接使用即可。
该函数会对中文参数使用utf-8来编码。
(2)发送post请求
1)乱码问题产生的原因
浏览器提供的ajax对象对中文参数都会使用
utf-8来编码。
服务器端默认使用iso-8859-1来解码。
2)解决方式
request.setCharacterEncoding("utf-8");
2,发送post请求
xhr.open('post','check_uname.do',true);
xhr.setRequestHeader('content-type',
'application/x-www-form-urlencoded');
xhr.onreadystatechange=f1;
xhr.send('uname=' + $F('username'));
注:
按照http协议要求,发送post请求时,必须提供
"content-type"消息头。而ajax对象默认情况下生成
的请求数据包里面,没有提供该消息头,需要调用
setRequestHeader方法来添加。
3.json (javascriptobject natation js对象声明)
(1)什么是json?
是一种轻量级的数据交换技术标准。
1)数据交换:
将数据转换成一种与平台无关的数据格式(
比如xml或者json)然后发送给接收方来处理。
2)轻量级:
跟xml相比,json文档更小,解析速度更快。
xml格式
<stock>
<code>600015</code>
<name>山东高速</name>
<price>20</price>
</stock>
json格式
{"code":"600015",
"name":"山东高速","price":20}
(2)json语法 (www.json.org)
1)表示一个对象
{属性名:属性值,属性名:属性值}
注:
a,属性名必须使用双引号括起来。
b,属性值可以是string,number,true/false,
null,object。
c,属性值如果是string,必须使用双引号括起来。
2)表示一个对象组成的数组
[{},{},{}...]
(3)使用json做数据交换
1)java对象或者java对象组成的数组/集合转换成
json字符串。 ----->服务器端
可以使用json官方提供的api来实现。
JSONObject JSONArray
2)json字符串转换成js对象 ----->客户端
可以使用json官方提供的api (json.js)
也可以使用一些js框架(prototype.js)。
注: prototype是一个曾经很流行的js函数库(js框架),
提供了一些常用的函数:
evalJSON(): 把json字符串转换成js对象或者
js对象组成的数组。
$(id): 依据id值查找节点(dom对象)。
$(id1,id2,id3...): 依据id1,id2,id3...分别查找
对应的节点,然后放到一个数组里
面返回。
$F(id): 依据id值查找节点,返回value属性值。
strip(): 除掉字符串两端的空格。